<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from 'echarts';
import { guid } from '@/utils/util';

import { reactive, toRefs, onMounted, watch, nextTick } from 'vue';

export default {
  name: 'shishijiangyu',
  props: {
    //刷新标志
    refresh: {
      type: [String, Number],
      default: 1,
    },
    //数据
    data: {
      type: Object,
      default: {},
    },
  },
  setup(props) {
    const state = reactive({
      id: guid(),
      chart: null,
      xData: [],
      yData1: [],
      yData2: [],
    });

    const resizeTheChart = () => {
      if (state.chart) {
        state.chart.resize();
      }
    };
    const init = () => {
      state.xData = props.data.listName;
      state.yData1 = props.data.diduan;
      state.yData2 = props.data.zhengzhi;

      let chartDom = echarts.init(document.getElementById(state.id));
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          backgroundColor: '#000000',
          borderColor: '#00D2FF',
          textStyle: { fontSize: 14, fontWeight: 500, color: '#00D2FF' },
        },
        grid: {
          top: '22%',
          left: '8%',
          right: '8%',
          bottom: '5%',
          containLabel: true,
        },
        legend: {
          show: true,
          textStyle: {
            color: '#E8F7FF',
          },
          itemHeight: 3,
          itemWidth: 10,
          icon: 'rect',
        },
        xAxis: {
          type: 'category',
          data: state.xData,

          splitLine: {
            show: false,
          },
          axisLabel: {
            color: '#ffffffFF',
            fontSize: 11,
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '堤段长度(km)',
            alignTicks: true,
            min: 0,
            nameTextStyle: {
              color: '#16d0dcFF',
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted',
                color: 'rgba(14, 107, 165, 1)',
              },
            },
            axisLabel: {
              color: '#1cf5fcFF',
            },
          },
          {
            type: 'value',
            name: '整治长度(km)',
            alignTicks: true,
            min: 0,
            position: 'right',
            nameTextStyle: {
              color: '#52d183FF',
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted',
                color: 'rgba(14, 107, 165, 1)',
              },
            },
            axisLabel: {
              color: 'rgb(44 252 100 / 98%)',
            },
          },
        ],
        series: [
          {
            name: '堤段长度',
            // data: props.data.rainlist,
            data: state.yData1,
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [2, 2, 0, 0],
                color: '#1cf5fcFF',
                // color: new proxy.echarts.graphic.LinearGradient(
                //   0,
                //   1,
                //   0,
                //   0, // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                //   [
                //     { offset: 1, color: '#1cf5fcFF' },
                //     { offset: 0, color: 'rgba(11, 167, 124, 0.3)' },
                //   ]
                // ),
              },
            },
          },
          {
            name: '整治长度',
            // data: props.data.rainlist,
            data: state.yData2,
            yAxisIndex: 1,
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [2, 2, 0, 0],
                color: '#5fe889FF',
                // color: new proxy.echarts.graphic.LinearGradient(
                //   0,
                //   1,
                //   0,
                //   0, // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                //   [
                //     { offset: 1, color: 'rgb(44 252 100 / 98%)' },
                //     { offset: 0, color: 'rgb(44 252 100 / 21%)' },
                //   ]
                // ),
              },
            },
          },
        ],
      };

      option && chartDom.setOption(option, true);
      state.chart = chartDom;
    };
    watch(
      () => props.refresh,
      (newVal, oldVal) => {
        console.log(props, 'props');
        //先销毁实例
        // myChart.value && myChart.value.dispose();
        init();
      }
    );

    onMounted(() => {
      nextTick(() => {
        init();
      });
      window.addEventListener('resize', resizeTheChart);
    });
    return {
      ...toRefs(state),
      resizeTheChart,
      init,
    };
  },
};
</script>

<style></style>