<!-- 谐波放大表格详情 -->
<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    title="趋势图"
    draggable
    width="70%"
    @close="handleCloseDialog"
  >
    <el-radio-group v-model="condition" size="small" @change="init">
      <el-radio-button label="谐波电压" value="42" />
      <el-radio-button label="谐波电流" value="43" />
    </el-radio-group>
    <MyEChart
      v-loading="loading"
      element-loading-background="rgba(122, 122, 122, 0.8)"
      :options="list[0]?.option"
      :style="`height:670px`"
    />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import MyEChart from "@/components/echarts/MyEchart.vue";
import { getHistoryResult } from "@/api/manage_wx/index";
import { yMethod } from "@/utils/echartMethod";

const emit = defineEmits(["close"]);
const visible = ref(false);
const loading = ref(false);
const options = ref<any>(null);
const list = ref<any>([]);
const traceability = ref<any>([]);
const rowData: any = ref({});
const condition: any = ref("42");

const open = async (row: any) => {
  rowData.value = row;
  condition.value = "42";
  visible.value = true;
  init();
};
const init = async () => {
  list.value = [];

  loading.value = true;
  await getHistoryResult({
    lineId: [rowData.value.monitorId],
    searchBeginTime: rowData.value.startTime,
    searchEndTime: rowData.value.endTime,
    valueType: 4,
    harmonic: rowData.value.harmonicCount,
    ptType: 0,
    condition: [condition.value],
  }).then((res) => {
    shujuchuli(res);
  });
};
const shujuchuli = (res: any) => {
  list.value = [];
  let shujuData = res.data;
  shujuData.forEach((item: any, i: number) => {
    //判断是否存在暂降点

    if (item.eventDetail == null) {
      let [min, max] = yMethod([
        item.minValue,
        item.maxValue,
        condition.value == "42"
          ? rowData.value.vavgValue
          : rowData.value.vavgValue.iavgValue,
      ]);
      //判断是否有限值(有上下限)
      if (item.topLimit !== 0 && item.lowerLimit !== 0) {
        item.phaiscType.push("上限");
        item.phaiscType.push("下限");
        if (item.minValue !== null && item.maxValue !== null) {
          //最小值等于下限值
          //图列为A,B,C,上限,下限
          if (item.phaiscType.length == 5) {
            let avalue = [];
            let bvalue = [];
            let cvalue = [];
            let topLimit = [];
            let lowerLimit = [];
            item.maxValue = item.topLimit;
            item.minValue = item.lowerLimit;
            //判断数据是否存在
            if (item.value !== null) {
              for (let j = 0; j < item.value.length; j++) {
                //判断存在缺失值a
                if (item.value[j][1] != undefined) {
                  avalue.push([item.value[j][0], item.value[j][1].toFixed(3)]);
                } else {
                  avalue.push([]);
                }
                //判断存在缺失值b
                if (item.value[j][2] != undefined) {
                  bvalue.push([item.value[j][0], item.value[j][2].toFixed(3)]);
                } else {
                  bvalue.push([]);
                }
                //判断存在缺失值c
                if (item.value[j][3] != undefined) {
                  cvalue.push([item.value[j][0], item.value[j][3].toFixed(3)]);
                } else {
                  cvalue.push([]);
                }
                //上下限值
                topLimit.push([item.value[j][0], item.topLimit.toFixed(3)]);
                lowerLimit.push([item.value[j][0], item.lowerLimit.toFixed(3)]);
              }
              //数据为空
            } else {
              avalue = [];
              bvalue = [];
              cvalue = [];
            }
            let shuju = {
              id: "qushifenx" + i,
                title:
              item.lineName +
              "--" +
              item.targetName +
              "--" +
              "谐波次数_" +
              item.harmNum +
              "次",
              targetName: item.targetName,
              legend: item.phaiscType,
              valueName: item.unit[0],
              maxValue: max,
              minValue: min,
              avalue: avalue,
              bvalue: bvalue,
              cvalue: cvalue,
              topLimit: topLimit,
              lowerLimit: lowerLimit,
            };
            list.value.push(shuju);
          }
          //图列为频率等,上限,下限
          if (item.phaiscType.length == 3) {
            let gvalue = [];
            let topLimit = [];
            let lowerLimit = [];
            item.maxValue = item.topLimit;
            item.minValue = item.lowerLimit;
            //判断数据是否存在
            if (item.value !== null) {
              for (let j = 0; j < item.value.length; j++) {
                //判断存在缺失值a
                if (item.value[j][1] != undefined) {
                  gvalue.push([item.value[j][0], item.value[j][1].toFixed(3)]);
                } else {
                  gvalue.push([]);
                }
                //上下限值
                topLimit.push([item.value[j][0], item.topLimit.toFixed(3)]);
                lowerLimit.push([item.value[j][0], item.lowerLimit.toFixed(3)]);
              }
              //数据为空
            } else {
              gvalue = [];
            }
            let shuju = {
              id: "qushifenx" + i,
                title:
              item.lineName +
              "--" +
              item.targetName +
              "--" +
              "谐波次数_" +
              item.harmNum +
              "次",
              targetName: item.targetName,
              legend: item.phaiscType,
              valueName: item.unit[0],
              maxValue: max,
              minValue: min,
              gvalue: gvalue,
              topLimit: topLimit,
              lowerLimit: lowerLimit,
              chufa: [],
            };
            list.value.push(shuju);
          }
        } else {
          let shuju = {
            id: "qushifenx" + i,
              title:
              item.lineName +
              "--" +
              item.targetName +
              "--" +
              "谐波次数_" +
              item.harmNum +
              "次",
            targetName: item.targetName,
            legend: item.phaiscType,
            valueName: item.unit[0],
            minValue: null,
            avalue: [],
            bvalue: [],
            cvalue: [],
            topLimit: [],
            lowerLimit: [],
            chufa: [],
          };
          list.value.push(shuju);
        }
      }
      //有上限值
      if (item.topLimit !== 0 && item.lowerLimit == 0) {
        item.phaiscType.push("上限");
        if (item.minValue !== null) {
          //最小值等于下限值
          //图列为A,B,C,上限
          if (item.phaiscType.length == 4) {
            let avalue = [];
            let bvalue = [];
            let cvalue = [];
            let topLimit = [];
            item.maxValue = item.topLimit;
            // item.minValue=item.lowerLimit
            //判断数据是否存在
            if (item.value !== null) {
              for (let j = 0; j < item.value.length; j++) {
                //判断存在缺失值a
                if (item.value[j][1] != undefined) {
                  avalue.push([item.value[j][0], item.value[j][1].toFixed(3)]);
                } else {
                  avalue.push([]);
                }
                //判断存在缺失值b
                if (item.value[j][2] != undefined) {
                  bvalue.push([item.value[j][0], item.value[j][2].toFixed(3)]);
                } else {
                  bvalue.push([]);
                }
                //判断存在缺失值c
                if (item.value[j][3] != undefined) {
                  cvalue.push([item.value[j][0], item.value[j][3].toFixed(3)]);
                } else {
                  cvalue.push([]);
                }
                //上限值
                topLimit.push([item.value[j][0], item.topLimit.toFixed(3)]);
              }
              //数据为空
            } else {
              avalue = [];
              bvalue = [];
              cvalue = [];
            }
            let shuju = {
              id: "qushifenx" + i,
                title:
              item.lineName +
              "--" +
              item.targetName +
              "--" +
              "谐波次数_" +
              item.harmNum +
              "次",
              targetName: item.targetName,
              legend: item.phaiscType,
              valueName: item.unit[0],
              maxValue: max,
              minValue: min,
              avalue: avalue,
              bvalue: bvalue,
              cvalue: cvalue,
              topLimit: topLimit,
            };
            list.value.push(shuju);
          }
          //图列为频率等,上限
          if (item.phaiscType.length == 2) {
            let gvalue = [];
            let topLimit = [];
            item.maxValue = item.topLimit;
            // item.minValue=item.lowerLimit
            //判断数据是否存在
            if (item.value !== null) {
              for (let j = 0; j < item.value.length; j++) {
                //判断存在缺失值a
                if (item.value[j][1] != undefined) {
                  gvalue.push([item.value[j][0], item.value[j][1].toFixed(3)]);
                } else {
                  gvalue.push([]);
                }
                //上限值
                topLimit.push([item.value[j][0], item.topLimit.toFixed(3)]);
              }
              //数据为空
            } else {
              gvalue = [];
            }
            let shuju = {
              id: "qushifenx" + i,
                title:
              item.lineName +
              "--" +
              item.targetName +
              "--" +
              "谐波次数_" +
              item.harmNum +
              "次",
              targetName: item.targetName,
              legend: item.phaiscType,
              valueName: item.unit[0],
              minValue: min,
              maxValue: max,
              gvalue: gvalue,
              topLimit: topLimit,
            };
            list.value.push(shuju);
          }
        } else {
          let shuju = {
            id: "qushifenx" + i,
              title:
              item.lineName +
              "--" +
              item.targetName +
              "--" +
              "谐波次数_" +
              item.harmNum +
              "次",
            targetName: item.targetName,
            legend: item.phaiscType,
            valueName: item.unit[0],
            minValue: null,
            avalue: [],
            bvalue: [],
            cvalue: [],
            topLimit: [],
            lowerLimit: [],
            chufa: [],
          };
          list.value.push(shuju);
        }
      }

      //无限值
      if (item.topLimit == 0 && item.lowerLimit == 0) {
        if (item.minValue !== null) {
          //最小值等于下限值
          //图列为A,B,C
          if (item.phaiscType.length == 3) {
            let avalue = [];
            let bvalue = [];
            let cvalue = [];
            //判断数据是否存在
            if (item.value !== null) {
              for (let j = 0; j < item.value.length; j++) {
                //判断存在缺失值a
                if (item.value[j][1] != undefined) {
                  avalue.push([item.value[j][0], item.value[j][1].toFixed(3)]);
                } else {
                  avalue.push([]);
                }
                //判断存在缺失值b
                if (item.value[j][2] != undefined) {
                  bvalue.push([item.value[j][0], item.value[j][2].toFixed(3)]);
                } else {
                  bvalue.push([]);
                }
                //判断存在缺失值c
                if (item.value[j][3] != undefined) {
                  cvalue.push([item.value[j][0], item.value[j][3].toFixed(3)]);
                } else {
                  cvalue.push([]);
                }
              }
              //数据为空
            } else {
              avalue = [];
              bvalue = [];
              cvalue = [];
            }

            let shuju = {
              id: "qushifenx" + i,
                title:
              item.lineName +
              "--" +
              item.targetName +
              "--" +
              "谐波次数_" +
              item.harmNum +
              "次",
              targetName: item.targetName,
              legend: item.phaiscType,
              valueName: item.unit[0],
              minValue: min,
              maxValue: max,
              avalue: avalue,
              bvalue: bvalue,
              cvalue: cvalue,
            };
            list.value.push(shuju);
          }
          //图列为频率等
          if (item.phaiscType.length == 1) {
            let gvalue = [];
            //判断数据是否存在
            if (item.value !== null) {
              for (let j = 0; j < item.value.length; j++) {
                //判断存在缺失值a
                if (item.value[j][1] != undefined) {
                  gvalue.push([item.value[j][0], item.value[j][1].toFixed(3)]);
                } else {
                  gvalue.push([]);
                }
              }
              //数据为空
            } else {
              gvalue = [];
            }
            let shuju = {
              id: "qushifenx" + i,
              title:
              item.lineName +
              "--" +
              item.targetName +
              "--" +
              "谐波次数_" +
              item.harmNum +
              "次",
              targetName: item.targetName,
              legend: item.phaiscType,
              valueName: item.unit[0],
              minValue: min,
              maxValue: max,
              gvalue: gvalue,
            };
            list.value.push(shuju);
          }
        } else {
          let shuju = {
            id: "qushifenx" + i,
            title:
              item.lineName +
              "--" +
              item.targetName +
              "--" +
              "谐波次数_" +
              item.harmNum +
              "次",
            targetName: item.targetName,
            legend: item.phaiscType,
            valueName: item.unit[0],
            minValue: null,
            avalue: [],
            bvalue: [],
            cvalue: [],
            topLimit: [],
            lowerLimit: [],
            chufa: [],
          };
          list.value.push(shuju);
        }
      }
    }
  });

  rendering();
};
const rendering = () => {
  list.value.forEach((item: any) => {
    let opitonserise: any[] = [];
    item.legend.forEach((item2: any) => {
      if (
        item.avalue !== undefined &&
        (item2 == "A相" || item2 == "AB相" || item2 == "零序电压")
      ) {
        let data = {
          name: item2,
          symbol: "none",
          symbolSize: 5,
          type: "line",
          smooth: true,
          itemStyle: {
            normal: {
              color: "#DAA520",
            },
          },

          data: item.avalue,
        };
        opitonserise.push(data);
      } else if (
        item.bvalue !== undefined &&
        (item2 == "B相" || item2 == "BC相" || item2 == "正序电压")
      ) {
        let data = {
          name: item2,
          symbol: "none",
          symbolSize: 5,
          type: "line",
          smooth: true,
          itemStyle: {
            normal: {
              color: "#2E8B57",
            },
          },

          data: item.bvalue,
        };
        opitonserise.push(data);
      } else if (
        item.cvalue !== undefined &&
        (item2 == "C相" || item2 == "CA相" || item2 == "负序电压")
      ) {
        let data = {
          name: item2,
          symbol: "none",
          symbolSize: 5,
          type: "line",
          smooth: true,
          barWidth: 22,
          itemStyle: {
            normal: {
              color: "#A52a2a",
            },
          },
          data: item.cvalue,
        };
        opitonserise.push(data);
      }
    });
    if (item.valueName == undefined) {
      item.valueName = "无";
    }
    opitonserise = opitonserise.map((item) => {
      item.markLine = {
        itemStyle: {
          normal: {
            lineStyle: {
              type: "dashed", //dotted、solid
              color: "#FF33FF",
              width: 2,
            },
          },
        },
        label: {
          normal: {
            color: "#fff",
            formatter: function (params) {
              return `标准值`;
            },
          },
        },
        data: [
          {
            name: "标准值",
            yAxis:
              condition.value == "42"
                ? rowData.value.vavgValue
                : rowData.value.iavgValue,
          },
        ],
      };
      return item;
    });
    // opitonserise[0].markLine = {
    //   itemStyle: {
    //     normal: {
    //       lineStyle: {
    //         type: "dashed", //dotted、solid
    //         color: "#FF33FF",
    //         width: 2,
    //       },
    //     },
    //   },
    //   label: {
    //     normal: {
    //       color: "#fff",
    //       formatter: function (params) {
    //         return `标准值`;
    //       },
    //     },
    //   },
    //   data: [
    //     {
    //       name: "标准值",
    //       yAxis:
    //         condition.value == "42"
    //           ? rowData.value.vavgValue
    //           : rowData.value.iavgValue,
    //     },
    //   ],
    // };
    // console.log("🚀 ~ rendering ~ row.value:", rowData.value);

    // console.log("🚀 ~ rendering ~ opitonserise:", opitonserise);
    item.serise = opitonserise;
  });

  getEcharts();
};
const getEcharts = () => {
  list.value.forEach((item: any, i: number) => {
    console.log("🚀 ~ getEcharts ~ item:", item);
    item.option = {
      backgroundColor: "#fff",
      title: {
        left: "center",
        text: item.title,
      },
      tooltip: {
        top: "10px",
        trigger: "axis",
        borderColor: "grey",
        style: {
          color: "#fff",
          fontSize: "15px",
          padding: 10,
        },
        formatter: function (params) {
          // console.log(params)
          let tips = "";
          tips += "时刻:" + params[0].data[0] + "</br/>";

          for (let i = 0; i < params.length; i++) {
            if (params[i].seriesName != "暂降触发点") {
              tips +=
                params[i].marker +
                params[i].seriesName +
                ":" +
                (params[i].value[1] - 0).toFixed(2) +
                "<br/>";
            }
          }
          return tips;
        },
        // axisPointer: {
        //   type: "cross",
        //   label: {
        //     color: "#fff",
        //     fontSize: 16,
        //   },
        // },
        textStyle: {
          color: "#fff",
          fontStyle: "normal",
          opacity: 0.35,
          fontSize: 14,
        },
        backgroundColor: "rgba(0,0,0,0.55)",
        borderWidth: 0,
      },

      legend: {
        right: 50,
        top: 25,
        verticalAlign: "top",
        enabled: true,
        itemDistance: 5,
        textStyle: {
          fontSize: "0.6rem",
          color: "#fff",
          rich: {
            a: {
              verticalAlign: "middle",
            },
          },

          padding: [0, 0, 0, 0], //[上、右、下、左]
        },
      },
      xAxis: [
        {
          type: "time",
          axisLine: {
            show: true,
            onZero: false,
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: "dinproRegular",
            },
          },
        },
      ],
      toolbox: {
        show: false,
        feature: {
          dataZoom: {
            // bottom: '10px',
            yAxisIndex: "none",
          },
        },
      },
      yAxis: [
        {
          type: "value",
          min: item.minValue,
          max: item.maxValue,
          name: item.valueName,

          axisLine: {
            show: true,
            onZero: false, //-----------重点
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              type: "dashed",
              opacity: 0.5,
            },
          },
        },
      ],
      series: item.serise,
    };
    let aValues = [];
    let bValues = [];
    let CValues = [];
    let ZValues = [];

    if (
      traceability.value.length > 0 &&
      traceability.value[0].value != null &&
      traceability.value[0].value.length > 0
    ) {
      for (let i = 0; i < traceability.value[0].value.length; i++) {
        let T = traceability.value[0].value[i][0];
        let A = traceability.value[0].value[i][1];
        let B = traceability.value[0].value[i][2];
        let C = traceability.value[0].value[i][3];
        let Z = A + B + C;
        aValues.push([T, A > 0 ? 1 : A == 0 ? 0 : -1]);
        bValues.push([T, B > 0 ? 1 : B == 0 ? 0 : -1]);
        CValues.push([T, C > 0 ? 1 : C == 0 ? 0 : -1]);
        ZValues.push([T, Z > 0 ? 1 : Z == 0 ? 0 : -1]);
      }
    }
  });
  loading.value = false;
};

const handleCloseDialog = () => {
  visible.value = false;
  options.value = null;
  emit("close");
};

defineExpose({
  open,
});
</script>
