<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 = [
    "#99FF55",
    "#b14de5",
    "#FFC155",
    "#409eff",
    "#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 + item.unit,
        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) * 70;
        // obj.show = false;
      }

      finyasx.push(obj);

      finxse.push({
        smooth: true, //变为曲线 默认false折线
        name: item.dataName + item.unit,
        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>