<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({
  data: {
    type: Object,
    default: () => [],
  },
  //刷新
  refresh: {
    type: Number,
  },

});

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

function init() {
  let position = ["insideStartTop", "insideMiddleTop", "insideEndBottom"];
  myChart.value = echarts.init(document.getElementById(id));

  let option = {
      tooltip: {
        trigger: "axis",
        backgroundColor: "#004284",
        borderColor: "#0B9BFF",
        borderRadius: 6, // 设置圆角大小
        // 自定义提示框文本样
        textStyle: {
          // 字体颜色
          color: "white",
          // 字体大小
          fontSize: 14,
        },
      },
      legend: {
        data: [
          '氨氮',
          '溶解氧',
          '浊度',
          '电导率',
          'PH值',
        ],
        textStyle: {
          color: "#FFFFFF",
          fontSize: 12,
        },
      },
      grid: {
        top:52,
        left: 20,
        right: 20,
        bottom: 10,
        containLabel: true,
      },

      xAxis: {
        type: "category",
        boundaryGap: true,
        data: props.data.XAxis,
        axisLabel: {
          color: "rgba(255,255,255,1)",
          fontSize: 12,
          fontFamily: "AlibabaPuHuiTi",
          formatter: function (value) {
            return moment(value).format("HH时");
          },
        },
      },
      dataZoom: [
        {
          // show: true,
          show: false,
          height: 4,
          bottom: 10,
          start: 0,
          end: 60,
          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: 0,
          end: 60,
        },
      ],
      yAxis: [
        {
          name: '氨氮',
          type: "value",
          // minInterval: 1,
          min: 0,
          axisLabel: {
            color: "#259543",
            show: true,
            // formatter: function (value) {
            //   return value.toFixed(2); // 保留两位小数
            // },
          },
          nameTextStyle: {
            color: "#259543",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
          position: "left",
          inverse: true,
          nameLocation: "start",
          offset: 28,
        },
        {
          name: '溶解氧',
          type: "value",
          // minInterval: 1,
          min: 0,
          axisLabel: {
            color: "#b14de5",
            show: true,
            // formatter: function (value) {
            //   return value.toFixed(2); // 保留两位小数
            // },
          },
          nameTextStyle: {
            color: "#b14de5",
            
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
          position: "left",
          offset: -5,
        },
        {
          name: '浊度',
          type: "value",
          // minInterval: 1,
          min: 0,
          axisLabel: {
            color: "#99FF55",
            show: true,
            // formatter: function (value) {
            //   return value.toFixed(2); // 保留两位小数
            // },
          },
          nameTextStyle: {
            color: "#99FF55",
            padding: [0, 0, 0, 20],
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
          position: "right",
          offset: -5,
        },

        {
          name: '电导率',
          type: "value",
          // minInterval: 1,
          min: 0,
          axisLabel: {
            color: "#FFC155",
            show: true,
            // formatter: function (value) {
            //   return value.toFixed(2); // 保留两位小数
            // },
          },
          nameTextStyle: {
            color: "#FFC155",
            padding: [0, 0, 0, 25],
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
          position: "right",
          offset: 28,
        },
         {
          name: 'PH值',
          type: "value",
          // minInterval: 1,
          min: 0,
          axisLabel: {
            color: "#009BE9",
            show: true,
            // formatter: function (value) {
            //   return value.toFixed(2); // 保留两位小数
            // },
          },
          nameTextStyle: {
            color: "#009BE9",
            padding: [0, 0, 0, 30],
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
          position: "right",
          offset: 62,
        },
      ],
      series: [
        {
          name: '氨氮',
          type: "line",
          data: props.data.nh4n,
          yAxisIndex: 1,
          symbolSize: 7,
          // 修改折线颜色
          lineStyle: {
            color: "#259543", // 折线颜色
            width: 2, // 折线宽度
          },
          // 修改数据点颜色
          itemStyle: {
            color: "#259543", // 数据点颜色
            width: 4,
          },
        },
        {
          name: '溶解氧',
          type: "line",
          data: props.data.dO,
          yAxisIndex: 1,
          symbolSize: 7,
          // 修改折线颜色
          lineStyle: {
            color: "#b14de5", // 折线颜色
            width: 2, // 折线宽度
          },
          // 修改数据点颜色
          itemStyle: {
            color: "#b14de5", // 数据点颜色
            width: 4,
          },
        },
        {
          name: '浊度',
          type: "line",
          data:  props.data.turb,
          yAxisIndex: 2,
          // 修改折线颜色
          lineStyle: {
            color: "#99FF55", // 折线颜色
            width: 2, // 折线宽度
          },
          // 修改数据点颜色
          itemStyle: {
            color: "#99FF55", // 数据点颜色
          },
        },
        {
          name: '电导率',
          type: "line",
          data: props.data.cond,
          yAxisIndex: 3,
          // 修改折线颜色
          lineStyle: {
            color: "#FFC155", // 折线颜色
            width: 2, // 折线宽度
          },
          // 修改数据点颜色
          itemStyle: {
            color: "#FFC155", // 数据点颜色
          },
        },
        {
          name: 'PH值',
          type: "line",
          data: props.data.ph,
          yAxisIndex: 4,
          // 修改折线颜色
          lineStyle: {
            color: "#009BE9", // 折线颜色
            width: 2, // 折线宽度
          },
          // 修改数据点颜色
          itemStyle: {
            color: "#009BE9", // 数据点颜色
          },
        },
      ],
    };

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

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