<template>
  <!-- 监测分析 -->
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid } from "@/utils/ruoyi";
import { nextTick } from "vue";
import moment from "moment";

const id = guid();
const myChart = shallowRef("");
import * as echarts from "echarts";
import { nowSize } from "@/utils/util.js";

const { proxy } = getCurrentInstance();

const props = defineProps({
  //x轴数据
  XAxis: {
    type: Array,
    default: () => [],
  },
  //y轴数据
  YAxis: {
    type: Array,
    default: () => [],
  },
  YAxis2: {
    type: Array,
    default: () => [],
  },
  marklineJYL: {
    type: Array,
    default: () => [],
  },
  marklineSS: {
    type: Array,
    default: () => [],
  },

  //类型
  typeName: {
    type: String,
    default: "",
  },
  typeName2: {
    type: String,
    default: "",
  },
  //刷新
  refresh: {
    type: Number,
  },
  XnameTop: {
    type: String,
    default: () => "-190",
  },
});

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

function init() {
  console.log("XnameTop", props.XnameTop);
  let position = ["insideStartTop", "insideMiddleTop", "insideEndBottom"];
  myChart.value = echarts.init(document.getElementById(id));
  let colorarr = ["#409eff", "#0ba47b", "#a34a5e", "#dac16f"];
  let newarr = [];
  let marklinedata = [];
  // 处理警戒线数据展示
  if (props.marklineJYL) {
    props.marklineJYL.map((item) => {
      newarr.push(Number(item.lineValue));

      marklinedata.push({
        silent: false, //鼠标悬停事件  true没有，false有
        lineStyle: {
          //警戒线的样式  ，虚实  颜色
          type: "dashed",
          color: item.lineColor,
        },
        name: item.lineName,
        yAxis: Number(item.lineValue),
        label: {
          formatter: `${item.lineValue}-${item.lineName}`,
          color: item.lineColor,
        },
      });
    });
  }
  let newarr2 = [];
  let marklinedata2 = [];
  // 处理警戒线数据展示
  // console.log('props.marklineSS',props.marklineSS);
  if (props.marklineSS) {
    props.marklineSS.map((item, index) => {
      newarr2.push(Number(item.lineValue));

      marklinedata2.push({
        silent: false, //鼠标悬停事件  true没有，false有
        lineStyle: {
          //警戒线的样式  ，虚实  颜色
          type: "dashed",
          color: item.lineColor,
        },

        name: item.lineName,
        yAxis: Number(item.lineValue),
        label: {
          formatter: `${item.lineValue}-${item.lineName}`,
          color: item.lineColor,
          position: position[index],
        },
      });
    });
  }
  var MaXmm = Math.max.apply(null, [...props.YAxis, ...newarr]);
  var MaXmm2 = Math.max.apply(null, [...props.YAxis2, ...newarr2]);
  // console.log('marklinedata2',marklinedata2);
  let option = {
    color: ["#0060FF", "#0ba47b"],
    legend: {
      show: true,
      // orient: 'vertical',
      // y: 'top',    //延Y轴居中

      x: "center", //居右显示
      align: "left", //图例控制在左边
      icon: "rect",

      // padding: [
      //   0, // 上
      //   200, // 右
      //   0, // 下
      //   20, // 左
      // ],

      itemWidth: nowSize(15, 1920),
      itemHeight: nowSize(15, 1920),
      // itemGap: nowSize(44, 1920),
      // top: nowSize(10, 1920),

      itemStyle: {
        // opacity: 0
        // icon: ''
      },

      textStyle: {
        color: "auto",
        rich: {
          another: {
            fontSize: nowSize(28, 1920),
          },
        },
        fontSize: nowSize(14, 1920),
      },
    },

    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: '4%',
      // right: '3%',
      // bottom: '15%',
      top: nowSize(50, 1920),
      bottom: nowSize(40, 1920), //也可设置left和right设置距离来控制图表的大小
      left: nowSize(40, 1920),
      right: nowSize(20, 1920),
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: props.XAxis,
        axisPointer: {
          type: "shadow",
        },
        axisLabel: {
          show: true,
          color: "#fff",

          formatter: function (value) {
            return moment(value).format("MM-DD HH:mm");
          },
        },

        axisLine: {
          // 坐标轴轴线
          show: true,
          lineStyle: {
            color: "#2A61A9",
          },
        },
        axisTick: {
          // 坐标轴刻度
          show: false,
        },
        splitLine: {
          // 坐标轴在 grid 区域中的分隔线。
          show: false,
        },
        // axisLabel: { // 坐标轴刻度标签
        //   show: false
        // },
      },
    ],
    yAxis: [
      {
        inverse: true, //控制x轴在上方
        min: 0,
        max: parseInt(MaXmm * 1.2),
        name: props.typeName,
        nameTextStyle: {
          fontSize: nowSize(12, 1920),
          padding: [nowSize(props.XnameTop, 1920), 0, 0, nowSize(90, 1920)],
        },

        type: "value",
        min: 0,
        axisLabel: {
          show: true,
          color: "#AAC1CF",
          formatter: function (value) {
            return value.toFixed(2); // 保留两位小数
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#2A61A9",
          },
        },
        splitLine: {
          show: true,
          lineStyle: { type: "dashed", color: "rgba(42, 97, 169, .5)" },
        },
      },
      {
        name: props.typeName2,
        type: "value",
        min: 0,
        max: parseInt(MaXmm2 * 1.2),
        nameTextStyle: {
          fontSize: nowSize(12, 1920),
          padding: [0, 0, 0, nowSize(-40, 1920)],
        },
        min: 0,
        axisLabel: {
          show: true,
          color: "#AAC1CF",
          formatter: function (value) {
            return value.toFixed(2); // 保留两位小数
          },
        },

        axisLine: {
          lineStyle: {
            color: "#B5FF55",
          },
        },
        splitLine: {
          show: false,

          lineStyle: {
            color: "rgba(61,91,98,0.8)",
          },
        },
      },
    ],
    dataZoom: [
      {
        // show: true,
        show: false,
        height: 4,
        bottom: 18,
        start: 10,
        end: 80,
        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: [
      {
        // smooth: true,//变为曲线 默认false折线
        name: props.typeName,
        type: "bar",
        barWidth: 12,
        itemStyle: {
          borderRadius: [0, 0, 6, 6],
          color: function () {
            return new proxy.echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0.1,
                  color: "rgba(8, 177, 255, 1)", // 0% 处的颜色
                },

                {
                  offset: 0.9,
                  color: "rgba(25, 214, 255, 1)", // 100% 处的颜色
                },
              ],
              false
            );
          },
        },
        // showBackground: true,
        backgroundStyle: {
          color: "transparent",
          borderWidth: 1,
          borderColor: "rgba(148, 250, 65, 0.2)",
        },
        data: props.YAxis,
        markLine: {
          symbol: "none", //去掉警戒线最后面的箭头
          label: {
            position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
          },
          data: marklinedata,
        },
      },
      // {
      //   smooth: true,//变为曲线 默认false折线
      //   name: '径流量',
      //   type: "line",
      //   yAxisIndex: 1,
      //   data: this.YAxis2,
      // },
      {
        smooth: true, //变为曲线 默认false折线
        name: props.typeName2,
        type: "line",
        yAxisIndex: 1,
        data: props.YAxis2,
        itemStyle: {
          normal: {
            color: "rgba(181, 255, 85, 1)", // 点的颜色
            lineStyle: {
              color: "rgba(181, 255, 85, 1)", // 线的颜色
            },
          },
        },
        // areaStyle: {
        //   normal: {
        //     color: {
        //       x: 0,
        //       y: 0,
        //       x2: 0,
        //       y2: 1,
        //       colorStops: [
        //         {
        //           offset: 0,
        //           color: '#0ba57c',
        //         },
        //         {
        //           offset: 1,
        //           color: '#044d50',
        //         },
        //       ],
        //       globalCoord: false, // 缺省为 false
        //     },
        //   },
        // },
        markLine: {
          symbol: "none", //去掉警戒线最后面的箭头

          label: {
            position: "insideStartTop", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
          },
          data: marklinedata2,
        },
      },
    ],
  };

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

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