<template>
  <div ref="areaMontor" id="montorEcharts" style="width: 100%;"></div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import { getAreaLineDetailData } from "@/api/distribution";
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.areaMontor.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("areamontortu").style.height;
          let strsec = str.split("p");
          let height = parseInt(strsec) - 50 + "px";
          this.$refs.areaMontor.style.height = height;
        }, 200);
      } else {
        return;
      }
    },
  },
  data() {
    return {
      classificationData: [],
      distributionData: [],
      time: this.timefamt(),
      formData: {
        deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
        monitorFlag: 2,
        powerFlag: 2,
        serverName: "event-boot",
        statisticalType: {},
      },
    };
  },
  created() {
    this.getclassificationData();
    this.queryData();
  },
  mounted() {
    setTimeout(() => {
      let str = document.getElementById("areamontortu").style.height;
      let strsec = str.split("p");
      let height = parseInt(strsec) - 50 + "px";
      this.$refs.areaMontor.style.height = height;
    }, 200);
  },
  methods: {
    //获取统计类型
    getclassificationData() {
      var code = "Statistical_Type";
      this.classificationData = dicData(code, ["Report_Type"]);
      this.formData.statisticalType = this.classificationData[0];
    },
    queryData() {
      //   this.formData1.searchBeginTime = this.time[0];
      //   this.formData1.searchEndTime = this.time[1];
      getAreaLineDetailData(this.formData).then((res) => {
        let table = [];
        for (var i = 0; i < res.data.areaValue.length; i++) {
          let t = {
            qy: res.data.areaValue[i][0],
            jcd: res.data.areaValue[i][1],
            zc: res.data.areaValue[i][2],
            zd: res.data.areaValue[i][3],
          };
          table.push(t);
        }
        this.distributionData = table;
        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() {
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      let xdata = [];
      let ydata = [];
      this.distributionData.forEach((item) => {
        xdata.push(item.qy);
        ydata.push(item.jcd);
      });
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("montorEcharts"));
      myChartes.clear();
      //let echartsColor = JSON.parse(window.localStorage.echartsColor);
      let option = {
        title: {
          text: JSON.parse(window.sessionStorage.getItem("Info")).areaName,
          left: "center",
          textStyle: {
            fontWeight: "400",
            color: "#fff",
            fontSize: 16,
          },
        },
        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,
        },
        grid: yan.EchartObject.gridf,
        //   legend: {
        //     data: ['暂降次数',],
        //     icon: 'rect',
        //       top: 10,
        //       left: '7%',
        //       itemGap: 20,
        //       itemWidth: 12,
        //       itemHeight: 8,
        //   },
        xAxis: [
          {
            name:yan.EchartObject.area,
            type: "category",
            data: xdata,
            axisLine: {
              show: true,
              lineStyle: {
              color: "#fff",
            },
              symbol: ["none", "arrow"],
            },
            axisLabel: {
              textStyle: {
              fontFamily:yan.EchartObject.fontFamily,
              color: "#fff",
              fontSize:yan.EchartObject.xNamefontSize
            },
            },
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: yan.EchartObject.monitoring1,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontFamily:yan.EchartObject.fontFamily,
                color: "#fff",
                fontSize:yan.EchartObject.xNamefontSize
                //fontSize:10
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: "#fff",
                type: "dashed",
                opacity: 0.5,
              },
            },
          },
        ],
        dataZoom: yan.EchartObject.dataZoom,
        series: [
          {
            //   name: '暂降次数',
            type: "bar",
            data: ydata,
            barMaxWidth:  yan.EchartObject.barMaxWidth,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: echartsColor.FigureColor[0], // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: echartsColor.FigureColor[0], // 100% 处的颜色
                    },
                  ],
                  false
                ),

                shadowBlur: 0,
              },
            },
            label: {
              normal: {
                show: true,
                lineHeight: 10,
                formatter: "{c}",
                position: "top",
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.areaMontor, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
