<template>
  <div>
    <div class="hello" id="newmap">
    </div>
    <el-dialog :visible.sync="dialogVisible" width="90%" :show-close="false">
      <template slot="title">
        <div class="el-dialog__title">
          <div>事件详情</div>
          <i @click="dialogVisible = false" class="el-icon-close"></i>
        </div>
      </template>
      <div>
        <el-descriptions :border="false" :column="1" size="mini">
          <el-descriptions-item label="事件编号">2023073024252</el-descriptions-item>
          <el-descriptions-item label="事件标题">下水道结冰堵塞</el-descriptions-item>
          <el-descriptions-item label="事件类型">城市安全类</el-descriptions-item>
          <el-descriptions-item label="事件地址">XXXXXXXXXXXXXXXXXXXX</el-descriptions-item>
          <el-descriptions-item label="发生时间">2023-07-30</el-descriptions-item>
          <el-descriptions-item label="所属网格">网格2</el-descriptions-item>
        </el-descriptions>
      </div>
      <template slot="footer">
        <div class="my-el-dialog__footer">
          <el-button type="primary" @click="dispose">去处理</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import L from "leaflet"
import "@/utils/lib/leaflet.ChineseTmsProviders.js";
import oneGJ02 from "@/utils/lib/jiangningqu/1GJ02(1).json"; // 一中队
import twoGJ02 from "@/utils/lib/jiangningqu/1GJ02(2).json"; // 二中队
import threeGJ02 from "@/utils/lib/jiangningqu/1GJ02(3).json"; // 三中队
import fourGJ02 from "@/utils/lib/jiangningqu/1GJ02(4).json"; // 四中队

import ruanjianyuan from "@/utils/lib/jiangningqu/1GJ02(5).json"; // 软件园
import konggang from "@/utils/lib/jiangningqu/1GJ02(6).json"; // 空港开发区
import onLine from "@/utils/lib/jiangningqu/onLine.json";
export default {
  name: 'HelloWorld',
  data(){
    return {
      map:null,
      basemap:null,
      mapLayers:{
        mapLayer1:null,
        mapLayer2:null,
        mapLayer3:null,
      },
      dialogVisible:false,
      onLoad:false,
    }
  },
  props: {
    msg: String
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap();
    });
    window.addEventListener('message',(e)=>{
      console.log(e,"e");
      // if(e.data)
      this.onLoad = true;
    },false)
  },
  methods:{
    initMap() {
      this.map = L.map("newmap", {
        // crs: L.CRS.Baidu,
        center: [31.953418, 118.850621],
        zoom: 10,
        attributionControl: false,
        zoomControl: false,
      });
      // 电子底图
      this.basemap = L.tileLayer.chinaProvider("GaoDe.Normal.Map", {
        maxZoom: 18,
        minZoom: 5,
      });

      this.map.addLayer(this.basemap);

      this.map.createPane("mapLayer1");
      this.map.getPane("mapLayer1").style.zIndex = 501;
      this.map.getPane("mapLayer1").style.pointerEvents = "none";

      this.map.createPane("mapLayer2");
      this.map.getPane("mapLayer2").style.zIndex = 502;
      this.map.getPane("mapLayer2").style.pointerEvents = "none";

      this.map.createPane("mapLayer3");
      this.map.getPane("mapLayer3").style.zIndex = 502;
      this.map.getPane("mapLayer3").style.pointerEvents = "none";

      this.map.createPane("mapLayer4");
      this.map.getPane("mapLayer4").style.zIndex = 502;
      this.map.getPane("mapLayer4").style.pointerEvents = "none";

      this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.map);
      this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.map);
      this.mapLayers.mapLayer3 = L.featureGroup().addTo(this.map);
      // 中队
      this.zhongdui();
      // 空港
      this.konggangMap();
      // 软件园
      this.ruanjianyuanMap();
      // 点位信息
      this.eventPoint();
      // console.log(onLine,"在线情况");
    },
    // 中队
    zhongdui() {
      let one = L.geoJSON(oneGJ02, {
        pane: "mapLayer2",
        style: function (feature) {
          return {
            color: "#1E83EB",
            weight: 2,
            fillColor: "#1E83EB",
            fillOpacity: 0.2,
          };
        },
        onEachFeature: (feature, layer) => {
          // console.log(feature,'feature');
          let bounds = layer._bounds;
          let center = bounds.getCenter();
          let myIcon = L.divIcon({
            className: "region-name3",
            html: feature.properties.NAME,
            iconSize: [80, 24],
            iconAnchor: [20, 0],
          });
          // 多边形上的标记点;
          // L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
          L.marker(center, {
            pane: "mapLayer3",
            icon: myIcon,
          }).addTo(this.mapLayers.mapLayer3);
        },
      }).addTo(this.mapLayers.mapLayer2);
      let two = L.geoJSON(twoGJ02, {
        pane: "mapLayer2",
        style: function (feature) {
          return {
            color: "#1E83EB",
            weight: 2,
            fillColor: "#1E83EB",
            fillOpacity: 0.2,
          };
        },
        onEachFeature: (feature, layer) => {
          // console.log(feature,'feature');
          let bounds = layer._bounds;
          let center = bounds.getCenter();
          let myIcon = L.divIcon({
            className: "region-name3",
            html: feature.properties.NAME,
            iconSize: [80, 24],
            iconAnchor: [20, 0],
          });
          // 多边形上的标记点;
          // L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
          L.marker(center, {
            pane: "mapLayer3",
            icon: myIcon,
          }).addTo(this.mapLayers.mapLayer3);
        },
      }).addTo(this.mapLayers.mapLayer2);
      let three = L.geoJSON(threeGJ02, {
        pane: "mapLayer2",
        style: function (feature) {
          return {
            color: "#1E83EB",
            weight: 2,
            fillColor: "#1E83EB",
            fillOpacity: 0.2,
          };
        },
        onEachFeature: (feature, layer) => {
          // console.log(feature,'feature');
          let bounds = layer._bounds;
          let center = bounds.getCenter();
          let myIcon = L.divIcon({
            className: "region-name3",
            html: feature.properties.NAME,
            iconSize: [80, 24],
            iconAnchor: [20, 0],
          });
          // 多边形上的标记点;
          // L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
          L.marker(center, {
            pane: "mapLayer3",
            icon: myIcon,
          }).addTo(this.mapLayers.mapLayer3);
        },
      }).addTo(this.mapLayers.mapLayer2);
      let four = L.geoJSON(fourGJ02, {
        pane: "mapLayer2",
        style: function (feature) {
          return {
            color: "#1E83EB",
            weight: 2,
            fillColor: "#1E83EB",
            fillOpacity: 0.2,
          };
        },
        onEachFeature: (feature, layer) => {
          // console.log(feature,'feature');
          let bounds = layer._bounds;
          let center = bounds.getCenter();
          let myIcon = L.divIcon({
            className: "region-name3",
            html: feature.properties.NAME,
            iconSize: [80, 24],
            iconAnchor: [20, 0],
          });
          // 多边形上的标记点;
          // L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
          L.marker(center, {
            pane: "mapLayer3",
            icon: myIcon,
          }).addTo(this.mapLayers.mapLayer3);
        },
      }).addTo(this.mapLayers.mapLayer2);
      const bounds = four.getBounds();
      let center = bounds.getCenter();
      this.map.setView(center, 11); 
    },
    // 空港开发区
    konggangMap() {
      let kg = L.geoJSON(konggang, {
        pane: "mapLayer2",
        style: function (feature) {
          return {
            color: "#1E83EB",
            weight: 2,
            fillColor: "#1E83EB",
            fillOpacity: 0.2,
          };
        },
        onEachFeature: (feature, layer) => {
          let bounds = layer._bounds;
          let center = bounds.getCenter();
          // console.log(feature,'feature');
          let myIcon = L.divIcon({
            className: "region-name3",
            html: feature.properties.NAME,
            iconSize: [150, 24],
            iconAnchor: [45, 0],
          });
          // 多边形上的标记点;
          // L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
          L.marker(center, {
            pane: "mapLayer3",
            icon: myIcon,
          }).addTo(this.mapLayers.mapLayer3);
        },
      }).addTo(this.mapLayers.mapLayer2);
    },
    // 软件园
    ruanjianyuanMap() {
      let rjy = L.geoJSON(ruanjianyuan, {
        pane: "mapLayer2",
        style: function (feature) {
          return {
            color: "#1E83EB",
            weight: 2,
            fillColor: "#1E83EB",
            fillOpacity: 0.2,
          };
        },
        onEachFeature: (feature, layer) => {
          // console.log(feature,'feature');
          let bounds = layer._bounds;
          let center = bounds.getCenter();
          let myIcon = L.divIcon({
            className: "region-name3",
            html: feature.properties.NAME,
            iconSize: [150, 24],
            iconAnchor: [45, 0],
          });
          // 多边形上的标记点;
          // L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
          L.marker(center, {
            pane: "mapLayer3",
            icon: myIcon,
          }).addTo(this.mapLayers.mapLayer3);
        },
      }).addTo(this.mapLayers.mapLayer2);
    },
    // 渲染事件点位
    eventPoint(){
      let iconUrl1 = require("@/assets/images/icon1.png");
      let iconUrl2 = require("@/assets/images/icon2.png");
      onLine.features.forEach((element,index) => {
        let marker = L.marker({ lng: element.geometry.coordinates[0], lat: element.geometry.coordinates[1] },
          {
            icon: L.icon({
              iconUrl:element.properties.name == "Icon1" ? iconUrl1 : iconUrl2,
              iconSize: [60,70],
              iconAnchor:[30,70]
            })
          }
        ).addTo(this.map)
        this.markerClick(marker, element);
      });
    },
    // 点位的点击事件
    markerClick(marker,element) {
      marker.on("click", (e) => {
        this.dialogVisible = true;
        console.log(element);
      })
    },
    dispose(){
      if(this.onLoad) {
        window.parent.postMessage('go-back','*')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
  width: 100%;
  height: 100vh;
}
::v-deep .el-dialog {
  top: 15vh;
  border-radius: 5px;
  .el-dialog__header {
    border-bottom: 1px solid #E2E2E2;
  }
  .el-dialog__body {
    padding-top: 20px;
    padding-bottom: 10px;
    .el-descriptions-row {
      .el-descriptions-item__label {
        font-size: 18px;
        font-family: Source Han Sans CN-Bold;
        font-weight: 400;
        color: #9DA2AB;
      }
      .el-descriptions-item__content {
        font-size: 18px;
        font-family: Source Han Sans CN-Bold;
        font-weight: 400;
        color: #2E2F31;
      }
    }
  }
  .el-dialog__footer {
    .el-button {
      width: 100%;
    }
  }
  .el-dialog__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    div,i {
      font-size: 22px;
      font-family: Source Han Sans CN-Bold;
      font-weight: 500;
      color: #1A1A1A;
    }
  }
}
</style>
