<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from 'echarts';
import { guid } from '@/utils/ruoyi';
import { reactive, toRefs, onMounted, watch, onUnmounted, normalizeStyle } from 'vue';
export default {
  name: 'line-chart',
  props: {
    echartData: Object,
    refresh: Number,
  },
  setup(props) {
    const allData = reactive({
      series: [],
      legend: [],
      id: guid(),
      chart: null,
      timer: null,
    });
    const resizeTheChart = () => {
      if (allData.chart) {
        allData.chart.resize();
      }
    };

    const init = () => {
      let chartDom = echarts.init(document.getElementById(allData.id));
      let option = {
        color: [
          '#63caff',
          '#49beff',
          'rgba(18, 81, 210, 0.3)',
          'rgba(18, 81, 210, 0.3)',
          'rgba(18, 81, 210, 0.3)',
          '#6c93ee',
          '#a9abff',
          '#f7a23f',
          '#27bae7',
          '#ff6d9d',
          '#cb79ff',
          '#f95b5a',
          '#ccaf27',
          '#38b99c',
          '#93d0ff',
          '#bd74e0',
          '#fd77da',
          '#dea700',
        ],
        grid: {
          containLabel: true,
          left: 10,
          right: 20,
          bottom: 10,
          top: 30,
        },
        xAxis: {
          axisLabel: {
            color: '#c0c3cd',
            fontSize: 12,
            interval: 0,
          },
          axisTick: {
            lineStyle: {
              color: '#384267',
            },
            show: true,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#384267',
              width: 1,
              type: 'dashed',
            },
            show: true,
          },
          data: props.echartData.xAxis,
          type: 'category',
        },
        yAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: 12,
          },
          axisTick: {
            lineStyle: {
              color: '#005CBA',
              width: 1,
            },
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#005CBA',
              type: 'dashed',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#005CBA',
              width: 1,
              type: 'dashed',
            },
            show: true,
          },
          name: props.echartData.yName,
          nameTextStyle: {
            color: '#fff',
          },
        },
        series: [
          {
            data: props.echartData.seriesData,
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 20,
            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',
            },
          },
          {
            data: [1, 1, 1, 1, 1, 1, 1, 1],
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbol: 'diamond',
            symbolOffset: [0, '50%'],
            symbolSize: [20, 15],
          },
          {
            data: props.echartData.seriesData,
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [20, 12],
            zlevel: 2,
          },
          {
            data: props.echartData.seriesDataMax,
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 20,
            barGap: '-100%',
            zlevel: -1,
          },
          {
            data: [1, 1, 1, 1, 1, 1, 1, 1],
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbol: 'diamond',
            symbolOffset: [0, '50%'],
            symbolSize: [20, 15],
            zlevel: -2,
          },
          {
            data: props.echartData.seriesDataMax,
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [20, 12],
            zlevel: -1,
          },
        ],
        tooltip: {
          trigger: 'axis',
          show: false,
        },
      };
      option && chartDom.setOption(option, true);
      allData.chart = chartDom;
    };
    watch(
      () => props.refresh,
      () => {
        if (allData.chart) {
          allData.chart.dispose();
          allData.chart = null;
        }
        setTimeout(() => {
          init();
        }, 0);
      }
    );

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