<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: 'moreBar',
  setup(props) {
    const state = reactive({
      series: [],
      legend: [],
      id: guid(),
      chart: null,
      colorList: [
        { color1: 'rgba(7, 124, 241, 1)', color2: 'rgba(7, 124, 241, .5)' },
        { color1: 'rgba(76, 64, 241, 1)', color2: 'rgba(76, 64, 241, .5)' },
        { color1: 'rgba(128, 54, 228, 1)', color2: 'rgba(128, 54, 228, .5)' },
        { color1: 'rgba(3, 194, 236, 1)', color2: 'rgba(3, 194, 236, .5)' },
      ],
      XData: [],
      chartData: [],
    });
    const resizeTheChart = () => {
      if (state.chart) {
        state.chart.resize();
      }
    };

    const initSeries = () => {
      state.series = [];
      state.chartData.forEach((v, i) => {
        state.series.push({
          name: v.name,
          data: v.ydata,
          type: 'bar',
          barWidth: 12,
          itemStyle: {
            borderRadius: [10, 10, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: state.colorList[i].color2,
              },
              {
                offset: 1,
                color: state.colorList[i].color1,
              },
            ]),
          },
        });
        state.legend.push(v.name);
        state.XData = state.chartData[0].xdata;
      });
    };
    const init = () => {
      if (state.chart) state.chart.dispose();
      let chartDom = echarts.init(document.getElementById(state.id));
      chartDom.clear();
      let option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#F5F8FA',
          borderColor: '#143343',
          axisPointer: {
            type: 'shadow',
          },
          textStyle: { fontSize: 14, fontWeight: 500, color: '#666666' },
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          top: '-3%',
          itemHeight: 5,
          itemWidth: 10,
          data: state.legend,
          icon: 'rect',
          textStyle: {
            color: 'rgba(166, 201, 203, 1)',
            fontSize: 14,
            lineHeight: 30,
          },
        },
        grid: {
          top: '10%',
          left: '10%',
          right: '5%',
          bottom: '22%',
        },
        xAxis: {
          data: state.XData,
          axisLabel: {
            color: '#fff',
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(45, 60, 92, 1)',
              width: 1, //这里是为了突出显示加上的
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(45, 60, 92, 1',
              width: 1,
            },
          },
          axisLabel: {
            color: '#fff',
            //fontSize: 10,
            //设置行显示换行
            formatter: function (params) {
              var newParamsName = '';
              var paramsNameNumber = params.length;
              var provideNumber = 7;
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = '';
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },
          },
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          axisLabel: {
            color: '#fff',
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(45, 60, 92, 1)',
              width: 1, //这里是为了突出显示加上的
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(45, 60, 92, 1',
              width: 1,
            },
          },
        },
        series: state.series,
      };
      chartDom.clear();
      chartDom.setOption(option, true);
      state.chart = chartDom;
    };
    const initData = () => {
      initSeries();
      init();
    };
    onMounted(() => {
      nextTick(() => {
        window.addEventListener('resize', resizeTheChart);
      });
    });
    return {
      ...toRefs(state),
      resizeTheChart,
      initData,
    };
  },
};
</script>