<template>
  <div class="MonitoringPointScale">
    <div class="boxT" @mouseleave="handleMouseLeave">
      <img class="imgicon" src="../images/GM.png" alt="" srcset="" />
      <span>监测点规模</span>
      <div class="divSpan">
        <span @click="tab1(0, 1)" :style="{ color: flag == 0 ? '#07d8fd' : '#fff' }">片区</span>
        ∣
        <span @click="tab2(0, 1)" :style="{ color: flag == 1 ? '#07d8fd' : '#fff' }">负荷类型</span>
      </div>
    </div>
    <div class="boxB" ref="electr0_7" v-show="isshow">
      <div id="electr0_7" style="width: 100%; height: 100%" />
      <div class="boxnum" id="boxnum">
        <div class="zong">
          <div class="zong_title" id="zong_title">总数</div>
          <div class="zong_num" id="zong_num">{{ total }}</div>
        </div>
        <div class="add">
          <div class="add_title" id="add_title">本月新增</div>
          <div class="add_num" id="add_num">{{ add }}</div>
        </div>
      </div>
    </div>
    <div class="boxB" ref="electr0_8" v-show="!isshow">
      <div id="electr0_8" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>
<script>
import {
  getMonitoringPointScale,
  getLoadTypeData,
} from "@/api/center/DropEvent.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      isshow: true,
      flag: 0,
      Num: 0,
      zoom: "", //图表焦点校验
      total: "", //图表焦点校验
      add: "", //图表焦点校验
      formData: {
        deptIndex: "",
        searchBeginTime: this.getCurrentMonthFirst(),
        searchEndTime: this.getNowFormatDate(),
      },

      piedata: [
        { value: 1048, name: "安徽省" },
        { value: 735, name: "江苏省" },
        { value: 580, name: "浙江省" },
        { value: 484, name: "云南省" },
        { value: 300, name: "海南省" },
        { value: 300, name: "福建省" },
        { value: 300, name: "广东省" },
      ],
      timeA: null,
      timeB: null,
      calm: false,
      electr7List: [],
      electr8List: [],
      myChart2: null,
    };
  },
  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;
    });
    getMonitoringPointScale(this.formData).then((res) => {
      this.total = res.data.monitorTotalCount;
      this.add = res.data.monitorAddCount;
      this.electr7List = res;

      this.electr7();
    });
    getLoadTypeData(this.formData).then((res) => {
      this.electr8List = res;
    });
    this.info();
  },
  beforeDestroy() {
    for (let i = 1; i < 10000; i++) {
      clearInterval(i);
    }
    for (let i = 1; i < 10000; i++) {
      clearTimeout(i);
    }
  },
  methods: {
    info() {
      this.timeA = setTimeout(() => {
        this.tab2();
      }, 15000);
      this.timeB = setTimeout(() => {
        this.tab1();
        this.info();
      }, 60000);
    },
    handleMouseLeave() {
      if (this.calm) {
        this.calm = false;
        this.$emit("Remove");
        // this.info();
      }
    },
    //获取当月第一天日期
    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;
    },
    fontSize(res) {
      let clientWidth = document.documentElement.clientWidth;
      if (!clientWidth) return;
      let fontSize = clientWidth / 1920;
      return res * fontSize;
    },
    tab1(e, v) {
      this.flag = 0;
      this.electr7();

      this.isshow = true;
      if (e == 0) {
        if (v == 1) {
          this.$emit("control", { name: "MonitoringPointScale", val: 1 });
        }
        clearTimeout(this.timeA);
        clearTimeout(this.timeB);
        this.calm = true;
      }
    },
    tab2(e, v) {
      this.flag = 1;
      this.electr8();
      this.isshow = false;
      if (e == 0) {
        if (v == 1) {
          this.$emit("control", { name: "MonitoringPointScale", val: 2 });
        }

        clearTimeout(this.timeA);
        clearTimeout(this.timeB);
        this.calm = true;
      }
    },
    // 监测点规模片区
    async electr7() {
      let EchartsData = [];

      let arrData = this.electr7List.data.param;
      arrData.forEach((item) => {
        item.name = item.name;
        item.value = item.count;
      });
      EchartsData = arrData;
      let echarts = require("echarts");
      let domID1 = document.getElementById("electr0_7");
      let boxnum = document.getElementById("boxnum");
      let zong_title = document.getElementById("zong_title");
      let zong_num = document.getElementById("zong_num");
      let add_title = document.getElementById("add_title");
      let add_num = document.getElementById("add_num");
      setTimeout(() => {
        (domID1.style.width = this.$refs.electr0_7.offsetWidth + "px"),
          (domID1.style.height = this.$refs.electr0_7.offsetHeight + "px");
        boxnum.style.width = this.$refs.electr0_7.offsetWidth / 5 + "px";
        zong_title.style.fontSize = ".75rem";
        zong_num.style.fontSize = "1.5rem";
        add_title.style.fontSize = ".75rem";
        add_num.style.fontSize = "1.5rem";
      }, 0);
      let color = [
        "#d909e0",
        "#ffe400",
        "#ff9a09",
        "#ef1e5f",
        "#23cbe5",
        "#ec561b",
        "#ffa500",
        "#41E398",
        "#12AFA6",
        "#FF0000",
        "#CC99FF",
        "#0099CC",
        "#FF6699",
        "#00FF7F",
        "#D2691E",
        "#FF6347",
        "#A52A2A",
        "#808080",
        "#DEB887",
        "#FFD700",
        "#556B2F",
        "#7FFF00",
        "#808000",
        "#40E0D0",
        "#00FFFF",
        "#8A2BE2",
        "#EE82EE",
        "#000080",
        "#DC143C",
        "#008080",
        "#8FBC8F",
        "#F5DEB3",
        "#FF7F50",
        "#FFF5EE",
      ];
      let myChart2 = echarts.init(domID1);
      let option = {
        title: {
          text: "片区分布",
          left: "center",
          top: "center",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(8,36,68,.7)",
          color: "#00ffff",
          textStyle: {
            color: "#00ffff",
          },
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: 0,
          top: 5,
          bottom: 10,
          // itemHeight: 8,
          pageIconColor: "white", //激活的分页按钮颜色
          pageTextStyle: {
            color: "#35ffff",
          },
          pageIconInactiveColor: "#CCC", //没激活的分页按钮颜色
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          //设置自定义legend 的重点
          // formatter: function(name) {
          //   // 获取legend显示内容
          //   let data = EchartsData;//这个是展示的数据
          //   let total = 0;
          //   let tarValue = 0;
          //   let value = 0;
          //   for (let i = 0, l = data.length; i < l; i++) {
          //     total += data[i].value;
          //     if (data[i].name == name) {
          //       tarValue = data[i].value;
          //       value = data[i].value;
          //     }
          //   }
          // let p = total== 0? 0 :((tarValue / total) * 100).toFixed(1);
          // return [
          //   "{a|" +
          //     echarts.format.truncateText(
          //       name,
          //       80,
          //       "14px Microsoft Yahei",
          //       "…"//如果宽度超过80会出现...
          //     ) +
          //     "}",
          //   "{b|" + p + "%}",
          //   "{x|" + value + "}"  //a、b、x、跟下面的rich对应
          // ].join(" ");
          // },
        },
        series: [
          {
            type: "pie",
            radius: ["55%", "65%"],
            // center: ['60%', '60%'],
            data: EchartsData.map((item, index) => {
              item.label = {
                color: color[index],
              };
              return item;
            }),
            itemStyle: {
              color: (params) => {
                var index = params.dataIndex;
                var color = [
                  "#d909e0",
                  "#ffe400",
                  "#ff9a09",
                  "#ef1e5f",
                  "#23cbe5",
                  "#ec561b",
                  "#ffa500",
                  "#41E398",
                  "#12AFA6",
                  "#FF0000",
                  "#CC99FF",
                  "#0099CC",
                  "#FF6699",
                  "#00FF7F",
                  "#D2691E",
                  "#FF6347",
                  "#A52A2A",
                  "#808080",
                  "#DEB887",
                  "#FFD700",
                  "#556B2F",
                  "#7FFF00",
                  "#808000",
                  "#40E0D0",
                  "#00FFFF",
                  "#8A2BE2",
                  "#EE82EE",
                  "#000080",
                  "#DC143C",
                  "#008080",
                  "#8FBC8F",
                  "#F5DEB3",
                  "#FF7F50",
                  "#FFF5EE",
                ];
                return color[index];
              },
            },
          },
        ],
      };

      option && myChart2.setOption(option, true);
      //window.echartsArr.push(myChart2);
      setTimeout(function () {
        myChart2.resize();
      }, 0);
    },
    async electr8() {
      let echarts = require("echarts");
      let _this = this;
      let domID1 = document.getElementById("electr0_8");
      setTimeout(() => {
        (domID1.style.width = this.$refs.electr0_8.offsetWidth + "px"),
          (domID1.style.height = this.$refs.electr0_8.offsetHeight + "px");
      }, 0);
      if (_this.myChart2 != null) {
        _this.myChart2.dispose();
        clearInterval(_this.time2);
      }
      _this.myChart2 = echarts.init(domID1);
      // const data = await getLoadTypeData(this.formData);
      let cityList = [];
      let cityData = [];
      
      this.electr8List.data.param.sort((a, b) => b.count - a.count).forEach((item) => {
        if (item.count != 0) {
          cityList.push(item.name);
          cityData.push(item.count);
        }

      });
      // 数据处理
      var charts = {
        // 按顺序排列从大到小
        cityList: cityList,
        cityData: cityData,
      };
      var top10CityList = charts.cityList;
      var top10CityData = charts.cityData;
      var color = [
        "rgba(3,255,238",
        "rgba(218,3,255",
        "rgba(255,248,3",
        "rgba(120,255,3",
        "rgba(255,218,3",
        "rgba(3,204,255",
        "rgba(3,72,255",
        "rgba(255,101,3",
        "rgba(3,255,155",
        "rgba(218,255,3",
        "rgba(135,3,255",
        "rgba(107,146,168",
        "rgba(7,230,163",
        "rgba(52,162,191",
        "rgba(147,112,219",
        "rgba(100,149,237",
        "rgba(72,209,204",
        "rgba(152,251,152",
        "rgba(255,99,71",
        "rgba(188,143,143",
        "rgba(105,105,105",
        "rgba(210,105,30",
        "rgba(255,165,0",
        "rgba(189,183,107",
        "rgba(124,252,0",
        "rgba(0,255,127",
        "rgba(0,139,139",
        "rgba(0,191,255",
        "rgba(225,255,255",
        "rgba(112,128,144",
        "rgba(176,196,222",
        "rgba(123,104,238",
        "rgba(153,50,204",
        "rgba(255,0,255",
        "rgba(255,105,180",
      ];

      // 图表option整理
      let lineY = [];
      var yData = [];
      for (var i = 0; i < charts.cityList.length; i++) {
        yData.push(top10CityData[i] + "个");
        var EchartsData = {
          name: charts.cityList[i],
          color: color[i] + ")",
          value: top10CityData[i],
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: color[i] + ", 0.3)",
                  },
                  {
                    offset: 1,
                    color: color[i] + ", 1)",
                  },
                ],
                false
              ),
              barBorderRadius: 10,
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
        };
        lineY.push(EchartsData);
      }
      let maxValue = 0;

      for (const item of lineY) {
        if (item.value > maxValue) {
          maxValue = item.value;
        }
      }

      var option = {
        // backgroundColor: '#000',
        title: {
          show: false,
        },
        tooltip: {
          showContent: true,
          trigger: "axis",
          backgroundColor: "rgba(8,36,68,.7)",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          color: "#00ffff",
          textStyle: {
            color: "#00ffff",
          },
          // formatter: function (params) {
          //   for (var i = 0; i < params.length; i++) {
          //     if (params[i].name !== "") {
          //       str += params[i].name +":" +
          //         params[i].value +
          //         "<br/>";
          //     }
          //   }
          //   return str;
          // },
        },
        grid: {
          borderWidth: 0,
          top: "10px",
          left: "30px",
          right: "35px",
          bottom: "15px",
        },
        color: color,
        dataZoom: [
          {
            type: "slider",
            show: true,
            // 设置组件控制的y轴
            yAxisIndex: [0, 1],
            left: 5,
            // top: 60,
            // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
            // 也可以用 startValue设置起始值
            start: 0,
            end: lineY.length < 10 ? 100 : 50, //默认为100
            width: 6,
            // height: 450,
            // 组件的背景颜色
            // left: 600, //左边的距离
            // right: 8,//右边的距离
            borderRadius: 5,
            // borderColor: "rgba(43,48,67,0.8)",
            // fillerColor: '#ccc',//滑动块的颜色
            //  backgroundColor: '#33384b',//两边未选中的滑动条片区的颜色
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            // 控制手柄的尺寸
            handleSize: 12,
            // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
            showDataShadow: false,
          },
          {
            type: "inside",
            yAxisIndex: [0, 1],
            start: 1,
            // end: 36,
            // 不按任何功能键，鼠标滚轮能触发缩放
            // zoomOnMouseWheel: false,
            // 不按任何功能键，鼠标移动能触发数据窗口平移
            // moveOnMouseWheel: true,
          },
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                width: 3,
              },
            },
            axisLabel: {
              show: false,
              inside: false,
            },
            data: top10CityList,
          },
          {
            name: "单位:个",
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              inside: false,
              textStyle: {
                color: "#03E9FF",
                fontSize: "10",
                fontFamily: "PingFangSC-Regular",
              },
              // formatter: function (val) {
              //     return `${val}个`;
              //   },
            },
            data: yData,
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        xAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          max: maxValue + 30,
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            textStyle: {
              fontSize: "10",
            },
          },
        },
        series: [
          {
            name: "",
            type: "bar",
            // zlevel: 2,
            barMaxWidth: 20,
            barGap: `10%`,
            data: lineY,
            animationDuration: 1500,
            label: {
              normal: {
                color: "#03FDFF",
                show: true,
                position: "right",
                textStyle: {
                  fontSize: "0.9rem",
                },
                formatter: function (a, b) {
                  return a.name;
                },
              },
            },
          },
        ],
        animationEasing: "cubicOut",
      };

      option && _this.myChart2.setOption(option, true);
      //window.echartsArr.push(myChart2);
      setTimeout(function () {
        _this.myChart2.resize();
      }, 0);
      if (lineY.length >= 10) {
        _this.time2 = setInterval(() => {
          if (option.dataZoom[0].end == 50) {
            option.dataZoom[0].end = 100;
            option.dataZoom[0].start = 50;
          } else if (option.dataZoom[0].end == 100) {
            option.dataZoom[0].end = 50;
            option.dataZoom[0].start = 0;
          } 
          // else if (option.dataZoom[0].end == 75) {
          //   option.dataZoom[0].end = 100;
          //   option.dataZoom[0].start = 75;
          // } else if (option.dataZoom[0].end == 100) {
          //   option.dataZoom[0].end = 25;
          //   option.dataZoom[0].start = 0;
          // }
          _this.myChart2.setOption(option);
          //window.echartsArr.push(_this.myChart2);
        }, 8000);
      }
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../center/css/home.less");

// @import url("../center/css/change.less");
@font-face {
  font-family: sszh;
  src: url("../../center/fonts/sszh.ttf");
  /* IE9+ */
}

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

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

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

    .divSpan {
      padding-left: 5%;
      font-size: 0.85rem;
      color: #fff;
      cursor: pointer;
    }
  }

  .boxB {
    position: relative;
    height: 92%;
    // background-color: rgb(41, 16, 16);
  }

  .boxnum {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100000000;
  }

  .zong_title {
    text-align: center;
  }

  .zong_num {
    font-family: electricFont;
    color: rgb(0, 238, 255);
    text-align: center;
  }

  .add_title {
    color: rgb(0, 238, 255);
    text-align: center;
  }

  .add_num {
    font-family: electricFont;
    color: #00ff7f;
    text-align: center;
  }

  .zong {
    margin-top: 5px;
    border: 1px solid yellow;
    border-radius: 8px;
  }

  .add {
    margin-top: 5px;
    border: 1px solid rgb(0, 238, 255);
    border-radius: 8px;
  }
}
</style>
