<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 maxnh4n=Number((Math.max(...[Number(props.data.marklineObj.nh4n),...props.data.nh4n]) * 1.2))
  console.log('123',maxnh4n);
//   console.log('2222332',(Math.max(...[Number(props.data.marklineObj.nh4n),...props.data.nh4n]) * 1.1).toFixed(2));
  let option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#004284',
      borderColor: '#0B9BFF',
      borderRadius: 6, // 设置圆角大小
      // 自定义提示框文本样
       formatter: function (params) {
            let res = params[0].name + '<br/>';
            params.forEach(function (item) {
                // 对每个数据项的数值进行格式化，保留两位小数
                 let text=   `<div class="flex flex-justcontent-spacebetween">
                <span>${item.marker}${item.seriesName}</span>
                <span>${(item.value == null ? '-' : Number(item.value).toFixed(2))}</span>
              </div>`
                res +=text ;
            });
            return res;
        },
      textStyle: {
        // 字体颜色
        color: 'white',
        // 字体大小
        fontSize: nowSize(14, 1920),

      },
    },
    legend: {
      data: ['氨氮(mg/L)', '溶解氧(mg/L)', 'COD(mg/L)', '电导率(μS/cm)', 'PH值'],
      orient: "horizontal", //horizontal横向 vertical 纵向
      type: "scroll",
      x: "center", //居右显示
      align: "left", //图例控制在左边
      textStyle: {
        color: '#FFFFFF',
        fontSize: nowSize(12, 1920),
      },
    },
    grid: {
      top: 52,
      left: 20,
      right: 25,
      bottom: 10,
      containLabel: true,
    },

    xAxis: {
      type: 'category',
      boundaryGap: true,
    //   show: false,
      data: props.data.XAxis,
      axisLabel: {
        color: 'rgba(255,255,255,1)',
        fontSize: nowSize(12, 1920),
        fontFamily: 'AlibabaPuHuiTi',
        formatter: function (value) {
          return moment(value).format('HH:MM');
        },
      },
    },
    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,
        max:Number((Math.max(...[Number(props.data.marklineObj.nh4n),...props.data.nh4n]) * 1.3)).toFixed(2),

        axisLabel: {
          color: '#259543',
          show: true,
          formatter: function (value) {
            return value.toFixed(1); // 保留两位小数
          },
        },
        
        nameTextStyle: {
          color: '#259543',
          padding: [0, 0, 0, -5],
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#2161a8',
          },
        },
        
        alignTicks: true,
        position: 'left',
        inverse: true,
        nameLocation: 'start',
        offset: 28,
      },
      {
        name: '溶解氧',
        type: 'value',
        // minInterval: 1,
        min: 0,
        max:(Math.max(...[Number(props.data.marklineObj.DO),...props.data.DO]) * 1.3).toFixed(2),

        axisLabel: {
          color: '#b14de5',
          show: true,
          formatter: function (value) {
            return value.toFixed(0); // 保留两位小数
          },
        },
        nameTextStyle: {
          color: '#b14de5',
          padding: [0, 0, 0, -5],
        },
        splitLine: {
            show: false,
          lineStyle: {
            type: 'dashed',
            color: '#2161a8',
          },
        },
        // alignTicks: true,
        position: 'left',
        offset: -5,
      },
      {
        name: 'COD',
        type: 'value',
        // minInterval: 1,
        min: 0,
        max:(Math.max(...[Number(props.data.marklineObj.codcr),...props.data.codcr]) * 1.3).toFixed(2),
        axisLabel: {
          color: '#99FF55',
          show: true,
          // formatter: function (value) {
          //   return value.toFixed(2); // 保留两位小数
          // },
        },
        nameTextStyle: {
          color: '#99FF55',
          padding: [0, 0, 0, 10],
        },
        splitLine: {
            show: false,
          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, 15],
        },
        splitLine: {
            show: false,
          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, 15],
        },
        splitLine: {
            show: false,
          lineStyle: {
            type: 'dashed',
            color: '#2161a8',
          },
        },
        // alignTicks: true,
        position: 'right',
        offset: 62,
      },
    ],
    series: [
      {
        name: '氨氮(mg/L)',
        type: 'line',
        data: props.data.nh4n,
        yAxisIndex: 0,
        symbolSize: 7,
        // 修改折线颜色
        lineStyle: {
          color: '#259543', // 折线颜色
          width: 2, // 折线宽度
        },
        // 修改数据点颜色
        itemStyle: {
          color: '#259543', // 数据点颜色
          width: 4,
        },
        markLine: {
          data: [
            {
              yAxis: props.data.marklineObj.nh4n, // 这是水平线的 Y 轴值
              lineStyle: {
                type: 'dashed',
                color: '#259543', // 线的颜色
              },
              label: {
                show: true,
                formatter: '氨氮警戒线:' + props.data.marklineObj.nh4n,
                color: '#259543',
                fontSize: nowSize(12, 1920),
                position: 'middle',
              },
            },
          ],
          symbol: ['none', 'none'], // 这里设置标记线两端的标记为'none'，即不显示箭头
        },
      },
      {
        name: '溶解氧(mg/L)',
        type: 'line',
        data: props.data.DO,
        yAxisIndex: 1,
        symbolSize: 7,
        // 修改折线颜色
        lineStyle: {
          color: '#b14de5', // 折线颜色
          width: 2, // 折线宽度
        },
        // 修改数据点颜色
        itemStyle: {
          color: '#b14de5', // 数据点颜色
          width: 4,
        },
        markLine: {
          data: [
            {
              yAxis: props.data.marklineObj.DO, // 这是水平线的 Y 轴值
              lineStyle: {
                type: 'dashed',
                color: '#b14de5', // 线的颜色
              },
              label: {
                show: true,
                formatter: '溶解氧警戒线:' + props.data.marklineObj.DO,
                color: '#b14de5',
                fontSize: nowSize(12, 1920),
                position: 'middle',
              },
            },
          ],
          symbol: ['none', 'none'], // 这里设置标记线两端的标记为'none'，即不显示箭头
        },
      },
      {
        name: 'COD(mg/L)',
        type: 'line',
        data: props.data.codcr,
        yAxisIndex: 2,
        // 修改折线颜色
        lineStyle: {
          color: '#99FF55', // 折线颜色
          width: 2, // 折线宽度
        },
        // 修改数据点颜色
        itemStyle: {
          color: '#99FF55', // 数据点颜色
        },
         markLine: {
          data: [
            {
              yAxis: props.data.marklineObj.codcr, // 这是水平线的 Y 轴值
              lineStyle: {
                type: 'dashed',
                color: '#99FF55', // 线的颜色
              },
              label: {
                show: true,
                formatter: 'COD警戒线:' + props.data.marklineObj.codcr,
                color: '#99FF55',
                fontSize: nowSize(12, 1920),
                position: 'middle',
              },
            },
          ],
          symbol: ['none', 'none'], // 这里设置标记线两端的标记为'none'，即不显示箭头
        },
      },
      {
        name: '电导率(μS/cm)',
        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>