<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance();
const id = guid();
const myChart = shallowRef('');

const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //标题
  title: {
    type: String,
    default: '',
  },
  //数据
  echartData: {
    type: Object,
    default: {},
  },
  //判断Y轴是否多条
  yAxis: {
    type: Number,
    default: 0,
  },
});
watch(
  () => props.refresh,
  value => {
    //先销毁实例
    myChart.value && myChart.value.dispose();
    intChart();
  }
);

//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
function intChart() {
  const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
  myChart.value = proxy.echarts.init(document.getElementById(id));
  //判断是否多Y轴
  let seriesData = [];
  let yAxisData = [];
  let data = props.echartData.seriesData;
  seriesData =
    data &&
    data.map((item, index) => {
      return {
        name: `${item.monitorPropertyName}${item.propertyUnit}`,
        type: 'line',
        data: item.ylist,
        symbolSize: 1,
        symbol: 'none',
        smooth: true,
        yAxisIndex: index,
        showSymbol: false,
        itemStyle: {
          //关键代码
          normal: {
            lineStyle: {
              normal: {
                width: 0.8,
                color: colorList[index], // 线条颜色
              },
            },
          },
        },
      };
    });

  if (data.length == 1) {
    yAxisData = [
      {
        name: `${data[0].monitorPropertyName}${data[0].propertyUnit}`,
        nameTextStyle: {
          color: '#545E75', //字体颜色
          align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
          fontSize: 14,
          fontWeight: 400,
        },
        type: 'value',
        min: (Math.min(...data[0].ylist) * 0.8).toFixed(0),
        max: (Math.max(...data[0].ylist) * 1.1).toFixed(0),
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#556677',
          },
        },
        axisLabel: {
          textStyle: {
            color: '#556677',
          },
        },
        splitLine: {
          show: false,
        },
      },
    ];
  } else {
    yAxisData =
      data &&
      data.map((item, index) => {
        console.log((Math.min(...item.ylist) * 0.8).toFixed(0));
        return {
          //name: `${item.monitorPropertyName}${item.propertyUnit}`,
          name: `${item.monitorPropertyName}`,
          nameTextStyle: {
            color: colorList[index], //字体颜色
            align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
            fontSize: 14,
            fontWeight: 400,
          },
          type: 'value',
          position: index % 2 > 0 ? 'left' : 'right',
          offset: 40 * index,
          min: (Math.min(...item.ylist) * 0.8).toFixed(0),
          max: (Math.max(...item.ylist) * 1.1).toFixed(0),
          axisTick: {
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: colorList[index],
            },
          },
          axisLabel: {
            textStyle: {
              color: colorList[index],
            },
          },
          splitLine: {
            show: false,
          },
        };
      });
  }

  // 绘制图表
  myChart.value.setOption({
    backgroundColor: '#fff',
    title: {
      text: '',
      textStyle: {
        fontSize: 12,
        fontWeight: 400,
      },
      left: 'left',
      top: '5%',
    },
    legend: {
      icon: 'circle',
      top: '1%',
      left: 'center',
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: '#556677',
      },
    },
    dataZoom: [
      {
        show: true,
        realtime: true,
        start: 30,
        end: 70,
        xAxisIndex: [0, 1],
      },
      {
        type: 'inside',
        realtime: true,
        start: 30,
        end: 70,
        xAxisIndex: [0, 1],
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        label: {
          show: true,
          backgroundColor: '#fff',
          color: '#556677',
          borderColor: 'rgba(0,0,0,0)',
          shadowColor: 'rgba(0,0,0,0)',
          shadowOffsetY: 0,
        },
        lineStyle: {
          width: 0,
        },
      },
      backgroundColor: '#fff',
      textStyle: {
        color: '#5c6c7c',
      },
      padding: [10, 10],
      extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
    },
    grid: {
      top: '15%',
      left: '10%',
      right: '10%',
    },
    xAxis: [
      {
        type: 'category',
        data: props.echartData.xAxisData,
        axisLine: {
          lineStyle: {
            color: '#DCE2E8',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#556677',
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15,
        },
        axisPointer: {
          label: {
            // padding: [11, 5, 7],
            padding: [0, 0, 10, 0],
            // 这里的margin和axisLabel的margin要一致!
            margin: 15,
            // 移入时的字体大小
            fontSize: 12,
            backgroundColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#fff', // 0% 处的颜色
                },
                {
                  // offset: 0.9,
                  offset: 0.86,

                  color: '#fff', // 0% 处的颜色
                },
                {
                  offset: 0.86,
                  color: '#33c0cd', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#33c0cd', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        boundaryGap: false,
      },
    ],
    yAxis: yAxisData,
    series: seriesData,
  });
}
onMounted(() => {
  intChart();
  window.addEventListener('resize', resizeTheChart);
});
</script>