<template>
  <div ref="f47area" id="f47eacharts" style="width: 100%;"></div>
</template>
<script>
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import {getPlot} from "@/api/monitoringpointStatistics/echart";
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.f47area.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('areaconstf47').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 50 +'px'
        this.$refs.f47area.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      statisticalType: null,
      classificationData: [],
      time: this.timefamt(),
      formData1:{
        startTime:'',
        lineIndex: "0a5a5f475914c0e08c025e8f00e832f3",
        endTime:''
      },
      voltageleveloption:[],
      terminaloption:[],
      interfereoption:[],
      classificationData:[],
       //ITIC模拟数据
       datalist: [],
      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() {
    this.queryData();
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('areaconstf47').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 50 +'px'
     this.$refs.f47area.style.height =  height
    },200)
  },
  methods: {
   //公共的方法
   gongfunction() {
      var standI = 0;
      var unstandI = 0;
      var standF = 0;
      var unstandF = 0;
      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].persistTime;
          var yy = this.datalist[i].eventValue*100;
          var time = this.datalist[i].time;
          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" } },
              });
            }
          }
        }
      }
      this.$emit("dataList", {
        name: "事件个数",
        gs: this.datalist.length,
        krr: this.pointF.length,
        bkrr: this.pointFun.length,
      });
    },

    queryData() {
      this.formData1.startTime=this.time[0]
      this.formData1.endTime=this.time[1]
      getPlot(this.formData1).then((res) => {
        if(res.code =='A0000'){
          this.datalist = res.data.voltageToleranceCurveDataList;
        this.gongfunction();
        this.$nextTick(() => {
          this.f47emis();
        });
        }
          
        this.datategrity();
      });
    },
    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;
    },
    f47emis() {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("f47eacharts"));
      myChartes.clear();
      var option = {
        //backgroundColor: "#fff", //背景色,
        title: {
          text: "SEMI F47曲线",
          x: "center",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
            top: "30px", // 等价于 y: '16%'
            left: "10px",
            right: "60px",
            bottom: "10px",
            containLabel: true,
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
                            type: "shadow",
                            label: {
                            color: "#fff",
                            fontSize: 16,
                            },
                        },
                        textStyle: {
                            color: "#fff",
                            fontStyle: "normal",
                            opacity: 0.35,
                            fontSize: 14,
                        },
                        backgroundColor: "rgba(0,0,0,0.35)",
          formatter: function (a) {
            var relVal = "";
            relVal =
              "<font style='color:#fff'>发生时间:" +
              a.value[2] +
              "</font><br/>";
            relVal +=
              "<font style='color:#fff'>持续时间:" +
              a.value[0] +
              "s</font><br/>";
            relVal +=
              "<font style='color:#fff'>特征幅值:" + a.value[1] + "%</font>";
            return relVal;
          },
        },
      //  toolbox: {
         // show: true,
         // feature: {
            // dataView: { show: true },
            // dataZoom: { show: true },
            ////restore: { show: true },
            //saveAsImage: { show: true },
            // myFull: {
            //   show: true,
            //   title: "全屏查看",
            //   icon:
            //     "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
            //   onclick: e => {
            //     this.fullFlag = true;
            //     let element = document.getElementById("semi");
            
            //     if (element.requestFullScreen) {
            //       // HTML W3C 提议
            //       element.requestFullScreen();
            //     } else if (element.msRequestFullscreen) {
            //       // IE11
            //       element.msRequestFullScreen();
            //     } else if (element.webkitRequestFullScreen) {
            //       // Webkit (works in Safari5.1 and Chrome 15)
            //       element.webkitRequestFullScreen();
            //     } else if (element.mozRequestFullScreen) {
            //       // Firefox (works in nightly)
            //       element.mozRequestFullScreen();
            //     }
            //     // 退出全屏
            //     if (element.requestFullScreen) {
            //       document.exitFullscreen();
            //     } else if (element.msRequestFullScreen) {
            //       document.msExitFullscreen();
            //     } else if (element.webkitRequestFullScreen) {
            //       document.webkitCancelFullScreen();
            //     } else if (element.mozRequestFullScreen) {
            //       document.mozCancelFullScreen();
            //     }
            //   }
            // }
         // },
       // },
        legend: {
          data: ["边界线", "可容忍事件", "不可容忍事件"],
          //   selectedMode: false,
          right: "10px",
          textStyle: {
            color: "#fff",
          },
        },
        color: ["yellow", "green", "red"],
        xAxis: [
          {
            nameTextStyle: {
              color: "#fff",
              fontSize:12,
              left: "0%",
            },
            type: "log",
            min: "0.001",
            max: "1000",
            splitLine: {
              show: false,
            },
            name:'暂降\n次数',
            axisLabel: {
              color: "#fff",
              textStyle: {
                fontSize:yan.EchartObject.xNamefontSize,
                fontFamily:yan.EchartObject.fontFamily,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
              color: "#fff",
            },
            },
          },
        ],
        yAxis: [
          {
            nameTextStyle: {
              color: "#fff",
              fontSize: 12,
              left: "0%",
            },
            type: "value",
            max: function (value) {
              return value.max + 20;
            },
            splitNumber: 10,
            minInterval: 0.1,
            name: yan.EchartObject.nuit1,
            axisLabel: {
              color: "#fff",
              textStyle: {
                fontSize:yan.EchartObject.xNamefontSize
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
              color: "#fff",
            },
            },
          },
        ],
        series: [
          {
            name: "边界线",
            type: "line",
            data: this.part,
            showSymbol: false,
            tooltips: {
              show: false,
            },
          },
          {
            name: "可容忍事件",
            type: "scatter",
            symbol: "circle",
            data: this.pointF,
          },
          {
            name: "不可容忍事件",
            type: "scatter",
            symbol: "circle",
            data: this.pointFun,
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.f47area, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
