<template>
  <div class="chartBox" :id="Eid"></div>
</template>
<script setup name="pieChartGszl">
import { guid } from "@/utils/ruoyi";
const { proxy } = getCurrentInstance();
import { nowSize } from "@/utils/util.js";
import { nextTick, reactive } from "vue";
const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //数据
  echartData: {
    type: Object,
    default: {},
  },
});

const AllData = reactive({
  Options: {},
});
const Eid = guid();
const myChart = shallowRef("");

watch(
  () => props.refresh,
  (value) => {
    //先销毁实例
    if (props.echartData.activeIndex > 0) {
      // myChart.value.resize();
      reasizeFun();
    } else {
      myChart.value && myChart.value.dispose();
      intChart();
    }
  }
);
watch(
  () => props.echartData,
  (value) => {
    nextTick(() => {
      intChart();
    });
  }
);
//自适应
function resizeTheChart() {
  nextTick(() => {
    if (myChart.value) {
      myChart.value.resize();
    }
  });
}
// 重绘之前的样式填充
function reasizeFun() {
  // debugger;
  if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == "中雨") {
    // AllData.Options.visualMap.pieces[
    //   (Number(props.echartData.activeIndex) - 1) * 2
    // ].color = "rgba(222, 230, 0, 1)";
    // AllData.Options.visualMap.pieces[
    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
    // ].color = "rgba(222, 230, 0, 1)";
    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color =
      "rgba(222, 230, 0, 1)";
  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == "小雨") {
    // AllData.Options.visualMap.pieces[
    //   (Number(props.echartData.activeIndex) - 1) * 2
    // ].color = "rgba(0, 191, 253, 1)";
    // AllData.Options.visualMap.pieces[
    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
    // ].color = "rgba(0, 191, 253, 1)";
    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color =
      "rgba(0, 191, 253, 1)";
  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == "大雨") {
    // AllData.Options.visualMap.pieces[
    //   (Number(props.echartData.activeIndex) - 1) * 2
    // ].color = "rgba(255, 184, 15, 1)";
    // AllData.Options.visualMap.pieces[
    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
    // ].color = "rgba(255, 184, 15, 1)";
    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color =
      "rgba(255, 184, 15, 1)";
  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == "暴雨") {
    // AllData.Options.visualMap.pieces[
    //   (Number(props.echartData.activeIndex) - 1) * 2
    // ].color = "rgba(255, 26, 26, 1)";
    // AllData.Options.visualMap.pieces[
    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
    // ].color = "rgba(255, 26, 26, 1)";
    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color =
      "rgba(255, 26, 26, 1)";
  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == "大暴雨") {
    // AllData.Options.visualMap.pieces[
    //   (Number(props.echartData.activeIndex) - 1) * 2
    // ].color = "rgba(255, 26, 26, 1)";
    // AllData.Options.visualMap.pieces[
    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
    // ].color = "rgba(255, 26, 26, 1)";
    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color =
      "rgba(255, 26, 26, 1)";
  } else if (props.echartData.rainTrend[props.echartData.activeIndex - 1] == "特大暴雨") {
    // AllData.Options.visualMap.pieces[
    //   (Number(props.echartData.activeIndex) - 1) * 2
    // ].color = "rgba(255, 26, 26, 1)";
    // AllData.Options.visualMap.pieces[
    //   (Number(props.echartData.activeIndex) - 1 + 1) * 2
    // ].color = "rgba(255, 26, 26, 1)";
    AllData.Options.visualMap.pieces[Number(props.echartData.activeIndex) - 1].color =
      "rgba(255, 26, 26, 1)";
  } else {
    // AllData.Options.visualMap.pieces.push({
    //   gt: props.echartData.activeIndex,
    //   lte: props.echartData.activeIndex,
    //   color: "rgba(121, 159, 200, 1)",
    // });
  }
  console.log(AllData.Options.visualMap);
  myChart.value.setOption(AllData.Options, true);
  // myChart.value.resize();
  // intChart();
  // myChart.value = proxy.echarts.init(document.getElementById(id));
  // myChart.value.clear();

  // myChart.value.setOption(AllData.Options);
}

//初始化
function intChart() {
  if (document.getElementById(Eid) == null) {
    return;
  }
  proxy.echarts.dispose(document.getElementById(Eid));
  myChart.value = proxy.echarts.init(document.getElementById(Eid));
  myChart.value.clear();
  // 处理数据
  let XData = [];
  props.echartData.rainTrend.forEach((element, index) => {
    if (index == 0) {
      XData.push("");
      XData.push(element);
      XData.push("");
    } else {
      XData.push(element);
      XData.push("");
    }
  });
  console.log(`1231`, XData);
  let Servers = [];
  props.echartData.history.forEach((element, index) => {
    if (index == 0) {
      Servers.push(Number(element));
      Servers.push(Number(element));
    } else {
      Servers.push((Number(element) + Number(props.echartData.history[index - 1])) / 2);
      Servers.push(Number(element));
    }
  });
  console.log(`1232`, Servers);
  // 绘制图表
  // 设置图形配置项
  AllData.Options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        console.log(params);
        let str = "";
        if (params[0].name == "") {
          str = "";
        } else {
          str =
            "<div style='padding:0 5px;width:100%;height:32px;line-height:16px;border-radius:3px;'>" +
            params[0].name +
            "<br />" +
            params[0].data +
            "(mm)</div>";
        }
        return str;
      },
    },
    grid: {
      top: nowSize(20, 1920),
      bottom: nowSize(6, 1920), //也可设置left和right设置距离来控制图表的大小
      left: nowSize(50, 1920),
      right: nowSize(20, 1920),
    },
    xAxis: {
      // data: props.echartData.rainTrend,
      data: XData,
      axisLine: {
        show: false, //隐藏X轴轴线
        lineStyle: {
          color: "rgba(44, 110, 189, 1)",
        },
      },
      axisTick: {
        show: false, //隐藏X轴刻度
        lineStyle: {
          color: "rgba(44, 110, 189, 1)",
        },
      },
      axisLabel: {
        show: false,
      },
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false, //隐藏X轴刻度
        lineStyle: {
          color: "rgba(44, 110, 189, 1)",
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: "#FFFFFF",
        fontSize: nowSize(12, 1920),
      },
      splitLine: {
        //网格线
        lineStyle: {
          type: "dashed",
          color: "rgba(255, 255, 255, 0.2)", //设置网格线类型 dotted：虚线   solid:实线
        },
        show: true, //隐藏或显示
      },
    },
    visualMap: {
      type: "piecewise",
      show: false,
      dimension: 0,
      seriesIndex: 0,
      pieces: [],
      zlevel: 4,
    },

    series: [
      {
        type: "line",
        // data: props.echartData.history,
        data: Servers,
        barWidth: nowSize(10, 1920),
        areaStyle: {},
        // itemStyle: {},
        zlevel: 1,
        symbol: "circle",
        symbolSize: nowSize(6, 1920),
        // lineStyle: {
        //   shadowColor: "rgba(0, 0, 0, .5)",
        //   shadowBlur: nowSize(5, 1920),
        //   shadowOffsetY: nowSize(5, 1920),
        //   shadowOffsetX: nowSize(5, 1920),
        //   // color: (parms) => {
        //   //   debugger;
        //   //   let yanse = "";
        //   //   let colorType = props.echartData.rainTrend[value.dataIndex];
        //   //   if (value.dataIndex <= props.echartData.activeIndex && colorType == "小雨") {
        //   //     yanse = "rgba(0, 191, 253, 1)";
        //   //   } else if (
        //   //     value.dataIndex <= props.echartData.activeIndex &&
        //   //     colorType == "中雨"
        //   //   ) {
        //   //     yanse = "rgba(222, 230, 0, 1)";
        //   //   } else if (
        //   //     value.dataIndex <= props.echartData.activeIndex &&
        //   //     colorType == "大雨"
        //   //   ) {
        //   //     yanse = "rgba(255, 184, 15, 1)";
        //   //   } else if (
        //   //     (value.dataIndex <= props.echartData.activeIndex && colorType == "暴雨") ||
        //   //     colorType == "大暴雨" ||
        //   //     colorType == "特大暴雨"
        //   //   ) {
        //   //     yanse = "rgba(255, 26, 26, 1)";
        //   //   } else {
        //   //     yanse = "rgba(121, 159, 200, 1)";
        //   //   }
        //   //   console.log("lineStyle", yanse);
        //   //   return yanse;
        //   // },
        //   color: "rgba(255, 26, 26, 1)",
        // },
        itemStyle: {
          borderColor: "rgba(57, 247, 255, 0.3)",
          borderWidth: nowSize(6, 1920),
          borderRadius: nowSize(6, 1920),
          // color: "rgba(255, 255, 255, 1)",
          color: (value) => {
            // let yanse=''
            // let colorType=props.echartData.rainTrend[value.dataIndex]
            // if(value.dataIndex<=props.echartData.activeIndex&&colorType=='小雨'){
            //   yanse="rgba(0, 191, 253, 1)"
            // }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='中雨'){
            //   yanse= "rgba(222, 230, 0, 1)"
            // }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='大雨'){
            //   yanse= "rgba(255, 184, 15, 1)"
            // }else if(value.dataIndex<=props.echartData.activeIndex&&colorType=='暴雨'||colorType=='大暴雨'||colorType=='特大暴雨'){
            //   yanse= "rgba(255, 26, 26, 1)"
            // }else{
            //   yanse= "rgba(121, 159, 200, 1)"
            // }
            // console.log('lineStyle',yanse)
            // return yanse
            let colorType = props.echartData.rainTrend[value.dataIndex];
            let color1 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(0, 191, 253, 1)",
              },
              {
                offset: 1,
                color: "rgba(0, 191, 253, 0.2)",
              },
            ]);
            let color2 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(222, 230, 0, 1)",
              },
              {
                offset: 1,
                color: "rgba(222, 230, 0, 0.2)",
              },
            ]);
            let color3 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(255, 184, 15, 1)",
              },
              {
                offset: 1,
                color: "rgba(255, 184, 15, 0.2)",
              },
            ]);
            let color4 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(255, 26, 26, 1)",
              },
              {
                offset: 1,
                color: "rgba(255, 26, 26, 0.2)",
              },
            ]);
            let color5 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(121, 159, 200, 1)",
              },
              {
                offset: 1,
                color: "rgba(121, 159, 200, 0.2)",
              },
            ]);
            let yanse = "";
            if (value.dataIndex < props.echartData.activeIndex && colorType == "小雨") {
              yanse = color1;
            } else if (
              value.dataIndex < props.echartData.activeIndex &&
              colorType == "中雨"
            ) {
              yanse = color2;
            } else if (
              value.dataIndex < props.echartData.activeIndex &&
              colorType == "大雨"
            ) {
              yanse = color3;
            } else if (
              value.dataIndex < props.echartData.activeIndex &&
              (colorType == "暴雨" || colorType == "大暴雨" || colorType == "特大暴雨")
            ) {
              yanse = color4;
            } else {
              yanse = color5;
            }
            // console.log(yanse)
            return yanse;
          },
        },
        // areaStyle: {
        //   // color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //   //   {
        //   //     offset: 0,
        //   //     color: "rgba(0, 191, 253, 1)",
        //   //   },
        //   //   {
        //   //     offset: 1,
        //   //     color: "rgba(0, 191, 253, 0.2)",
        //   //   },
        //   // ]),
        //   color: (value) => {
        //     debugger;
        //     let colorType = props.echartData.rainTrend[value.dataIndex];
        //     let color1 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //       {
        //         offset: 0,
        //         color: "rgba(0, 191, 253, 1)",
        //       },
        //       {
        //         offset: 1,
        //         color: "rgba(0, 191, 253, 0.2)",
        //       },
        //     ]);
        //     let color2 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //       {
        //         offset: 0,
        //         color: "rgba(222, 230, 0, 1)",
        //       },
        //       {
        //         offset: 1,
        //         color: "rgba(222, 230, 0, 0.2)",
        //       },
        //     ]);
        //     let color3 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //       {
        //         offset: 0,
        //         color: "rgba(255, 184, 15, 1)",
        //       },
        //       {
        //         offset: 1,
        //         color: "rgba(255, 184, 15, 0.2)",
        //       },
        //     ]);
        //     let color4 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //       {
        //         offset: 0,
        //         color: "rgba(255, 26, 26, 1)",
        //       },
        //       {
        //         offset: 1,
        //         color: "rgba(255, 26, 26, 0.2)",
        //       },
        //     ]);
        //     let color5 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //       {
        //         offset: 0,
        //         color: "rgba(121, 159, 200, 1)",
        //       },
        //       {
        //         offset: 1,
        //         color: "rgba(121, 159, 200, 0.2)",
        //       },
        //     ]);
        //     let yanse = "";
        //     if (value.dataIndex <= props.echartData.activeIndex && colorType == "小雨") {
        //       yanse = color1;
        //     } else if (
        //       value.dataIndex <= props.echartData.activeIndex &&
        //       colorType == "中雨"
        //     ) {
        //       yanse = color2;
        //     } else if (
        //       value.dataIndex <= props.echartData.activeIndex &&
        //       colorType == "大雨"
        //     ) {
        //       yanse = color3;
        //     } else if (
        //       (value.dataIndex <= props.echartData.activeIndex && colorType == "暴雨") ||
        //       colorType == "大暴雨" ||
        //       colorType == "特大暴雨"
        //     ) {
        //       yanse = color4;
        //     } else {
        //       yanse = color5;
        //     }
        //     console.log(yanse);
        //     return yanse;
        //   },
        // },
      },
    ],
  };
  for (let index = 0; index < XData.length; index++) {
    AllData.Options.visualMap.pieces.push({
      gte: index * 2,
      lte: (index + 1) * 2,
      color: "rgba(121, 159, 200, 1)",
    });
  }
  myChart.value.setOption(AllData.Options, true);
}
onMounted(() => {
  // intChart();
  window.addEventListener("resize", resizeTheChart);
});
onBeforeUnmount(() => {
  myChart.value && myChart.value.dispose();
});
</script>

<style lang="scss" scoped>
.chartBox {
  width: 100%;
  height: 100%;
}
</style>