<template>
  <div ref="kjff" id="qualifiedechart" style="width: 100%"></div>
</template>
<script>
import yan from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import api from "@/api/integraliy/integraliy";
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.kjff.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("dstortionratest").style.height;
          let strsec = str.split("p");
          let height = parseInt(strsec) - 50 + "px";
          this.$refs.kjff.style.height = height;
        }, 200);
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      statisticalType: null,
      classificationData: [],
      time: this.timefamt(),
      formData1: {
        statisticalType: null,
        scale: null,
        manufacturer: null,
        loadType: null,
        monitorFlag: 2,
        powerFlag: 2,
        timeFlag: 1,
        deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
      },
      voltageleveloption: [],
      terminaloption: [],
      interfereoption: [],
      classificationData: [],
      xdata: [],
      ydata: [],
    };
  },
  created() {
    this.getVoltage();
    this.getManufacturer();
    this.getclassificationData();
    this.getLoadType();
    this.queryData();
  },
  mounted() {
    setTimeout(() => {
      let str = document.getElementById("dstortionratest").style.height;
      let strsec = str.split("p");
      let height = parseInt(strsec) - 50 + "px";
      this.$refs.kjff.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];
      api.getTHDistortionCensus(this.formData1).then((res) => {
        //this.xdata = res.data.type;
        var arr = [];
        if (res.data.type.length == 0 && res.data.single.length == 0) {
          this.xdata = res.data.type;
          this.ydata1 = res.data.single;
        } else {
          this.xdata = res.data.type;
          var arr = [];
          if (res.data.single) {
            for (var j = 0; j < res.data.single.length - 1; j++) {
              for (var i = 0; i < res.data.single.length - 1 - j; i++) {
                // 判断，如果数组中的当前一个比后一个大，那么两个交换一下位置
                if (arr[i] > arr[i + 1]) {
                  var tmp = arr[i];
                  res.data.single[i] = arr[i + 1];
                  res.data.single[i + 1] = tmp;
                }
              }
            }
            arr = res.data.single;
            for (var i = 0; i < arr.length; i++) {
              if (arr[i] == 0 || arr[i] == 3.14159) {
                arr[i] = arr[arr.length - 1] * 0.03;
                this.mindata = arr[arr.length - 1] * 0.03;
              }
            }
            this.ydata1 = arr;
          }
        }
        this.ydata = arr;
        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() {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("qualifiedechart"));
      myChartes.clear();
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      let this2 = this;
      var option = {
        title: {
          text: this.title,
          left: "center",
          //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++) {
              if (params[i].value == 3) {
                tips += params[i].seriesName + ":暂无数据<br/>";
              } else {
                tips += params[i].seriesName + ":" + params[i].value + "%<br/>";
              }
            }
            return tips;
          },
        },
        color:[echartsColor.FigureColor[0]],
        legend: {
          data: ["总畸变率"],
          color: [echartsColor.FigureColor[0]],
          right: "20px",
          top: "-5px",
          textStyle: {
            color: "#fff",
          },
        },
        grid: yan.EchartObject.gridf,
        xAxis: [
          {
            name: yan.EchartObject.area,
            type: "category",
            data: this.xdata,
            splitLine: {
              show: false,
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                fontFamily: "dinproRegular",
                color: "#fff",
                fontSize: yan.EchartObject.xNamefontSize,
              },
              rotate: 0,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
              // symbol: ["none", "arrow"],
            },
          },
        ],

        yAxis: [
          {
            name: yan.EchartObject.nuit1,
            type: "value",
            nameTextStyle: {
              color: "#fff",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              color: "#fff",
              fontSize: yan.EchartObject.xNamefontSize,
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: "#fff",
                type: "dashed",
                opacity: 0.5,
              },
            },
          },
        ],
        dataZoom: yan.EchartObject.dataZoom,
        series: [
          {
            name: "总畸变率",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            type: "bar",
            label: {
              normal: {
                // show: true,
                // position: 'top'
              },
            },
            itemStyle: {
              normal: {
                // 随机显示
                color: function (params) {
                  if (params.value == this2.mindata) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [{ offset: 1, color: "#ccc" }],
                      false
                    );
                  } else {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [{ offset: 1, color: echartsColor.FigureColor[0] }],
                      false
                    );
                  }
                },
              },
            },

            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.kjff, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
