<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,
  },
});

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 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(10, 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(-200, 1920), 0, 0,nowSize(90, 1920)],
        },

        type: 'value',
        axisLabel: {
          show: true,
          color: '#AAC1CF',
        },
        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)],
        },
        axisLabel: {
          show: true,
          color: '#AAC1CF',
        },
        
        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>