<template>
  <div class="box">
    <div class="boxTop">
      <img class="img" src="../images/GM.png" alt="" srcset="" />
      <span>功率负荷排名</span>
    </div>
    <div class="boxBot" ref="Echarts">
      <div id="echart1" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>
<script>
import { getPowerOrder } from "@/api/center/DropEvent.js";

export default {
  components: {},
  props: {},
  data() {
    return {
      zoom: undefined, //图表焦点校验
      h: undefined,
      isLoading: false,
      total: 0,
      myChart: null,
      time: null,
      formData: {
        deptIndex: "",
        limit: 20,
        searchBeginTime: this.getCurrentMonthFirst(),
        searchEndTime: this.getNowFormatDate(),
      },
    };
  },
  created() {
    this.formData.deptIndex = JSON.parse(
      window.localStorage.getItem("adminInfo")
    ).deptId;
  },

  mounted() {
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
    });
    this.$nextTick(() => {
      this.province();
      setInterval(() => {
        clearInterval(this.time);
        this.province();
      }, 60000 * 5);
    });
  },

  methods: {
    //获取当月第一天日期
    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 province() {
      this.isLoading = true;
      var xData = [];
      var yData = [];
      const data = [];
      await getPowerOrder(this.formData).then((res) => {
        res.data.sort((a, b) => b.max - a.max).forEach((item) => {
          //   this.total = this.total + item.dataStatis;
          //   if( i != 0){
          //     item.timeId = item.timeId.slice(5)
          //   }
          xData.push(item.name);
          yData.push(Number(item.max).toFixed(2));
        });
      });
      let _this = this;
      let echarts = require("echarts");
      if (_this.myChart != null) {
        _this.myChart.dispose();
      }
      let domID1 = document.getElementById("echart1");
      setTimeout(() => {
        (domID1.style.width = this.$refs.Echarts.offsetWidth + "px"),
          (domID1.style.height = this.$refs.Echarts.offsetHeight + "px");
      }, 0);
      _this.myChart = echarts.init(domID1);
      this.isLoading = false;
      let option = {
        tooltip: {
          showContent: true,
          trigger: "axis",
          backgroundColor: "rgba(8,36,68,.7)",
          color: "#00ffff",
          textStyle: {
            color: "#00ffff",
          },
          formatter: function (params) {
            var tips = "";
            // tips += params[0].name + "</br/>";
            tips += '监测点' + "：" + params[0].name + "</br/>";
            for (var i = 0; i < params.length; i++) {
              if (params[i].value == 3.14159) {
                tips += '功率' + "：" + params[i].name + ":" + 0 + "<br/>";
              } else {
                tips += '功率' + "：" + params[i].value + "kW<br/>";
              }
            }
            return tips;
          },
        },
        textStyle: {
          color: "#00ffff",
          fontSize: 12,
        },
        legend: {
          top: "4%",
          left: "center",
          itemWidth: 13,
          itemHeight: 13,
          itemStyle: {
            color: "#00ffff",
          },
          icon: "rect",
          padding: 0,
          textStyle: {
            color: "#03E9FF",
            fontSize: 12,
            padding: [2, 0, 0, 0],
          },
        },
        grid: {
          top: "40px", // 等价于 y: '16%'
          left: "50px",
          right: "55px",
          bottom: "50px",
        },
        xAxis: {
          name: "监测点",
          nameTextStyle: {
            color: "#07FCF0",
            // top:'5%',
            fontSize: 12,
          },
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#00ffff",
              width: 1,
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: "dinproRegular",
              color: "#00ffff",
            },
            rotate: 45,
            formatter: function (value) {
              if (value.length > 5) {
                return `${value.slice(0, 5)}...`;
              }
              return value;
            },
          },
          data: xData,
        },
        yAxis: [
          {
            axisLine: {
              show: true,
              lineStyle: {
                color: "#00ffff",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#00ffff",
              },
            },
            splitLine: {
              //分割线配置
              lineStyle: {
                type: "dashed",
                color: "#00ffff",
              },
            },
          },
          {
            name: "单位:kW",
            nameTextStyle: {
              color: "#00ffff",

              fontSize: 12,
            },
            position: "right",
            //right:'15%',
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],

        series: [
          {
            name: "功率负荷排名",
            type: "bar",
            barMaxWidth: 20,
            label: {
              show: true,
              // position: "top",
              // distance: 5,
              color: "#00ffff",
              formatter: function (params) {
                var val = "";
                if (params.value == 5) {
                  val = 0;
                }
                return val;
              },
              fontSize: 12,
            },
            data: yData,
            itemStyle: {
              normal: {
                type: "linear",
                global: false,
                color: function (params) {
                  if (params.value != 3.14159) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "#0b9eff",
                      },
                      {
                        offset: 1,
                        color: "#ffcc00",
                      },
                    ]);
                  } else if ((params.value = 3.14159)) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 1,
                        color: "#ccc",
                      },
                    ]);
                  }
                },
              },
            },
          },
        ],
      };
      option && _this.myChart.setOption(option, true);
      //window.echartsArr.push(_this.myChart);
      setTimeout(function () {
        _this.myChart.resize();
        let app = {
          currentIndex: -1,
        };

        _this.time = setInterval(function () {
          var dataLen = option.series[0].data.length;

          // 取消之前高亮的图形
          _this.myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: app.currentIndex,
          });
          app.currentIndex = (app.currentIndex + 1) % dataLen;
          //console.log(app.currentIndex);
          // 高亮当前图形
          _this.myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: app.currentIndex,
          });
          // 显示 tooltip
          _this.myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: app.currentIndex,
          });
        }, 2000);
      }, 0);
    },
  },
  beforeDestroy() {
    for (let i = 1; i < 10000; i++) {
      clearInterval(i);
    }
  },
};
</script>
<style lang="scss" scoped>
// @import url("../css/home.less");
@font-face {
  font-family: sszh;
  src: url("../fonts/sszh.ttf");
  /* IE9+ */
}

.box {
  width: 100%;
  height: 100%;

  .boxTop {
    position: relative;
    display: flex;
    align-items: center;
    height: 8%;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-size: 0.85rem;
    line-height: 8%;
    letter-spacing: 1px;
    color: #07d8fd;
    cursor: pointer;
    background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;

    .img {
      height: 100%;
      padding: 0 1.5%;
      cursor: pointer;
    }

    .total {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 0.85rem;
      color: rgb(0, 255, 0);
      transform: translate(-50%, -50%);

      span {
        font-family: electricFont;
        font-size: 1.3rem;
        color: #07d8fd;
      }
    }
  }

  .boxBot {
    height: 90%;

    // background-color: rgb(41, 16, 16);
  }
}
</style>
