<template>
    <div ref="glfb" id="tenharmonictu" style="width: 100%;"></div>
  </template>
  <script>
  import yan from "@/assets/commjs/color";
  import { dicData } from "@/assets/commjs/dictypeData";
  import { getProbabilityDistribution } from "@/api/monitoringpointStatistics/echart";
  import api from "@/api/harmonic/harmonic";
  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.glfb.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('tenharmonictabletu').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 50 +'px'
        this.$refs.glfb.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
    data() {
      return {
        tableData: [],
        statisticalType: null,
        classificationData: [],
        time: this.timefamt(),
        //暂降类型模拟数据
        eventList: {},
        xdata:[],
        ydata:[],
        formData:{
        deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId,   
        id: "",
        monitorFlag: 2,
        powerFlag: 2,
        searchBeginTime: "",
        searchEndTime: "",
        statisticalType: [],
        }
      };
    },
    created() {
      this.getIndexType();
      this.queryData();
    },
    mounted() {
      setTimeout(()=>{
    let str = document.getElementById('tenharmonictabletu').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 50 +'px'
     this.$refs.glfb.style.height =  height
    },200)
    },
    methods: {
      queryData() {
        api.getLineRank(this.formData).then((res) => {
        if (res.code == "A0000") {
          var data = res.data;
          var xarr = [];
          var yarr = [];
          data.forEach((element) => {
            xarr.push(element.name);
            yarr.push(element.overDays);
          });
          this.xdata = xarr;
          this.ydata = yarr;
        }
        this.eventChance2();
      });
      },
  
      getIndexType() {
        var code = "Indicator_Type";
        this.classificationData = dicData(code, [
          "PLPC",
          "DYPC",
          "SXDYBPHD",
          "CSSB",
          "FXDL",
          "JXBDY",
        ]);
        this.formData.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 today = year + "-" + month + "-" + day;
        var today2 = year + "-01-01";
        arr.push(today);
        arr.push(today2);
        return arr;
      },
      eventChance2() {
        var eventValue = this.eventList.eventvalue;
      var pereventValue = this.eventList.pereventvalue;
        const echarts = require("echarts");
        var myChartes = echarts.init(document.getElementById("tenharmonictu"));
        myChartes.clear();
        let echartsColor = JSON.parse(window.localStorage.echartsColor);
      var option = {
        title: {
          //text: this.title,
          //  subtext: '单位(污染值)'
        },
        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)",
          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;
          },
        },
        grid: yan.EchartObject.gridf,
        dataZoom: yan.EchartObject.dataZoom,
        xAxis: [
          {
            name: "监测点",
            nameTextStyle: {
              color: '#fff',
            },
            type: "category",
            data: this.xdata,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: true,
              //symbol: ["none", "arrow"],
              lineStyle: {
              color: "#fff",
            },
            },
            axisLabel: {
              textStyle: {
                fontFamily: "dinproRegular",
                color: "#fff",
              },
              formatter(value) {
                return `${value.slice(0, 6)}...`;
              },
              rotate: 0,
            },
          },
        ],
      
        yAxis: {
          name: "超标天数",
          nameTextStyle: {
            color: "#fff",
          },
          type: "value",
          min: 0,
          //max:500,
          //interval: 20,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          //  symbol: ["none", "arrow"],
          },
          splitLine: {
              show: true,
              
              lineStyle: {
              color: "#ccc",
              type:'dashed',
            },
            },
        },
        series: [
          {
            name: "超标天数",
            barMaxWidth: 30,
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle:{
                  color:'#fff'
                }
              },
            },
            itemStyle: {
              normal: {
                color: "#0099CC",
              },
            },

            data: this.ydata,
          },
        ],
      };
        myChartes.setOption(option)
window.echartsArr.push(myChartes);
        setTimeout(() => {
          myChartes.resize();
        }, 100);
        this.loadingd = false;
        let _this = this;
        _this.$erd.listenTo(_this.$refs.glfb, (element) => {
          _this.$nextTick(() => {
            myChartes.resize();
          });
        });
        window.onresize = function () {
          myChartes.resize();
        };
      },
    },
  };
  </script>
  