<template>
  <div ref="zjt" id="zjyyt" style="width: 100%;"></div>
</template>
<script>
import {
  onLienRate1,
  onLienRate2,
  onLienRate3,
  colorB,
} from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import { getEventReason } from "@/api/monitoringpointStatistics/echart";
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.h == 24) {
        this.$refs.zjt.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('voltagetype').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 50 +'px'
        this.$refs.zjt.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      formData1:{
        statisticalType:{},
        scale:null,
        manufacturer:null,
        loadType:null,
        monitorFlag: 2,
        powerFlag: 2,
        timeFlag: 1,
        deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId    
      },
      voltageleveloption:[],
      terminaloption:[],
      interfereoption:[],
      classificationData:[],
      classificationData: [],
      time: this.timefamt(),
      //暂降原因模拟数据
      initCauseData: [],
    };
  },
  created() {
    this.getVoltage();
    this.getManufacturer();
   // this.getclassificationData();
    this.getLoadType();
    this.queryData();
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('voltagetype').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 50 +'px'
     this.$refs.zjt.style.height =  height
    },200)
  },
  methods: {
     //字典获取数据电压等级
     getVoltage() {
      var code = "Dev_Voltage_Stand";
      this.voltageleveloption = dicData(code, []);
      this.formData1.scale = this.voltageleveloption;
    },
    //字典获取数据终端厂家
    getManufacturer() {
      var code = "Dev_Manufacturers";
      this.terminaloption = dicData(code, []);
      this.formData1.manufacturer = this.terminaloption;
    },
    //字典获取数据干扰源类型
    getLoadType() {
      var code = "Interference_Source";
      this.interfereoption = dicData(code, []);
      this.formData1.loadType = this.interfereoption;
    },
    //获取统计类型
    getclassificationData() {
      var code = "Statistical_Type";
      this.classificationData = dicData(code, ["Report_Type"]);
      this.formData1.statisticalType = this.classificationData[0];
    },
    queryData() {
      this.formData1.searchBeginTime=this.time[0]
      this.formData1.searchEndTime=this.time[1]

      getEventReason(this.formData1).then((res) => {
        this.initCauseData = res.data.type;
        this.$nextTick(()=>{
          this.initCause();
        })
        
       })
       
      
    },
    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;
    },
    initCause() {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("zjyyt"));
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      myChartes.clear();
      var option = {
          legend: {
          type: "scroll",
          orient: "vertical",
          left: 10,
          top: "5%",
          color:'#fff',
          textStyle:{
            color:'#fff',
          }
        },
       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: "{a} <br/>{b} : {c} ({d}%)",
          confine: true,
        },
        series: [
        {
            name: '暂降类型',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: true,
            itemStyle: { borderColor: '#fff', borderWidth: 2 },
            color: echartsColor.FigureColor,
            label: {
                // alignTo: 'labelLine', // ! 文字对齐方式
                  textStyle: {
                //数值样式
                color: "#fff",
              },
                formatter: function (e) {
                    let {
                        data: { value, name },
                    } = e;
                    return `{x|}{a|${name}}\n{b|${value}个}{c|}`;
                },
                minMargin: 5,
                lineHeight: 15,
                rich: {
                    x: { width: 10, height: 10, backgroundColor: 'inherit', borderRadius: 5 },
                    a: { fontSize: 14, color: 'inherit', padding: [0, 20, 0, 8] },
                    b: { fontSize: 12, align: 'left', color: '#fff', padding: [8, 0, 0, 18] },
                    c: { fontSize: 12, align: 'left', color: '#fff', padding: [8, 0, 0, 8] },
                },
            },
            data: this.initCauseData
        },
    ]
     };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.zjt, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    }
  }
};
</script>
