<template>
  <div ref="jcwmap" id="jcwditu" style="width: 100%;"></div>
</template>
<script>
import jquery from "jquery";
import { Integrity1, Integrity2, Integrity3 } from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import { getAreaLineDetailData, mapjson } from "@/api/distribution";
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.jcwmap.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('areamontormap').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 50 +'px'
        this.$refs.jcwmap.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      statisticalType: null,
      classificationData: [],
      time: this.timefamt(),
      xdata: [],
      ydata: [],
      formData1:{
        statisticalType:null,
        id:'',
        monitorFlag: 2,
        powerFlag: 2,
        reportFlag: 3,
        deptIndex:JSON.parse(window.sessionStorage.getItem('Info')).deptId    
      },
      isfanhui: false,
      myChart: null,
      mapData: [
        // {
        //   srbName: "南京",
        //   coordY: 118.801847,
        //   coordX: 32.094268,
        //   color: "green",
        //   vlaue: 100,
        //   // srbNO:'4343',
        //   // deptName:'南京',
        //   // srbType:'电力',
        //   // trade:'储能',
        //   // riskLevel:'陈先生',
        //   // inchargeTel:'陈先生',
        //   // inCharge_Safety:'kkjs',
        //   // a_Company:'jdksfj'
        // },
        // {
        //   srbName: "江宁",
        //   coordY: 118.903859,
        //   coordX: 32.195278,
        //   color: "red",
        // },
        // {
        //   srbName: "合肥",
        //   coordY: 117.322553,
        //   coordX: 31.891106,
        //   color: "green",
        // },
        // {
        //   srbName: "北京",
        //   coordY: 116.401314,
        //   coordX: 39.916458,
        //   color: "red",
        // },
        // {
        //   srbName: "重庆",
        //   coordY: 106.551861,
        //   coordX: 29.579873,
        //   color: "red",
        // },
        // {
        //   srbName: "武汉",
        //   coordY: 114.273057,
        //   coordX: 30.626191,
        //   color: "green",
        // },
        // {
        //   srbName: "广州",
        //   coordY: 113.219812,
        //   coordX: 23.163485,
        //   color: "green",
        // },
        // {
        //   srbName: "昆明",
        //   coordY: 102.788544,
        //   coordX: 24.937427,
        //   color: "green",
        // },
      ],
    };
  },
  created() {
    this.getVoltage();
    this.getManufacturer();
    this.getclassificationData();
    this.getLoadType();
    this.queryData();
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('areamontormap').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 50 +'px'
     this.$refs.jcwmap.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];
    },
      //返回
    fanhui() {
      this.isfanhui = false;
      this.queryData();
    },
    queryData() {
      this.formData1.searchBeginTime=this.time[0]
      this.formData1.searchEndTime=this.time[1]
      getAreaLineDetailData(this.formData1).then((res) => {
        this.mapData = res.data.substationDetailVOList;
     
      let _this = this;
      //  _this.mapData
      let mapList = [[], [], []];
      _this.mapData.forEach((item) => {
        if (item.color == "green") {
          mapList[0].push(item);
        } else if (item.color == "red") {
          mapList[1].push(item);
        }
        //  else if (item.color == "blue") {
        //   mapList[2].push(item);
        // }
      });
      //各份的地图json文件
  

      // for (var i = 0; i < allData.length; i++) {
      //   allData[i].value = Math.round(Math.random() * 100);
      // }
      // areaName
      loadMap(
        "./static/mapjson/" +
          JSON.parse(window.sessionStorage.getItem("Info")).areaName +
          ".json",
        ""
      );

      function loadMap(mapCode, name) {
        jquery.get(mapCode, function (data) {
          if (!(data instanceof Object)) {
            loadMap("./static/mapjson/全国.json", "");
            return;
          }
          _this.isLoading = true;
          if (data) {
            if (_this.myChart != null) {
              _this.myChart.dispose();
            }
            let echarts = require("echarts");
            let domID1 = document.getElementById("jcwditu");
           
            _this.myChart = echarts.init(domID1);
            _this.isLoading = false;
            echarts.registerMap(name, data);
            var white = "#fff";
            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) {
                  //console.log(params)
                  var tips = "";
                  if (params.value == 0) {
                    tips =
                      "<font style='color:" + white + "'>暂无数据</font><br/>";
                  } else {
                    tips +=
                      "<font style='color:" +
                      white +
                      "'>" +
                      params.name +
                      "</font><br/>区域暂降评估" +
                      "<font style='color:" +
                      white +
                      "'>:" +
                      params.value +
                      "</font><br/>";
                  }
                  return tips;
                },
              },
              color: ["green", "red", "blue"],
              legend: {
                orient: "vertical",
                left: 26,
                bottom: 40,
                itemWidth: 16,
                itemHeight: 16,
                textStyle:{
                  color:'#fff'
                },

                data: [
                  {
                    name: "正常",
                  },
                  {
                    name: "中断",
                  },
                  {
                    name: "变电站",
                  },
                ],
              },
              // visualMap: {
              //   min: 0,
              //   max: 1000,
              //   left: 26,
              //   bottom: 40,
              //   showLabel: !0,
              //   //text: ["高", "低"],
              //   color: ["green", "red", "blue"],
              //   pieces: [
              //     {
              //       gte: 60,
              //       lte: 100,
              //       label: "正常",
              //     },
              //     {
              //       gt: 0,
              //       lt: 20,
              //       label: "中断",
              //     },
              //     {
              //       gt: 0,
              //       lt: 20,
              //       label: "变电站",
              //     },
              //   ],
              //   show: !0,
              // },
              geo: {
                map: name,
                roam: true,
                // scaleLimit: {
                //     min: 1,
                //     max: 2
                // },
                zoom: 1.5,
                top: 160,
                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: [],
            };
            mapList.forEach((item, ind) => {
              option.series.push({
                type: "scatter",
                mapName: name,
                name: ind == 0 ? "正常" : ind == 1 ? "中断" : "变电站",
                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: item.map(function (itemOpt) {
                  // console.log(itemOpt);
                  return {
                    name: itemOpt.srbName,
                    value: [
                      parseFloat(itemOpt.coordY), //经度
                      parseFloat(itemOpt.coordX), //维度
                    ],

                    itemStyle: {
                      //地图区域的多边形
                      normal: {
                        color: itemOpt.color, //坐标点颜色
                        shadowBlur: 0, // 图形阴影的模糊大小
                        shadowOffsetX: 0, // 阴影水平方向上的偏移距离。
                      },
                    },
                    tooltip: {
                      //仅在 options中最外层的 tooltip.trigger 为 'item'时有效
                      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 += '<tr><td>项目编号：</td><td>' + itemOpt.srbNO + '</td><td>项目名称：</td><td>' + itemOpt.srbName + '</td></tr>';
                        // strHtml += '<tr><td>所属部门：</td><td>' + itemOpt.deptName + '</td></tr>';
                        // strHtml += '<tr><td>项目类型：</td><td>' + itemOpt.srbType + '</td><td>合同金额(万元)：</td><td>' + itemOpt.contractMoney + '</td></tr>';
                        // strHtml += '<tr><td>业务行业：</td><td>' + itemOpt.trade + '</td><td>业务类型：</td><td>' + itemOpt.category + '</td></tr>';
                        // strHtml += '<tr><td>业务等级：</td><td>' + itemOpt.riskLevel + '</td><td>单位负责人：</td><td>' + itemOpt.incharge + '</td></tr>';
                        // strHtml += '<tr><td>单位负责人电话：</td><td>' + itemOpt.inchargeTel + '</td><td>项目负责人：</td><td>' + itemOpt.p_Incharge + '</td></tr>';
                        // strHtml += '<tr><td>安全负责人：</td><td>' + itemOpt.inCharge_Safety + '</td><td>安全负责人电话：</td><td>' + itemOpt.inChargeTel_Safety + '</td></tr>';
                        // strHtml += '<tr><td>甲方单位：</td><td>' + itemOpt.a_Company + '</td><td>施工地点：</td><td>'+itemOpt.srbAddress+'</td></tr>';
                        // strHtml += '</table>';
                        strHtml += "</div>";
                        return strHtml;
                      },
                    },
                  };
                }),
                //   data: allData,
              });
            });

            _this.myChart.setOption(option)
window.echartsArr.push(_this.myChart);
            setTimeout(() => {
              _this.myChart.resize();
            }, 200);
            var timeFn = null;
            //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
            _this.myChart.on("click", function (params) {
              clearTimeout(timeFn);
              //由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
              timeFn = setTimeout(function () {
                var name = params.name; //地区name
               var mapCode = './static/mapjson/'+name+'.json'; //地区的json数据
                if (!mapCode) {
                  // alert("无此区域地图显示");
                  return;
                }
                if (name != "全国") {
                  _this.isfanhui = true;
                }
                loadMap(mapCode, name);
              }, 250);
            });
            // 绑定双击事件，返回全国地图
            _this.myChart.on("dblclick", function (params) {
              //当双击事件发生时，清除单击事件，仅响应双击事件
              clearTimeout(timeFn);
              _this.isfanhui = false;

              //返回全国地图
              loadMap("./static/mapjson/全国.json", "");
            });
          } else {
            //  alert("无法加载该地图");
          }
        });
      }
    
       });
    },
    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;
    },
    // jcwditu() {
    //   const echarts = require("echarts");
    //   var myChartes = echarts.init(document.getElementById("jcwditu"));
    //   let mapname = require("@/assets/js/zhonguo.json");
    //   myChartes.clear();
    //   echarts.registerMap("中国", mapname);
    //   var option = {
    //     title: {
    //       text: "监测网分布区域图",
    //       left: "center",
    //       top: "5%",
    //       textStyle: {
    //         color: "#fff",
    //       },
    //     },
    //     visualMap: {
    //       min: 0,
    //       max: 1000,
    //       left: 26,
    //       bottom: 40,
    //       showLabel: !0,
    //       textStyle: {
    //         color: "#fff",
    //       },
    //       //text: ["高", "低"],
    //       pieces: [
    //         {
    //           gte: 60,
    //           lte: 100,
    //           label: "正常",
    //           color: "green",
    //         },
    //         {
    //           gt: 0,
    //           lt: 20,
    //           label: "中断",
    //           color: "red",
    //         },
    //         {
    //           gt: 0,
    //           lt: 20,
    //           label: "变电站",
    //           color: "blue",
    //         },
    //       ],
    //       show: !0,
    //     },
    //     geo: {
    //       type: "map",
    //       map: "中国",
    //       roam: true,
    //       top: "25%",
    //       zoom: 1.8,
    //       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: this.dataList,
    //       //   },
    //     ],
    //   };
    
    //   setTimeout(() => {
    //     myChartes.resize();
    //   }, 100);
    //   this.loadingd = false;
    //   let _this = this;
    //   _this.$erd.listenTo(_this.$refs.jcwmap, (element) => {
    //     _this.$nextTick(() => {
    //       myChartes.resize();
    //     });
    //   });
    //   window.onresize = function () {
    //     myChartes.resize();
    //   };
    // },
  },
};
</script>
