<template>
  <div
    id="itic"
    style="width: 100%; height: 100%;"

    ref="fg14"
    v-loading="isLoading"
  ></div>
</template>

<script>
import { getEventFeatureAmplitudeCurve } from "@/api/Statistical-analysis/transientIndicators/transientIndicators";
export default {
  props: {
    form: {
      type: Object,
      default: undefined,
    },
  },
  data() {
    return {
      device: null,
      zoom: undefined, //图表焦点校验
      h: null,
      isLoading: false,
      //ITIC模拟数据
      datalist: [
        // {
        //   timeid: null,
        //   ms: 0,
        //   describe: null,
        //   wavetype: null,
        //   persisttime: 0.07,
        //   eventvalue: 56.0,
        //   persisttimea: 0.0,
        //   eventvaluea: 0.0,
        //   persisttimeb: 0.0,
        //   eventvalueb: 0.0,
        //   persisttimec: 0.0,
        //   eventvaluec: 0.0,
        //   state: null,
        //   time: "2022-02-20 14:17:34.944",
        //   severity: 0.887,
        //   eventDetailIndex: "a90e7821-acc3-4d53-80f0-49838e8662e6",
        //   lineId: 1641,
        //   eventassIndex: null,
        //   lineName: "电源总进线1",
        //   gdName: "常熟市",
        //   subName: "常熟森泉印染厂_6600087524",
        //   scale: "10kV",
        //   loadType: null,
        //   eventName: null,
        //   fileFlag: "0",
        //   type: "暂降",
        //   eventReason: "其他",
        //   eventType: "其他",
        // },
        // {
        //   timeid: null,
        //   ms: 0,
        //   describe: null,
        //   wavetype: null,
        //   persisttime: 0.075,
        //   eventvalue: 73.0,
        //   persisttimea: 0.0,
        //   eventvaluea: 0.0,
        //   persisttimeb: 0.0,
        //   eventvalueb: 0.0,
        //   persisttimec: 0.0,
        //   eventvaluec: 0.0,
        //   state: null,
        //   time: "2022-02-20 14:17:32.782",
        //   severity: 0.536,
        //   eventDetailIndex: "6578ad55-baaf-4503-988a-4ae9e663b466",
        //   lineId: 1641,
        //   eventassIndex: null,
        //   lineName: "电源总进线1",
        //   gdName: "常熟市",
        //   subName: "常熟森泉印染厂_6600087524",
        //   scale: "10kV",
        //   loadType: null,
        //   eventName: null,
        //   fileFlag: "1",
        //   type: "暂降",
        //   eventReason: "其他",
        //   eventType: "其他",
        // },
      ],
      pointI: [],
      pointIun: [],
      pointF: [],
      pointFun: [],
      white: "#ffffff",
      top: [
        [0.001, 200],
        [0.003, 140],
        [0.003, 120],
        [0.5, 120],
        [0.5, 110],
        [10, 110],
        [1000, 110],
      ],
      bot: [
        [0.02, 0],
        [0.02, 70],
        [0.5, 70],
        [0.5, 80],
        [10, 80],
        [10, 90],
        [1000, 90],
      ],
      part: [
        [0.05, 0],
        [0.05, 50],
        [0.2, 50],
        [0.2, 70],
        [0.5, 70],
        [0.5, 80],
        [10, 80],
        [1000, 80],
      ],
    };
  },
  created() {},
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)

    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
 
    this.$nextTick(() => {
      this.iticData();
    });

    //   console.log(this.time[0],'1234567');
  },
  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
  updated() {},
  methods: {
    setHeight() {
      let domID1 = document.getElementById("itic");
      setTimeout(()=>{
        domID1.style.width = window.sessionStorage.getItem('appwidth') - 40 +'px'
        domID1.style.height = (window.sessionStorage.getItem('appheight')- 180)/2 + 'px'
      },0)
        },
    //公共的方法
    gongfunction() {
      var standI = 0;
      var unstandI = 0;
      var standF = 0;
      var unstandF = 0;
      this.pointI = [];
      this.pointIun = [];
      this.pointF = [];
      this.pointFun = [];
      var total = 0;
      // console.log(this.datalist);
      total = this.datalist.length;
      if (total == 0) {
      } else {
        for (var i = 0; i < this.datalist.length; i++) {
          var point = [];
          var xx = this.datalist[i].duration / 1000;
          var yy = this.datalist[i].featureAmplitude;
          var time = this.datalist[i].startTime.replace("T", " ");
          //   var company = this.datalist[i].gdName;
          //   var substation = this.datalist[i].subName;
          //   var index = this.datalist[i].lineId;
          point = [xx, yy, time];

          if (xx <= 0.003) {
            var line = 0;
            line = 230 - 30000 * xx;
            if (yy > line) {
              unstandI++;
              this.pointIun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            } else {
              standI++;
              this.pointI.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            }
          } else if (xx <= 0.02) {
            if (yy > 120) {
              unstandI++;
              this.pointIun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            } else {
              standI++;
              this.pointI.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            }
          } else if (xx <= 0.5) {
            if (yy > 120 || yy < 70) {
              unstandI++;
              this.pointIun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            } else {
              standI++;
              this.pointI.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            }
          } else if (xx <= 10) {
            if (yy > 110 || yy < 80) {
              unstandI++;
              this.pointIun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            } else {
              standI++;
              this.pointI.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            }
          } else {
            if (yy > 110 || yy < 90) {
              unstandI++;
              this.pointIun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            } else {
              standI++;
              this.pointI.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            }
          }

          if (xx < 0.05) {
            standF++;
            this.pointF.push({
              value: point,
              itemStyle: { normal: { color: "green" } },
            });
          } else if (xx < 0.2) {
            if (yy > 50) {
              standF++;
              this.pointF.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            } else {
              unstandF++;
              this.pointFun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            }
          } else if (xx < 0.5) {
            if (yy > 70) {
              standF++;
              this.pointF.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            } else {
              unstandF++;
              this.pointFun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            }
          } else {
            if (yy > 80) {
              standF++;
              this.pointF.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            } else {
              unstandF++;
              this.pointFun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            }
          }
        }
      }
    },
    //itic曲线图
    async iticData() {
      this.isLoading = true;
      const data = await getEventFeatureAmplitudeCurve(this.form);
      // console.log(data);
      this.datalist = data.data.eventFeatureAmplitudeCurveDataList;
      this.gongfunction();
      let white = "#000";
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      const echarts = require("echarts");
      let domID1 = document.getElementById("itic");
      setTimeout(()=>{
        domID1.style.width = window.sessionStorage.getItem('appwidth') - 40 +'px'
        domID1.style.height = (window.sessionStorage.getItem('appheight')- 180)/2 + 'px'
      },0)
      let myChartes = echarts.init(domID1);
      this.isLoading = false;
      let option = {
        title: {
          text: "ITIC曲线",
          x: "center",
          top: 0,
          textStyle: {
            color: echartsColor.WordColor,
          },
        },
        grid: {
          top: "25%",
          left: "2%",
          right: "3%",
          bottom: "0%",
          containLabel: true,
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
          },
        },
        tooltip: {
          trigger: "item",
          show: true,
          formatter: function (a) {
            // console.log(a);
            let relVal = "";
            // relVal =
            //   "<font style='color:" +
            //   white +
            //   "'>供电公司:" +
            //   "&nbsp" +
            //   "&nbsp" +
            //   a.value[3] +
            //   "</font><br/>";
            // relVal +=
            //   "<font style='color:" +
            //   white +
            //   "'>变电站:" +
            //   "&nbsp" +
            //   "&nbsp" +
            //   a.value[4] +
            //   "</font><br/>";
            relVal +=
              "<font style='color:" +
              white +
              "'>发生时刻:" +
              "&nbsp" +
              "&nbsp" +
              a.value[2] +
              "</font><br/>";
            relVal +=
              "<font style='color:" +
              white +
              "'>持续时间:" +
              "&nbsp" +
              "&nbsp" +
              (a.value[0]).toFixed(3) +
              "s</font><br/>";
            relVal +=
              "<font style='color:" +
              white +
              "'>特征幅值:" +
              "&nbsp" +
              "&nbsp" +
              a.value[1] +
              "%</font>";
            return relVal;
          },
          axisPointer: {
            type: "cross",
            label: {
              color: "#fff",
              fontSize: 16,
            },
          },
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            opacity: 0.35,
            fontSize: 14,
          },
          // backgroundColor: "rgba(0,0,0,0.35)",
          borderWidth: 0
        },
        legend: {
          data: ["上限", "下限", "可容忍事件", "不可容忍事件"],
          left:'1%',
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 28,
          textStyle: {
            color: echartsColor.WordColor,
            rich: {
              a: {
                verticalAlign: "middle",
              },
            },

            padding: [2, 0, 0, 0], //[上、右、下、左]
          },

          x: "left",
        },
        color: ["#FF8C00", "#00BFFF", "green", "red"],
        xAxis: [
          {
            type: "log",
            min: "0.001",
            max: "1000",
            splitLine: {
              show: false,
            },
            name: "s",
            axisTick: { show: false },
            nameTextStyle: {
              color: echartsColor.WordColor,
              padding: 10,
            },
            axisLine: {
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              color: echartsColor.WordColor,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: 10,
            minInterval: 3,
            name: "%",
               nameTextStyle: {
              color: echartsColor.WordColor,
            },
        
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              color: echartsColor.WordColor,
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: [echartsColor.thread],
                type: "dashed",
                opacity: 0.5,
              },
            },
          },
        ],
        series: [
          {
            name: "上限",
            type: "line",
            data: this.top,
            showSymbol: false,
            tooltips: {
              show: false,
            },
          },
          {
            name: "下限",
            type: "line",
            data: this.bot,
            showSymbol: false,
            tooltips: {
              show: false,
            },
          },
          {
            name: "可容忍事件",
            type: "scatter",
            symbol: "circle",
            data: this.pointI,
          },
          {
            name: "不可容忍事件",
            type: "scatter",
            symbol: "circle",
            data: this.pointIun,
          },
        ],
      };
      let pointIData = this.pointI;
      let pointIunData = this.pointIun;
      this.$emit("transfer-data", data, pointIData, pointIunData);

      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      let _this = this;
      _this.$erd.listenTo(_this.$refs.fg14, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>

<style lang="less" scoped></style>
