<template>
  <div class="map-container">
    <div class="top-data-box">
      <div class="data-collect">
        <div class="collect-num">
          <span>39</span>
          <span>家</span>
        </div>
        <div class="collect-text">全省检验机构</div>
      </div>
      <div class="data-collect" style="margin-left: 150px">
        <div class="collect-num">
          <span>{{ allInspector }}</span>
          <span>人</span>
        </div>
        <div class="collect-text">检查人员</div>
      </div>
    </div>
    <div id="leafletMap"></div>
    <div class="legend">
      <div class="legend-item" v-for="(item, index) in legendList" :key="index">
        <div class="item-color" :style="{ background: item.color }"></div>
        <div class="item-text">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { dictList } from "@/api/jcy";
import { getinspectorNum } from "@/api/largeSize";
import cityJson from "@/utils/mapJson/liaoning-city.json";
import cityCenter from "@/utils/mapJson/cityCenter.json";
import province from "@/utils/mapJson/liaoning-province.json";
export default {
  data() {
    return {
      cityData: {
        沈阳市: 0,
        大连市: 0,
        鞍山市: 0,
        抚顺市: 0,
        本溪市: 0,
        丹东市: 0,
        锦州市: 0,
        营口市: 0,
        阜新市: 0,
        辽阳市: 0,
        盘锦市: 0,
        铁岭市: 0,
        朝阳市: 0,
        葫芦岛市: 0,
        沈抚示范区: 0,
      },
      allInspector: 0,
      //字典
      dict: {},
      legendList: [
        { color: "#28599C", text: ">=600" },
        { color: "#3477B2", text: "400-599" },
        { color: "#4499CE", text: "200-399" },
        { color: "#59BBEC", text: "100-199" },
        { color: "#9BD3F5", text: "1-99" },
        { color: "#C5F0FF", text: "0" },
      ],
      globalMap: null,
      latitude: "40.904726971438656",
      longitude: "122.80196410332945",
      zoom: 8,
      maxZoom: 18,
      minZoom: 6,
      layerObj: {
        provinceLayer: null,
        cityLayer: null,
        textLayer1: null,
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap();
      this.getDict("workPlace");
    });
  },
  methods: {
    /**获取字典列表 */
    getDict(typeList) {
      let query = {
        list: typeList,
      };
      dictList(query).then((res) => {
        if (res.status == 200) {
          for (let key in res.result) {
            this.dict[key] = res.result[key];
          }
        }
        this.getCityData().then((data) => {
          this.initCityLayer(data);
          this.initPoitCenter(data);
        });
      });
    },
    getCityData() {
      return new Promise((resolve, reject) => {
        getinspectorNum()
          .then((res) => {
            res.result.forEach((item) => {
              let city = this.filterDict(item.workPlace, "workPlace");
              for (let key in this.cityData) {
                if (key == city) {
                  this.cityData[key] = item.count;
                  this.allInspector = this.allInspector + item.count;
                }
              }
            });
            resolve(this.cityData);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    /**过滤字典 */
    filterDict(value, type) {
      if (this.dict[type] == undefined) {
        return value;
      }
      let dictLable = this.dict[type].filter((item) => item.dictValue == value);
      return dictLable.length > 0 ? dictLable[0].dictLabel : "未知";
    },
    initMap() {
      this.globalMap = L.map("leafletMap", {
        center: [this.latitude, this.longitude], // 地图中心[纬度，经度]
        zoom: this.zoom, // 地图层级
        maxZoom: this.maxZoom,
        minZoom: this.minZoom,
        zoomControl: false, // 放大缩小按钮
        attributionControl: false, // 右下角leaflet图标
        dragging: false,
        doubleClickZoom: false,
        scrollWheelZoom: false,
      });
      // 省
      this.globalMap.createPane("provinceLayer");
      this.globalMap.getPane("provinceLayer").style.zIndex = 504;
      this.globalMap.getPane("provinceLayer").style.pointerEvents = "none";
      this.layerObj.provinceLayer = L.layerGroup().addTo(this.globalMap);
      //市
      this.globalMap.createPane("cityLayer");
      this.globalMap.getPane("cityLayer").style.zIndex = 505;
      this.globalMap.getPane("cityLayer").style.pointerEvents = "none";
      this.layerObj.cityLayer = L.layerGroup().addTo(this.globalMap);

      this.globalMap.createPane("textLayer1");
      this.globalMap.getPane("textLayer1").style.zIndex = 506;
      this.globalMap.getPane("textLayer1").style.pointerEvents = "none";
      this.layerObj.textLayer1 = L.layerGroup().addTo(this.globalMap);

      this.provinceLayer();
    },

    //省级图层
    provinceLayer() {
      let geojson = L.geoJSON(province, {
        style: function () {
          return {
            weight: 2,
            color: "#36527D",
            fillColor: "",
            fillOpacity: 0.7,
          };
        },
      }).addTo(this.layerObj.provinceLayer);
      this.globalMap.fitBounds(geojson.getBounds());
    },
    // 市级图层
    initCityLayer(data) {
      let _this = this;
      L.geoJSON(cityJson, {
        style: function (geoJsonFeature) {
          let num = data[geoJsonFeature.properties.name];
          let style = {
            weight: 1,
            color: "#fff",
            fillColor: "",
            fillOpacity: 0.7,
          };
          if (num == 0) {
            style.fillColor = "#C5F0FF";
          } else if (num >= 1 && num <= 99) {
            style.fillColor = "#9BD3F5";
          } else if (num >= 100 && num <= 199) {
            style.fillColor = "#59BBEC";
          } else if (num >= 200 && num <= 399) {
            style.fillColor = "#4499CE";
          } else if (num >= 400 && num <= 599) {
            style.fillColor = "#3477B2";
          } else {
            style.fillColor = "#28599C";
          }
          return style;
        },
      }).addTo(this.layerObj.cityLayer);

      //   市中心点
    },

    initPoitCenter(data) {
      L.geoJSON(cityCenter, {
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {
            icon: L.divIcon({
              className: "city-marker",
              html: `<div class="marker-data">
                        <div class="data-box">
                                ${data[feature.properties.fName]}
                        </div>
                        <div class="circle"></div>
                        <div class="city-name">${feature.properties.fName}</div>
                    </div>`,
            }),
          });
        },
      }).addTo(this.layerObj.textLayer1);
    },
  },
};
</script>

<style lang="scss" scoped>
.map-container {
  height: 100%;
  width: 100%;
  position: relative;

  #leafletMap {
    height: 100%;
    width: 100%;
  }
  .top-data-box {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    .data-collect {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .collect-num {
      font-weight: 500;
      color: #3d3f40;
      font-family: "DIN-Medium";
      & > span:nth-child(1) {
        font-size: 36px;
      }
      & > span:nth-child(2) {
        display: inline-block;
        margin-left: 6px;
        font-size: 12px;
      }
    }
    .collect-text {
      margin-top: 10px;
      font-size: 16px;
      font-weight: 400;
      color: #7a808a;
    }
  }
  .legend {
    position: absolute;
    left: 20px;
    bottom: 10px;
    z-index: 100;
    & > div {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    .item-color {
      width: 26px;
      text-align: center;
      line-height: 26px;
      height: 18px;
      border-radius: 6px;
    }
    .item-text {
      margin-left: 10px;
      font-size: 14px;
      font-weight: 400;
      color: #3380be;
    }
  }
}
::v-deep .leaflet-container {
  background: #fff;
}
</style>
