<template>
  <div ref="xbmap" id="xbditu" style="width: 100%; height: 500px"></div>
</template>
<script>
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import api from '@/api/pollution/pollution'
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.xbmap.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('powerqualitymap').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 50 +'px'
        this.$refs.xbmap.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      statisticalType: null,
      classificationData: [],
      time: this.timefamt(),
      xdata: [],
      ydata: [],
      mapData: [],
      formData:{
        statisticalType:null,
        id:'',
        monitorFlag: 2,
        powerFlag: 2,
        reportFlag: 3,
        deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId    
      },
      fff:null,
     // dataList:[],
     dataList: [
              // {name: "南海诸岛", value:1},
              // {name: '北京市',value: 0.1},
              // {name: '天津市',value: 2},
              // {name: '上海市',value: 2.6},
              // {name: '重庆市',value: 1.5},
              // {name: '河北省',value: 1.3},
              // {name: '河南省',value: 1.2},
              // {name: '云南省',value: 0.8},
              // {name: '辽宁省',value: 0},
              // {name: '黑龙江省',value: 0},
              // {name: '湖南省',value: 1.2},
              // {name: '安徽省',value: 2.5},
              // {name: '山东省',value: 1.3},
              // {name: '新疆',value: 1.2},
              // {name: '江苏省',value: 1.5},
              // {name: '浙江省',value: 1.8},
              // {name: '江西省',value: 1.2},
              // {name: '湖北省',value: 0.3},
              // {name: '广西省',value: 0.6},
              // {name: '甘肃省',value: 0},
              // {name: '山西省',value: 0.56},
              // {name: '内蒙古',value: 37},
              // {name: '陕西省',value: 0.56},
              // {name: '吉林省',value: 0.4},
              // {name: '福建省',value: 1.2},
              // {name: '贵州省',value: 1.5},
              // {name: '广东省',value: 1.8},
              // {name: '青海省',value: 1.2},
              // {name: '西藏',value: 0.6},
              // {name: '四川省',value: 54},
              // {name: '宁夏',value: 1.5},
              // {name: '海南省',value: 1.6},
              // {name: '台湾省',value: 1.7},
              // {name: '香港',value: 1.2},
              // {name: '澳门',value: 0.56}
            ],
    };
  },
  created() {
    this.getIndexType();
    this.queryData();
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('powerqualitymap').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 50 +'px'
     this.$refs.xbmap.style.height =  height
    },200)
  },
  methods: {
    queryData() {
      this.formData.searchBeginTime=this.time[0]
      this.formData.searchEndTime=this.time[1]
      api.deptSubstationRelations(this.formData).then(res=>{
           if(res.code=='A0000'){
             let data = res.data
             let arr =[]
             let arr1=[]
             data.forEach(item=>{
               // let name=item.name.slice(0,item.name.length-1)
                let p={
                   name: item.name,
                   value:item.data
                }
                arr.push(p)
                let d = item.name.split("\n");
               let p1 = {
                name: d[0],
                value: item.data,
               };

            arr1.push(p1);
             })
             this.dataList = arr1
             this.cbtjechart(arr1);
            // console.log("测试数组",arr)
          }
      });
      

      // });
    },
    //字典获取数据指标类型
    getIndexType() {
      var code = "Pollution_Statis";
      this.classificationData = dicData(code, [
        "I_Neg",
        "V_Inharm",
        "V_Dev",
        "V_Unbalance",
        "Plt",
        "Freq_Dev",
      ]);
      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 time1 = year + "-" + month + "-01";
      arr.push(time1);
      var time2 = year + "-" + month + "-" + day ;
      arr.push(time2);
      return arr;
    },
    cbtjechart(arr) {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("xbditu"));
      let mapname = require("@/assets/js/zhonguo.json");
      myChartes.clear();
      echarts.registerMap("中国", mapname);
      var option = {
        title: {
          text: "电能质量污区图",
          left: "center",
          top: "5%",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          // triggerOn: "click",
          // formatter: function(e, t, n) {
          //     return "<br />" + e.name + "<br/>区域暂降评估等级 :" + e.value
          // }
          trigger: "item",
          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 = "";

            if (params.value === -1 || window.isNaN(params.value)) {
              tips =
                "<font style='color:#fff'>" +
                params.name +
                "</font><br/>区域污染评估:" +
                "<font style='color:#fff'><font style='color:#fff'>暂无数据</font><br/>";
            } else if (params.value === 0.1 || window.isNaN(params.value)) {
              tips =
                "<font style='color:#fff'>" +
                params.name +
                "</font><br/>区域污染评估:" +
                "<font style='color:#fff'><font style='color:#fff'>暂无数据</font><br/>";
            } else {
              tips +=
                "<font style='color:#fff'>" +
                params.name +
                "</font><br/>区域污染评估" +
                "<font style='color:#fff'>：" +
                params.value +
                "</font><br/>";
            }
            return tips;
          },
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: 26,
          bottom: 40,
          showLabel: !0,
          textStyle: {
            color: "#fff",
          },
          //text: ["高", "低"],
          pieces: [
            {
              gt: 2,
              lt: 10000,
              label: "重度污染",
              color: "#990000",
            },
            {
              gte: 1.2,
              lt: 1.6,
              label: "轻度污染",
              color: "#FF9900",
            },
            {
              gt: 1.6,
              lt: 2,
              label: "中度污染",
              color: "#FF3300",
            },
            {
              gte: 1,
              lte: 1.2,
              label: "轻微污染",
              color: "#0099FF",
            },
            {
              gte: 0.1,
              lte: 1,
              label: "无污染",
              color: "#00CC00",
            },
            {
              gte: -1,
              lte: 0.05,
              label: "无数据",
              color: "#ccc",
            }
          ],
          show: !0,
        },
        geo: {
          type: "map",
          map: "中国",
          roam: true,
          top: "25%",
          zoom: 1.6,
          
          label: {
            normal: {
              show: true,
              fontSize: "14",
              color: "#fff",
            },
          },
          itemStyle: {
            normal: {
              color: "rgba(51, 69, 129, .8)", //地图背景色
              borderColor: "#999999",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 135, 148, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            emphasis: {
              areaColor: "#ccc",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0,
            },
          },
        },
        series: [
          // {
          //   type: "scatter",
          //   mapName: name,
          //   coordinateSystem: "geo",
          //   geoIndex: 0,
          //   animation: false, //坐标点是否显示动画
          //   roam: true,
          //   selectedMode: "false", //是否允许选中多个区域
          //   symbol: "pin",
          //   rippleEffect: {
          //     brushType: "fill", // stroke|fill
          //   },
          //   symbolSize: function (val, params) {
          //     return 30;
          //   },
          //   label: {
          //     normal: {
          //       show: false,
          //     },
          //     emphasis: {
          //       show: false,
          //     },
          //   },
          //   data: this.mapData.map(function (itemOpt) {
          //     return {
          //       name: itemOpt.srbName,
          //       value: [
          //         parseFloat(itemOpt.coordY), //经度
          //         parseFloat(itemOpt.coordX), //维度
          //       ],

          //       itemStyle: {
          //         //地图区域的多边形
          //         normal: {
          //           color: itemOpt.color, //坐标点颜色
          //           shadowBlur: 0, // 图形阴影的模糊大小
          //           shadowOffsetX: 0, // 阴影水平方向上的偏移距离。
          //         },
          //       },
          //       tooltip: {
          //         position: "bottom", //提示框位置,仅在 options中最外层的 tooltip.trigger 为 'item'时有效
          //         formatter: function (params, ticket, callback) {
          //           var strHtml = "<div>";
          //           strHtml += '<table class="table">';
          //           strHtml +=
          //             '<tr><td colspan="4" style="text-align:center">' +
          //             itemOpt.srbName +
          //             "</td></tr>";
          //           strHtml += "</div>";
          //           return strHtml;
          //         },
          //       },
          //     };
          //   }),
          // },
          {
            name: "综合评估为",
            type: "map",
            geoIndex: 0,
            data: arr,
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.xbmap, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
