<template>
  <div class="mapcontainer">
    <gis-map :config="config" @load="handleLoad"></gis-map>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import GisMap from "@/components/GisMap/index.vue";
export default {
  components: { GisMap },
  data () {
    return {
      selectedMarker: null, // 选中事件标记图层
      selectedMarkerType: "", // 选中事件类型
      defaultZoom: 5,
      defaultCenter: [107.85585, 28.465908],
      realTimeEventMarker: [], // 实时事件marker
      provinceMarker: [
        {
          zb: [107.569855, 30.367095],
          id: "CQ",
          zoom: 6.8
        },
        {
          zb: [102.928995, 30.52487],
          id: "SC",
          zoom: 5.8
        },
        {
          zb: [101.593103, 25.353375],
          id: "YN",
          zoom: 6
        },
        {
          zb: [106.641243, 27.10797],
          id: "GZ",
          zoom: 6.5
        },
        {
          zb: [117.229929, 32.325398],
          id: "AH",
          zoom: 6.5
        }
      ]
    };
  },
  computed: {
    ...mapState({
      map: state => state.map.map,
      config: state => state.map.config,
      selectRoadId: state => state.road.selectRoadId,
      boundaryLineFace: state => state.map.boundaryLineFace
    })
  },
  watch: {
    // 选中路段切换 路段居中
    selectRoadId (newVal) {
      this.getChangeRoads(newVal[0]);
    }
  },
  created () {
    this.$store.dispatch("map/getMapConfig");
  },
  methods: {
    // 路段切换
    getChangeRoads (name) {
      if (!this.map) {
        return;
      }
      if (name) {
        this.provinceClick(name);
      } else {
        //高亮所有省份
        // this.map.setZoom(4.8);
        // this.map.setCenter([107.85585, 28.465908]);
        this.map.setZoom(5.2);
        this.map.setCenter([104.07751, 28.55365]);
        this.boundaryLineFace.forEach(el => {
          this.map.setLayoutProperty(el.layerIdl, "visibility", "visible");
          this.map.setLayoutProperty(el.layerIdf, "visibility", "visible");
        });
        const qmz = JSON.parse(localStorage.getItem('mapCLkmz'))
        this.map.setLayoutProperty(
          qmz.ROUTE,
          "visibility",
          "none"
        );
      }
    },
    // 单独高亮某个省份
    provinceClick (name) {
      this.provinceMarker.forEach(el => {
        if (name === el.id) {
          this.$nextTick(() => {
            this.map.flyTo({
              center: el.zb,
              zoom: el.zoom
            });
          });
        }
      });
      this.boundaryLineFace.forEach(el => {
        const state = name == el.code ? "visible" : "none";
        this.map.setLayoutProperty(el.layerIdl, "visibility", state);
        this.map.setLayoutProperty(el.layerIdf, "visibility", state);
      });
      const qmz = JSON.parse(localStorage.getItem('mapCLkmz'))
      this.map.setLayoutProperty(
        qmz.ROUTE,
        "visibility",
        "none"
      ); //所有路段
    },
    // gis地图加载
    handleLoad (data) {
      this.$store.commit("map/setMap", data.map);
      this.getChangeRoads(this.selectRoadId[0]);
    }
  }
};
</script>
<style lang="postcss" scoped>
.mapcontainer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
::v-deep(.custom-popup-class) {
  color: #fff !important;
  padding: 10px;
}
::v-deep(.selectedMarker) {
  width: 58px;
  height: 72px;
  background-size: cover;
}
::v-deep(.top) {
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  position: relative;
}
::v-deep(.circleImg) {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
::v-deep(.circle) {
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep(.icon) {
  width: 18px;
  height: 18px;
  background-size: cover;
  position: absolute;
  z-index: 2;
}
::v-deep(.bottom) {
  width: 38px;
  height: 22px;
  background-position: center center;
  background-repeat: no-repeat;
  margin-top: 2px;
}
::v-deep(.rotating) {
  animation: run 2s linear infinite;
}
@keyframes run {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>