<template>
  <!-- 天气温度平滑折线图 -->
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid } from '@/utils/ruoyi';
import { nextTick } from 'vue';
const id = guid();
const myChart = shallowRef('');
import * as echarts from 'echarts';

const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //x轴数据
  XAxis: {
    type: Array,
    default: () => [],
  },
  //y轴数据
  YAxis: {
    type: Array,
    default: () => [],
  },
  //名字
  DataName: {
    type: String,
  },
  //类型
  typeName: {
    type: String,
    default: '',
  },
  yAxisarr: {
    type: Array,
    default: () => [],
  },
});

watch(
  () => props.refresh,
  value => {
    console.log('???????');
    //先销毁实例
    myChart.value && myChart.value.dispose();
    init();
  },
  {
    deep: true,
  }
);

function init() {
  let colorarr = ['#409eff', '#0ba47b', '#a34a5e', '#dac16f', '#ff7f50', '#ff69b4', '#87ceeb', '#4682b4', '#98fb98'];
  let rightnumber = props.yAxisarr.length * '2.5' + '%';
  let newarr = [];
  let marklinedata = [];
  let maxArr = [];
  let minArr = [];
  let finyasx = [
    {
      show: false,
      inverse: true, //控制x轴在上方
      name: props.typeName,
      type: 'value',
      axisLabel: {
        show: true,
        color: '#409eff',
      },
      axisLine: {
        lineStyle: {
          color: '#409eff',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(61,91,98,0.8)',
        },
      },
      // min: 0,
    },
  ];

  let finxse = [
    // {
    //   name: props.typeName,
    //   type: 'bar',
    //   barWidth: 12,
    //   itemStyle: {
    //     borderRadius: [0, 0, 6, 6],
    //     color: function () {
    //       return new echarts.graphic.LinearGradient(
    //         0,
    //         1,
    //         0,
    //         0,
    //         [
    //           {
    //             offset: 0.1,
    //             color: '#409eff', // 0% 处的颜色
    //           },
    //           {
    //             offset: 0.9,
    //             color: '#013068', // 100% 处的颜色
    //           },
    //         ],
    //         false
    //       );
    //     },
    //   },
    //   // showBackground: true,
    //   backgroundStyle: {
    //     color: 'transparent',
    //     borderWidth: 1,
    //     borderColor: 'rgba(148, 250, 65, 0.2)',
    //   },
    //   data: props.YAxis,
    // },
  ];

  console.log('获取的Y轴的数据', props.yAxisarr);

  // 处理多个y轴遍历展示
  if (props.yAxisarr) {
    props.yAxisarr.map((item, index) => {
      let arr = [];
      let markLineArr = [];
      item.cordonLineList.map(p => {
        markLineArr.push(Number(p.lineValue));
        arr.push({
          silent: false, //鼠标悬停事件  true没有，false有
          lineStyle: {
            //警戒线的样式  ，虚实  颜色
            type: 'dashed',
            color: p.lineColor,
          },
          name: p.lineName,
          yAxis: Number(p.lineValue),
          label: {
            formatter: `${p.lineValue}-${p.lineName}`,
            color: p.lineColor,
          },
        });
      });

      item['maxValue'] = Math.max.apply(null, [...item.datas, ...markLineArr]);
      item['minValue'] = Math.min.apply(null, [...item.datas, ...markLineArr]);

      marklinedata.push(arr);
    });

    console.log('marklinedata', marklinedata);
    props.yAxisarr.map((item, index) => {
      let obj = {
        name: item.dataName,
        type: 'value',
        axisLabel: {
          show: true,
          color: colorarr[index],
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: colorarr[index],
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(61,91,98,0.8)',
          },
        },
        min: Math.floor(item.minValue * 0.95),
        max: item.maxValue,
      };

      if (index == 0) {
        obj.position = 'left';
      } else if (index == 1) {
        obj.position = 'right';
      } else {
        obj.position = 'right';
        obj.offset = (index - 1.1) * 55;
        // obj.show = false;
      }

      finyasx.push(obj);

      finxse.push({
        smooth: true, //变为曲线 默认false折线
        name: item.dataName,
        type: 'line',
        yAxisIndex: index + 1,
        data: item.datas,
        markLine: {
          symbol: 'none', //去掉警戒线最后面的箭头
          label: {
            position: 'middle', //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
          },
          data: marklinedata[index],
        },
      });
    });
  }

  myChart.value = echarts.init(document.getElementById(id));
  let option = {
    color: colorarr,
    legend: {
      show: true,
      orient: 'horizontal', //horizontal横向 vertical 纵向
      type: 'scroll',
      x: 'center', //居右显示
      align: 'left', //图例控制在左边
      icon: 'circle',
      itemWidth: 15,
      itemHeight: 15,
      itemHeight: 15,
      textStyle: {
        color: 'auto',
        rich: {
          another: {
            fontSize: 28,
          },
        },
        fontSize: 14,
      },
    },
    tooltip: {
      trigger: 'axis',
      // formatter: "{b}：{c}件",
      // formatter: "{b}：{c}",
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
      axisPointer: {
        type: 'cross',
        textStyle: {
          color: '#fff',
        },
      },
    },
    grid: {
      top: '18%',
      left: '5%',
      right: rightnumber,
      // right: '5%',
      bottom: '15%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: props.XAxis,
        axisPointer: {
          type: 'shadow',
        },
        axisLabel: {
          show: true,
          color: '#fff',
        },
        axisLine: {
          lineStyle: {
            // color: '#3398DB',
          },
        },
      },
    ],
    yAxis: finyasx,
    dataZoom: [
      {
        show: true,
        // show: false,
        height: 4,
        bottom: 18,
        start: 0,
        end: 100,
        handleSize: '100%',
        fillerColor: '#94FA41',
        borderColor: 'transparent',
        backgroundColor: 'rgba(148, 250, 65, 0.2)',
        handleStyle: {
          color: '#94FA41',
        },
        moveHandleSize: 0,
        textStyle: {
          color: '#fff',
        },
      },
      {
        type: 'inside',
        show: true,
        height: 15,
        start: 1,
        end: 35,
      },
    ],
    series: finxse,
  };

  option && myChart.value.setOption(option);
}

function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
onMounted(() => {
  nextTick(() => {
    init();
    window.addEventListener('resize', resizeTheChart);
  });
});
</script>