<template>
<!-- 历史水质 -->
  <div class="chartBox" :id="id"></div>
</template>
<script setup name="HistorySZChart">
import { guid } from "@/utils/ruoyi";
const { proxy } = getCurrentInstance();
import { nowSize } from "@/utils/util.js";
import moment from "moment";

const emit = defineEmits(["updateKey"]);
const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //数据
  echartData: {
    type: Object,
    default: {},
  },
});

const id = guid();
const myChart = shallowRef("");
watch(
  () => props.refresh,
  (value) => {
    //先销毁实例
    myChart.value && myChart.value.dispose();
    intChart();
  }
);
//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
//初始化
function intChart() {
  myChart.value = proxy.echarts.init(document.getElementById(id));
  myChart.value.clear();
  // 绘制图表
  myChart.value.setOption({
    textStyle: {
      fontFamily:'SourceHanSansCN-Bold',
    },
    tooltip: {
      trigger: "axis",
      // valueFormatter:(value) => Number(value).toFixed(2),
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
      var res = params[0].name + '<br/>水质等级：';
      var texts = '';
      if (params[0].value == 1) {
        texts = 'Ⅰ';
      } else if (params[0].value == 2) {
        texts = 'Ⅱ';
      } else if (params[0].value == 3) {
        texts = 'Ⅲ';
      } else if (params[0].value == 4) {
        texts = 'Ⅳ';
      } else if (params[0].value == 5) {
        texts = 'Ⅴ';
      }
      res = res + texts;
      return res;
    },

    },
    legend: {
      show: false,
      data: [
          '水质等级',
        ],
      itemWidth: nowSize(10, 1920),
      itemHeight: nowSize(10, 1920),
      itemGap: nowSize(44, 1920),
      top: nowSize(10, 1920),
      selectedMode: false,
      textStyle: {
        color: "rgba(255, 255, 255, 1)",
        fontSize: nowSize(12, 1920),
      },
    },
    grid: {
      top: nowSize(30, 1920),
      bottom: nowSize(50, 1920), //也可设置left和right设置距离来控制图表的大小
      left: nowSize(40, 1920),
      right: nowSize(10, 1920),
    },
    xAxis: {
      data: props.echartData.times,
      triggerEvent: true,
      axisLine: {
        show: false, //隐藏X轴轴线
        lineStyle: {
          color: "rgba(42, 97, 169, 1)",
        },
      },
      axisTick: {
        show: false, //隐藏X轴刻度
        lineStyle: {
          color: "rgba(42, 97, 169, 1)",
        },
      },
      axisLabel: {
        show: true,
        color: "#EBFEFF",
        fontSize: nowSize(14, 1920),
                  formatter: function (value) {
            return moment(value).format("MM月");
          },
      },
    },
    yAxis: {
      type: "value",
      name:'水质等级',
      axisLine: {
        show: false, //隐藏X轴轴线
        lineStyle: {
          color: "rgba(255,255,255)",
        },
      },
      max: 5,
      min: 1,
      axisLabel: {
        show: true,
        color: "#AAC1CF",
        fontSize: nowSize(12, 1920),
        formatter: function (value) {
        var texts = [];
        if (value === 1) {
          texts.push('Ⅰ');
        } else if (value === 2) {
          texts.push('Ⅱ');
        } else if (value === 3) {
          texts.push('Ⅲ');
        } else if (value === 4) {
          texts.push('Ⅳ');
        } else if (value === 5) {
          texts.push('Ⅴ');
        }
        return texts;
      }

      },
      splitLine: {
        //网格线
        lineStyle: {
          type: "dashed",
          color: "#2161a8", //设置网格线类型 dotted：虚线   solid:实线
        },
        show: true, //隐藏或显示
      },
    },
    series: [
      {
        type: "line",
        // triggerLineEvent:true,
        z:6,
        silent: true,
        name: '水质等级',
        data: props.echartData.datas,
        symbol: "circle",
        symbolSize: nowSize(8, 1920),
        showSymbol: true,
        lineStyle: {
          width: nowSize(2, 1920),
          color: "rgba(25, 214, 255, 1)",
        },
        // areaStyle: {
        //   color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //     {
        //       offset: 0,
        //       color: "rgba(25, 214, 255, 0.7)",
        //     },
        //     {
        //       offset: 0.7,
        //       color: "rgba(25, 214, 255, 0)",
        //     },
        //   ]),
        // },
        itemStyle: {
          color: "rgba(25, 214, 255, 1)", //拐点颜色
        },
              markLine:{
                    symbol:"none",               //去掉警戒线最后面的箭头
                    label:{
                        position:"middle",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                                formatter: function (res) {
                                    let value=res.value
                                    return value==1?'水质目标Ⅰ':value==2?'水质目标Ⅱ':value==3?'水质目标Ⅲ':value==4?'水质目标Ⅳ':value==5?'水质目标Ⅴ':'水质目标'

      }
                    },
                    data : [{
                        silent:true,             //鼠标悬停事件  true没有，false有
                        lineStyle:{               //警戒线的样式  ，虚实  颜色
                            type:"dashed",
                            color:"rgba(238, 99, 99)"
                        },
                        name: '目标水质',
                        yAxis: props.echartData.targetLevel
                    }]
                }
      },

    ],
  });
}
onMounted(() => {
  intChart();
  window.addEventListener("resize", resizeTheChart);
});
</script>

<style lang="scss" scoped>
.chartBox {
  width: 100%;
  height: 100%;
}
:deep(.ra1){
  display: inline-block;
  width:10px;
  height:10px;
  background: rgba(8, 177, 255, 1);
  border-radius: 50%;
  margin-right: 10px;
}
:deep(.ra2){
  display: inline-block;
  width:10px;
  height:10px;
  background: rgba(42, 255, 177, 1);
  border-radius: 50%;
  margin-right: 10px;
}
:deep(.ra3){
  display: inline-block;
  width:10px;
  height:10px;
  background: rgba(255, 255, 0, 1);
  border-radius: 50%;
  margin-right: 10px;
}
</style>