<template>
  <div ref="areayy" id="yyEcharts" style="width: 100%"></div>
</template>
<script>
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import { getStatistic } 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 == 24) {
        this.$refs.areayy.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("areaconstyy").style.height;
          let strsec = str.split("p");
          let height = parseInt(strsec) - 50 + "px";
          this.$refs.areayy.style.height = height;
        }, 200);
      } else {
        return;
      }
    },
  },
  data() {
    return {
      initCauseData: [],
      statisticalType: null,
      classificationData: [],
      time: this.timefamt(),
      formData1: {
        endTime: "",
        lineIndex: "0a5a5f475914c0e08c025e8f00e832f3",
        startTime: "",
      },
    };
  },
  created() {
    this.queryData();
  },
  mounted() {
    setTimeout(() => {
      let str = document.getElementById("areaconstyy").style.height;
      let strsec = str.split("p");
      let height = parseInt(strsec) - 50 + "px";
      this.$refs.areayy.style.height = height;
    }, 200);
  },
  methods: {
    queryData() {
      this.formData1.startTime = this.time[0];
      this.formData1.endTime = this.time[1];
      getStatistic(this.formData1).then((res) => {
        this.initCauseData = res.data.reason;
        this.qualifiedechart();
      });
    },
    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;
    },
    qualifiedechart() {
      var reaArray = [];
      var valueArray = [];
      if (null === this.initCauseData) {
        reaArray = [
          "组合暂降",
          "变压器激磁",
          "短路故障",
          "大型感应电动机启动",
          "未明",
        ];
        valueArray = [
          { name: "组合暂降", value: 0 },
          { name: "变压器激磁", value: 0 },
          {
            name: "短路故障",
            value: 0,
          },
          { name: "大型感应电动机启动", value: 0 },
          { name: "未明", value: 0 },
        ];
      } else {
        this.initCauseData.reverse();
        for (var i = 0; i < this.initCauseData.length; i++) {
          reaArray.push(this.initCauseData[i].reason);
          var causeValue = {};
          causeValue.name = this.initCauseData[i].reason;
          causeValue.value = this.initCauseData[i].times;
          valueArray.push(causeValue);
        }
      }
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("yyEcharts"));
      myChartes.clear();
      //let echartsColor = JSON.parse(window.localStorage.echartsColor);
      var option = {
        // backgroundColor: "#fff", //背景色,
        animation: false,
        title: {
          text: "暂降原因",
          x: "center",
          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}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: reaArray,
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "暂降原因",
            type: "pie",
            radius: "70%",
            center: ["50%", "55%"],
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            lableLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            data: valueArray,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.areayy, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
