<template>
  <div class="line" v-loading="loading">
    <div class="echarts" ref="echarts"></div>
    <!-- <div class="xAxisUnit">{{ dateMap[curType] }}</div> -->
  </div>
</template>

<script setup>
import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
const props = defineProps({
  curType: {
    type: String,
    default: '',
  },
  //站点code
  stCode: {
    type: String,
    default: '',
  },
  rainTime: {
    type: String,
    default: '',
  },
});
const { proxy } = getCurrentInstance();
const loading = ref(false);
const myChart = shallowRef(null);
const echartData = {
  xAxis: [],
  yAxis: [],
};

const initEcharts = () => {
  myChart.value && myChart.value.clear();
  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
  // 绘制图表
  myChart.value.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      // formatter: params => {
      //   let str = '';
      //   params.forEach(item => {
      //     str += `
      //     <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 10px">
      //       <div style="display: flex;align-items: center;">
      //         <span style="background-color: ${item.color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
      //         <span>${item.seriesName}</span>
      //       </div>
      //       <div style="color:#666;font-weight:900;font-size:14px">${item.value}</div>
      //     </div>
      //   `;
      //   });
      //   return `
      //   <div style="margin: 0px 0 0;line-height:1;width: 180px;">
      //     <div>${params[0].axisValue}</div>
      //     ${str}
      //   </div>
      // `;
      // },
    },
    grid: {
      left: '12%',
      right: '8%',
      top: '24%',
      bottom: '16%',
    },
    xAxis: {
      type: 'category',
      data: echartData.xAxis,
      axisLabel: {
        color: '#D8F4FF',
      },
      axisLine: {
        lineStyle: {
          color: '#53D8FB',
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        name: `降雨量${props.curType == 'month' ? '(mm)' : '(mm)'} `,
        type: 'value',
        nameTextStyle: {
          color: '#D1DEEE',
        },
        axisLabel: {
          color: '#fff',
          fontSize: 12,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#005CBA',
            type: 'dashed',
          },
        },
        axisLine: {
          lineStyle: {
            color: '#005CBA',
            width: 1,
            type: 'dashed',
          },
          show: true,
        },
        splitLine: {
          lineStyle: {
            color: '#D1DEEE',
            type: 'dashed',
            color: '#53D8FB',
          },
        },
        nameTextStyle: {
          color: '#fff',
        },
      },
    ],
    dataZoom: [
      // {
      //   //默认控制x轴
      //   type: 'slider', //图标下方的伸缩条
      //   // show: true, //是否显示

      //   // realtime: true,
      //   start: 0, //伸缩条开始位置
      //   end: 60, //伸缩条结束位置
      // },
      {
        type: 'inside',
        // xAxisIndex: [0],
        start: 0,
        end: 60,
      },
    ],
    series: [
      {
        name: '降雨量',
        type: 'bar',
        barWidth: 18,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#0b9eff',
              },
              {
                offset: 1,
                color: '#63caff',
              },
            ],
          },
        },
        // label: {
        //   show: true,
        //   position: 'top',
        //   distance: 10,
        //   color: '#fff',
        // },
        smooth: true,
        data: echartData.yAxis,
      },
      // {
      //   data: [1, 1, 1, 1, 1, 1, 1, 1],
      //   type: 'pictorialBar',
      //   barMaxWidth: '20',
      //   symbol: 'diamond',
      //   symbolOffset: [0, '50%'],
      //   symbolSize: [20, 15],
      // },
      // {
      //   data: echartData.yAxis,
      //   type: 'pictorialBar',
      //   barMaxWidth: '20',
      //   symbolPosition: 'end',
      //   symbol: 'diamond',
      //   symbolOffset: [0, '-50%'],
      //   symbolSize: [20, 12],
      //   zlevel: 2,
      // },
    ],
  });
};

const getData = async () => {
  console.log(props, '1`');
  if (props.curType == 'day') return;
  loading.value = true;
  let rainTime = '';
  if (props.curType === 'month') {
    rainTime = proxy.moment(props.rainTime).format('YYYY-MM');
  } else if (props.curType === 'year') {
    rainTime = proxy.moment(props.rainTime).format('YYYY');
  }
  const res = await rainRainlist({
    rainTime: rainTime,
    timeType: props.curType,
    stCode: props.stCode,
  });
  loading.value = false;
  if (res?.code !== 200) return;
  if (res.data) {
    echartData.xAxis = res.data.map(item => item.rainTime);
    echartData.yAxis = res.data.map(item => item.rainCumulative);
  }
  initEcharts();
};
watch(
  () => props.curType,
  value => {
    getData();
  },
  {
    deep: true,
    immediate: true,
  }
);
watch(
  () => props.stCode,
  value => {
    getData();
  },
  {
    deep: true,
    // immediate: true
  }
);
watch(
  () => props.rainTime,
  value => {
    getData();
  },
  {
    deep: true,
    // immediate: true
  }
);
onMounted(() => {
  window.addEventListener('resize', () => {
    myChart.value && myChart.value.resize();
  });
});
</script>

<style lang="scss" scoped>
.line {
  // padding-top: 10px;
  height: 100%;
  position: relative;

  .echarts {
    height: 100%;
  }

  .xAxisUnit {
    position: absolute;
    bottom: 8px;
    right: 20px;
    color: #d1deee;
    font-size: 12px;
  }
}
</style>