<template>
  <div
    ref="cspevoltag"
    id="electriccurrent"
    style="width: 100%;"  
  ></div>
</template>
<script>
import  yan from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import api from "@/api/harmonic/onlineData";
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.cspevoltag.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('harmonicfz').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 60 +'px'
        this.$refs.cspevoltag.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      statisticalType: null,
      classificationData: [],
      time: this.timefamt(),
      //电压含有率
      harmInHarmValue: [],
      harmInOverLimit: [],
      //电流幅值
      yData1: [],
      yData2: [],
    };
  },
  created() {
    var data = window.sessionStorage.getItem("Info");
    data = eval("(" + data + ")");
    this.deptIndex = data.deptId;
    this.getIndexType();
    this.queryData();
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('harmonicfz').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 60 +'px'
     this.$refs.cspevoltag.style.height =  height
    },200)
  },
  methods: {
    queryData() {
      var formData = {
        id: "333ff66a28acd0c68834f5a0d4ca68bd",
        harmState: 1,
        searchBeginTime: this.time[0],
        searchEndTime: this.time[1],
      };
      api.getHarmInHarmData(formData).then((res) => {
        this.harmInHarmValue = res.data.harmInHarmValue;
        this.harmInOverLimit = res.data.harmInOverLimit;
        this.electriccurrent();
      });
    },
    getIndexType() {
      var code = "Indicator_Type";
      this.classificationData = dicData(code, [
        "PLPC",
        "DYPC",
        "SXDYBPHD",
        "CSSB",
        "FXDL",
        "JXBDY",
      ]);
      this.statisticalType = this.classificationData[0];
    },
    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;
    },
    electriccurrent() {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("electriccurrent"));
      myChartes.clear();
      var option = {
       // backgroundColor: "#fff",
        // tooltip: {
        //     trigger: 'axis',
        //     axisPointer: { // 坐标轴指示器，坐标轴触发有效
        //         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        //     },
        //     formatter: function (params) {
        //         var tips = "";
        //         tips += params[0].name + '</br/>';
        //         for (var i = 0; i < params.length; i++) {
        //             tips += params[i].seriesName + ":" + params[i].value + "<br/>";
        //         }
        //         return tips;
        //      }
        // },
        tooltip: {
          trigger: "axis",
         
          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)",
        },
        grid:yan.EchartObject.gridt,
        legend: {
          data: ["国标限值", "电流幅值"],
          right: "10px",
          top: "-5px",
          //icon:'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
          textStyle: {
            color: "#fff",
          },
          //itemWidth: 10,
          //itemHeight: 10,
        },
        xAxis: {
          name:yan.EchartObject.number,
          type: "category",
          data: [
            "2次",
            "3次",
            "4次",
            "5次",
            "6次",
            "7次",
            "8次",
            "9次",
            "10次",
            "11次",
            "12次",
            "13次",
            "14次",
            "15次",
            "16次",
            "17次",
            "18次",
            "19次",
            "20次",
            "21次",
            "22次",
            "23次",
            "24次",
            "25次",
            "26次",
            "27次",
            "28次",
            "29次",
            "30次",
            "31次",
            "32次",
            "33次",
            "34次",
            "35次",
            "36次",
            "37次",
            "38次",
            "39次",
            "40次",
            "41次",
            "42次",
            "43次",
            "44次",
            "45次",
            "46次",
            "47次",
            "48次",
            "49次",
            "50次",
          ],
          axisLine: {
            show: true,
            // symbol:['none', 'arrow'],
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily:yan.EchartObject.fontFamily,
              color: "#fff",
              fontSize:yan.EchartObject.xNamefontSize
              //fontSize:10
            },
              rotate: 0,
            },
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
        },
       
        yAxis: {
          type: "value",
          // max: '100',
          name: yan.EchartObject.dwa,
          nameTextStyle: {
             color: '#fff',
            fontSize: 12,
            left: "0%",
          },
          position: "left",
          axisLine: {
            show: true,
            //symbol:['none', 'arrow'],
            lineStyle: {
              color: "#fff",
             
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#f1f1f1",
              type:yan.EchartObject.type
            },
          },
          axisLabel: {
            color: "#fff",
            textStyle: {
              fontSize: yan.EchartObject.xNamefontSize,
            },
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
        },
        series: [
          {
            name: "国标限值",
            type: "bar",
            barMaxWidth: yan.EchartObject.hbarMaxWidth,
            itemStyle: {
              normal: {
                color: "#00CC99",
                barBorderRadius: [5, 5, 0, 0],
              },
            },
            data: this.harmInOverLimit,
          },
          {
            name: "电流幅值",
            type: "bar",
            barMaxWidth: yan.EchartObject.hbarMaxWidth,
            itemStyle: {
              normal: {
                color: "#FF9900",
                barBorderRadius: [12, 12, 0, 0],
              },
            },
            data: this.harmInHarmValue,
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.cspevoltag, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
