<template>
    <div ref="iticArea" id="iticEcharts" style="width: 100%;"></div>
  </template>
  <script>
  import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
  import { dicData } from "@/assets/commjs/dictypeData";
  import {getPwEventFeatureAmplitudeCurve} from "@/api/Distributionnetwork/transient/transient";
  import yan from "@/assets/commjs/color";
  export default {
    props: {
      item: {
        type: Object,
        default: null,
      },
      item2: {
        type: Object,
        default: null,
      },
      height: {
        type: Number,
        default: null,
      },
      height2: {
        type: Number,
        default: null,
      },
    },
    watch: {
      height2(a, b) {
        if (a == 24) {
          this.$refs.iticArea.style.height =
            document.getElementById("conmentId").offsetHeight - 50 + "px";
        } else {
          return;
        }
      },
      height(a, b) {
        if (a == 6 || a == 8 || a == 9 || a == 16) {
          setTimeout(() => {
            let str = document.getElementById("areaconstitic").style.height;
            let strsec = str.split("p");
            let height = parseInt(strsec) - 50 + "px";
            this.$refs.iticArea.style.height = height;
          }, 200);
        } else {
          return;
        }
      },
    },
    data() {
      return {
        tableData: [],
        statisticalType: null,
        classificationData: [],
        time: this.timefamt(),
        formData1: {
          startTime:'',
          id: '',
          endTime:'',
          type: 3
        },
        //曲线icit和semi曲线模拟数据
        datalist: [],
        pointI: [],
        pointIun: [],
        pointF: [],
        pointFun: [],
        zoom: "", //图表焦点校验
        myChartes: null,
        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],
        ],
        voltageleveloption: [],
        terminaloption: [],
        interfereoption: [],
        classificationData: [],
        xdata: [],
        ydata: [],
        title:'',
      };
    },
    created() {
      this.queryData();
    },
    mounted() {
      setTimeout(() => {
        let str = document.getElementById("areaconstitic").style.height;
        let strsec = str.split("p");
        let height = parseInt(strsec) - 50 + "px";
        this.$refs.iticArea.style.height = height;
      }, 200);
    },
    methods: {
      queryData() {
        this.formData1.startTime = this.time[0];
        this.formData1.endTime = this.time[1];
        var info = window.sessionStorage.getItem("Info");
        info = eval("(" + info + ")");
        this.formData1.id =info.deptId;
        getPwEventFeatureAmplitudeCurve(this.formData1).then((res) => {
            this.datalist = res.data.eventFeatureAmplitudeCurveDataList;
            this.gongfunction();
            this.title = '总统计:'+(this.pointI.length+this.pointIun.length)+'个,可容忍:'+this.pointI.length+'个,不可容忍:'+this.pointIun.length+'个'
            //let pointIunData=
            this.iticData();
        });
      
      },
      //公共的方法
      gongfunction() {
      var standI = 0;
      var unstandI = 0;
      var standF = 0;
      var unstandF = 0;
      this.pointI = [];
      this.pointIun = [];
      this.pointF = [];
      this.pointFun = [];
      var total = 0;
        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 index = this.datalist[i].eventDetailIndex;
            point = [xx, yy, time];
  
            if (xx <= 0.003) {
              var line = 0;
              line = 250 - 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" } },
                });
              }
            }
          }
        }
      
      },
      timefamt() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        month = month > 9 ? month : "0" + month;
        day = day < 10 ? "0" + day : day;
        var arr = [];
        var time1 = year + "-" + month + "-01";
        arr.push(time1);
        var time2 = year + "-" + month + "-" + day;
        arr.push(time2);
        return arr;
      },
      iticData() {
        const echarts = require("echarts");
        var myChartes = echarts.init(document.getElementById("iticEcharts"));
        let echartsColor = JSON.parse(window.localStorage.echartsColor);
        let option = {
       // backgroundColor: "#f9f9f9", //地图背景色深蓝
        title: {
          text: "ITIC曲线("+this.title+')',
          x: "center",
          y:'20px',
          textStyle: {
              fontSize: 16,
              color: '#fff',
            },
        },
        grid: {
          top: "50px",
          left: "10px",
          right: "40px",
          bottom: "20px",
          containLabel: true,
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     saveAsImage: { show: true },
        //   },
        // },
        tooltip: {
          trigger: "item",
          show: true,
          formatter: function (a) {
            let relVal = "";
            relVal +=
              "<font style='color:#000'>发生时刻:" +"&nbsp" +"&nbsp" +a.value[2] +"</font><br/>";
            relVal +=
              "<font style='color:#000'>持续时间:" +"&nbsp" +"&nbsp" +(a.value[0]).toFixed(3) +"s</font><br/>";
            relVal += "<font style='color:#000'>特征幅值:" +"&nbsp" +"&nbsp" +a.value[1] + "%</font>";
            return relVal;
          },
          axisPointer: {
            type: "cross",
            label: {
              color: "#000",
              fontSize: 16,
            },
          },
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            opacity: 0.35,
            fontSize: 14,
          },
          // backgroundColor: "rgba(0,0,0,0.35)",
          borderWidth: 0
        },
        legend: {
          data: ["上限", "下限", "可容忍事件", "不可容忍事件"],

          x: "10px",
          textStyle: {
            color: "#fff",
            rich: {
              a: {
                verticalAlign: "middle",
              },
            },

            padding: [2, 0, 0, 0], //[上、右、下、左]
          },
        },
        color: ["#FF8C00", "#00BFFF", "green", "red"],
        xAxis: [
          {
            type: "log",
            min: "0.001",
            max: "1000",
            splitLine: {
              show: false,
            },
            name: "s",
            nameTextStyle: {
            padding: 5,
            color:'#fff'
          },
          axisLine: {
              lineStyle: {
                color: '#fff',
              },
            },
            axisLabel: {
              color: '#fff',
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitNumber: 10,
            minInterval: 3,
            name: "%",
            nameTextStyle: {
              color: '#fff',
              padding: 0,
            },
              minInterval: 1,
              type: "value",
               axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              },
              },
               axisLabel: {
              color: '#fff',
              },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#fff'],
                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,
          },
        ],
      };
        myChartes.setOption(option)
window.echartsArr.push(myChartes);
        setTimeout(() => {
          //由于网格布局拖拽放大缩小图表不能自适应，这里设置一个定时器使得echart加载为一个异步过程
          this.$nextTick(() => {
            myChartes.resize();
          });
        }, 0);
        let _this = this;
        _this.$erd.listenTo(_this.$refs.iticArea, (element) => {
          _this.$nextTick(() => {
            myChartes.resize();
          });
        });
        window.onresize = function () {
          myChartes.resize();
        };
      },
    },
  };
  </script>
  