<template>
  <div id="bnmkjh">
  <div
    id="equipmentLevel"
    ref="vdghff"
    :style="`height:100%;`"
  ></div></div>
</template>

<script>
import yan from "@/assets/commjs/color";

// import { getRegionData, getVoltageLevelData} from "@/api/generaloverview";
import { dicData } from "@/assets/commjs/dictypeData";
import { getGeneralSituationData, getVoltageData } from "@/api/generaloverview";
export default {
  props: {
    item: {
      type: Array,
      default: undefined,
    },
  },
  data() {
    return {
      h: null,
      zoom: null,
      isLoading: false,
      form: {
        deptIndex: "",
        monitorFlag: 2,
        powerFlag: 2,
        serverName: "event-boot",
        searchBeginTime: this.getCurrentMonthFirst(),
        searchEndTime: this.getNowFormatDate(),
        statisticalType: {},
      },
      myCharts:'',
    };
  },
  created() {
    this.getclassificationData();
  },
  mounted() {
    this.zoom = window.devicePixelRatio;
    this.form.deptIndex = JSON.parse(
      window.sessionStorage.getItem("Info")
    ).deptId;
    this.resizeEchartZ()
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
      if(this.myCharts!==''){
        this.myCharts.resize()
      }
    });
    this.$nextTick(() => {
      this.getechart2();
    });
  },
  computed: {},
  methods: {
    resizeEchartZ(){
      var elementResizeDetectorMaker = require("element-resize-detector")
      var erd = elementResizeDetectorMaker()
      erd.listenTo(document.getElementById("bnmkjh"), (element) => {
       // let  domeId=document.getElementById("ceshi")
        let  domeId2=document.getElementById("equipmentLevel")
        domeId2.style.width= document.getElementById("bnmkjh").offsetWidth-0+'px'
        if(this.myCharts !==''){
          this.myCharts.resize();
        }
      });
    },
    //获取统计类型
    getclassificationData() {
      // debugger
      var code = "Statistical_Type";
      this.classificationData = dicData(code, ["Load_Type"]);
      this.form.statisticalType = this.classificationData[1];
    },
    //获取当前月第一天日期
    getCurrentMonthFirst() {
      var date = new Date();
      var year = date.getFullYear();
      date.setDate(1);
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day;
    },
    //获取当天日期
    getNowFormatDate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day;
    },
    //echarts图表
    async getechart2() {
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      this.isLoading = true;
      this.form.searchBeginTime = this.item[0];
      this.form.searchEndTime = this.item[1];
      let level = [];
      let onlineData = [];
      let offlineData = [];
      const data = await getVoltageData(this.form);
      data.data.forEach((item) => {
        level.push(item.name);
        onlineData.push(item.onLine);
        offlineData.push(item.offLine);
      });
      const echarts = require("echarts");
      let domID1 = document.getElementById("equipmentLevel");
      let myCharts = echarts.init(domID1);
      setTimeout(() => {
        domID1.style.width =document.getElementById("bnmkjh").offsetWidth-0+'px'
        domID1.style.height =(window.sessionStorage.getItem("appheight") - 170) / 2 + `px`;
      }, 0);
      this.isLoading = false;
      myCharts.clear();

      let option = {
        title: {
          text: "设备运行情况",
          left: "center",
          subtext: "电压等级统计",
          textStyle: {
            fontSize: yan.EchartObject.titleNamefontSize1,
            color: echartsColor.WordColor,
          },
        },
        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)",
          borderWidth: 0,
        },
        legend: {
          data: ["在线", "离线"],
         left: "10%",
          top: "5%",
          textStyle: {
            color: echartsColor.WordColor,
            rich: {
              a: {
                verticalAlign: "middle",
              },
            },

            padding: [2, 0, 0, 0], //[上、右、下、左]
          },

          itemWidth: 16,
          itemHeight: 16,
          itemGap: 28,
        },
        grid: yan.EchartObject.gridd,
        dataZoom: yan.EchartObject.dataZoom,
        xAxis: {
          name: "电压\n等级",

          type: "category",
          data: level,
          axisLine: {
            lineStyle: {
              color: echartsColor.thread,
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: yan.EchartObject.fontFamily,
              color: echartsColor.WordColor,
              fontSize: yan.EchartObject.xNamefontSize,
            },
          },
        },
        yAxis: {
          name: yan.EchartObject.nuit2,
          nameTextStyle: {
            color: echartsColor.WordColor,
          },
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: echartsColor.thread,
            },
          },
          axisLabel: {
            color: echartsColor.WordColor,
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [echartsColor.thread],
              type: "dashed",
              opacity: 0.5,
            },
          },
        },

        series: [
          {
            name: "在线",
            type: "bar",
            stack: "account",
            barWidth: 20,
            itemStyle: {
              normal: { show: true, color: echartsColor.FigureColor[0] },
            },
            data: onlineData,
          },
          {
            name: "离线",
            type: "bar",
            stack: "account",
            barWidth: 20,
            itemStyle: {
              normal: { show: true, color: echartsColor.FigureColor[2] },
            },
            data: offlineData,
          },
        ],
      };
      myCharts.setOption(option)
window.echartsArr.push(myCharts);
      setTimeout(() => {
        myCharts.resize();
      }, 100);
      let _this = this;
      _this.$erd.listenTo(_this.$refs.vdghff, (element) => {
        _this.$nextTick(() => {
          domID1.style.width =document.getElementById("bnmkjh").offsetWidth-0+'px'
          myCharts.resize();
        });
      });
      window.onresize = function () {
        myCharts.resize();
      };
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../../../../styles/comStyle.less");
::v-deep .el-table .cell {
  text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
.box {
  display: flex;
}
</style>

