<template>
  <Module
    class="layer-contrl-mod"
    :loading="loading"
    :error="error"
    :info="bsMeta && bsMeta['utilities']"
  >
    <div class="layer-contrl">
      <div class="group-content">
        <div
          class="group-item"
          v-for="(layer, index) in layersData"
          :key="layer.code"
          :class="{ active: selectedLayers.includes(layer.code.split('&')[0]) }"
          @click="onItemClick(layer.code, layer)"
        >
          <div class="item-icon">
            <img
              v-if="selectedLayers.includes(layer.code.split('&')[0])"
              :src="iconlist[layer.icon + 'Act']"
            />
            <img v-else :src="iconlist[layer.icon]" />
          </div>
          {{ item }}
          <div class="inlayertext">{{ layer.name }}</div>
        </div>
      </div>
    </div>
    <div v-if="showMask" class="mask" :style="{ left: left + 'px' }">
    </div>
  </Module>
</template>
<script lang="jsx">
import { defineComponent } from "vue";
import { mapState, mapMutations } from "vuex";

import brg from "@/assets/images/baseStruct/brg.png";
import brgAct from "@/assets/images/baseStruct/brg-active.png";
import tunnel from "@/assets/images/baseStruct/tunnel.png";
import tunnelAct from "@/assets/images/baseStruct/tunnel-active.png";
import route from "@/assets/images/baseStruct/route.png";
import routeAct from "@/assets/images/baseStruct/route-active.png";
import bp from "@/assets/images/baseStruct/bp.png";
import bpAct from "@/assets/images/baseStruct/bp-active.png";
import hd from "@/assets/images/baseStruct/hd.png";
import hdAct from "@/assets/images/baseStruct/hd-active.png";
import yhcl from "@/assets/images/baseStruct/yhcl.png";
import yhclAct from "@/assets/images/baseStruct/yhcl-active.png";

import emergency from "@/assets/images/baseStruct/emergency.png";
import emergencyAct from "@/assets/images/baseStruct/emergency-active.png";
import conserve from "@/assets/images/baseStruct/conserve.png";
import conserveAct from "@/assets/images/baseStruct/conserve-active.png";
import rescue from "@/assets/images/baseStruct/rescue.png";
import rescueAct from "@/assets/images/baseStruct/rescue-active.png";

import yhgqpng from "./Map/images/eventtype/event_type_1-DLSG_3.png";
import yjwzpng from "./Map/images/eventtype/event_type_1-QT_3.png";
import jydpng from "./Map/images/eventtype/event_type_1-ZDSJ_3.png";

import {
  mtWorkAreaInfo,
  emergencySupplyInfo,
  rescuePointInfo,
} from "@/api/curingManage";
export default defineComponent({
  data() {
    return {
      name: null,
      left: null,
      showMask: false,
      iconlist: {
        brg: brg,
        brgAct: brgAct,
        tunnel: tunnel,
        tunnelAct: tunnelAct,
        route: route,
        routeAct: routeAct,
        bp: bp,
        bpAct: bpAct,
        hd: hd,
        hdAct: hdAct,
        yhcl: yhcl,
        yhclAct: yhclAct,
        rescue: rescue,
        rescueAct: rescueAct,
        conserve: conserve,
        conserveAct: conserveAct,
        emergency: emergency,
        emergencyAct: emergencyAct,
      },
      hasEquipmentInfo: ["BOARD", "EP_T", "P_LJQ", "MTL"],
      equipmentDialogObj: {
        equipmentInfoVisible: false,
        data: {},
      },
      layersData: [
        {
          name: "边坡",
          code: "BP",
          icon: "bp",
        },
        {
          name: "沿路设施",
          code: "YLSS",
          icon: "route",
        },
        {
          name: "养护车辆",
          code: "YHCL",
          icon: "yhcl",
        },
        {
          code: "BRIDGE",
          name: "桥梁",
          sourceId: "tjylql1027",
          layerId: "345f6dc94c38a61176282451cb755366",
          icon: "brg",
        },
        {
          code: "TUNNEL",
          name: "隧道",
          sourceId: "tjylsd1027",
          layerId: "096c1d7b18e7d80c1cd0c7fbae4c36a1",
          icon: "tunnel",
        },
        {
          code: "CULVERT",
          name: "涵洞",
          sourceId: "tjylhd1022",
          layerId: "397b9ad119b0db0c36c7ce5a27b286ae",
          icon: "hd",
        },
        {
          name: "养护工区",
          code: "YHGQ",
          icon: "conserve",
          layerId: "yhpagepointyhgq", // 后面三个 这里是自定义的id
        },
        {
          name: "应急物资",
          code: "YJWZ",
          icon: "emergency",
          layerId: "yhpagepointyjwz",
        },
        {
          name: "救援点",
          code: "JYD",
          icon: "rescue",
          layerId: "yhpagepointjyd",
        },
      ],
    };
  },
  computed: {
    ...mapState({
      layers: (state) => state.map.layers,
      selectedLayers: (state) => state.map.selectedLayers,
      map: (state) => state.map.map,
    }),
    // layersData() {
    //   const { layers, layersGroup } = this
    //   const list = []
    //   layersGroup.forEach(group => {
    //     const arr = []
    //     group.groupLayer.forEach( item => {
    //       if (typeof item === 'string') {
    //       const layer = layers.find(({ code }) => item === code)
    //       layer && arr.push(layer)
    //     } else if (item) {
    //       arr.push(item)
    //     }
    //     })
    //     list.push({
    //       groupName: group.groupName,
    //       groupLayer: arr
    //     })
    //   })

    //   return list
    // },
  },
  watch: {
    map(val) {
      this.getDataPoint();
    },
  },
  methods: {
    ...mapMutations("map", ["SET_STATE"]),
    onItemClick(code, layer) {
      console.log(202,code,layer);
      let { map } = this;
      let list = code.split("&");
      const { hasEquipmentInfo, equipmentDialogObj } = this;
      const selectedLayers = [...this.selectedLayers];
      list.map((code) => {
        const idx = selectedLayers.findIndex((item) => item === code);
        if (idx === -1) {
          selectedLayers.push(code);
          if (code == "YHGQ" || code == "YJWZ" || code == "JYD") {
            map.setLayoutProperty(layer.layerId, "visibility", "visible");
          }
        } else {
          selectedLayers.splice(idx, 1);
          if (code == "YHGQ" || code == "YJWZ" || code == "JYD") {
            map.setLayoutProperty(layer.layerId, "visibility", "none");
          }
        }
      });
      let obj = {
        key: "selectedLayers",
        value: selectedLayers,
      };
      this.SET_STATE(obj);
    },
    //获取点的经纬度
    async getDataPoint() {
      //养护工区
      const resgq = await mtWorkAreaInfo();
      let arrgq = resgq.msgContent || [];
      this.reorgData(arrgq, "yhgq");

      // 应急物资
      const reswz = await emergencySupplyInfo();
      let arrwz = reswz.msgContent || [];
      this.reorgData(arrwz, "yjwz");

      //救援点
      const resjy = await rescuePointInfo();
      let arrjy = resjy.msgContent || [];
      this.reorgData(arrjy, "jyd");
    },
    // 将数据重组为地图需要的格式
    reorgData(arr, type) {
      const pres = {
        type: "FeatureCollection",
        features: [],
      };
      arr.forEach((item, index) => {
        if (item.longitude && item.latitude) {
          let nametext = item.areaName || item.supplyName || item.pointName;
          pres.features.push({
            geometry: {
              type: "Point",
              coordinates: [item.longitude, item.latitude],
            },
            properties: {
              title: nametext,
              kind: item.id,
            },
            type: "Feature",
          });
        }
      });
      this.addSource(pres, type);
      // this.addSourcestest()
    },
    addSource(arr, type) {
      let { map } = this;
      this.map.addSource("yhpointSource" + type, {
        type: "geojson",
        data: arr,
      });
      let pointimg = null;
      if (type == "yhgq") {
        pointimg = yhgqpng;
      } else if (type == "yjwz") {
        pointimg = yjwzpng;
      } else {
        pointimg = jydpng;
      }
      map.loadImage(pointimg, function (error, image) {
        if (error) throw error;
        // 添加自定义图标
        map.addImage("yhpage" + type, image);
        map.addLayer({
          id: "yhpagepoint" + type,
          type: "symbol",
          source: "yhpointSource" + type,
          filter: ["!has", "point_count"],
          layout: {
            "icon-image": "yhpage" + type,
            "icon-size": 1,
            visibility: "none",
          },
        });
      });
    },
  },
});
</script>
<style lang="postcss" scoped>
.mask {
  position: absolute;
  bottom: -20px;
  width: 200px;
  height: auto;
}
.layer-contrl-mod {
  height: auto;
  /* width: 350px;
  height: 200px;
  position: absolute;
  bottom: 20px;
  left: 0; */
}
.layer-contrl {
  width: 100%;
  /* background: rgba(5, 15, 45, 0.5);
  border: 1px solid #00d0fd;
  border-radius: 8px; */
  overflow: auto;
  background: rgba(0, 0, 0, 0.3);
}
.group-title {
  position: relative;
  color: #d5fbff;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  padding-left: 15px;
  &::before {
    position: absolute;
    left: 0;
    content: " ";
    width: 5px;
    height: 18px;
    background: linear-gradient(180deg, #f7ffff, #00d3ff);
    border-radius: 2px;
  }
}
.group-content {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 10px;
}
.group-item {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  line-height: 18px;
  color: #fff;
  box-sizing: border-box;
  &.active {
    color: #07ffed;
  }
}
.layerIcon {
  margin: auto;
  width: 10px;
  height: 10px;
  color: #fff;
}
.icon {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ede9e9;
  border-radius: 50%;
  margin-bottom: 5px;
}
.active .inlayertext {
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 192, 0, 0.45),
    transparent
  );
  color: rgba(255, 206, 90, 1);
}
.inlayertext {
  font-weight: bold;
  letter-spacing: 1px;
  width: 100%;
  height: 15px;
  line-height: 15px;
  margin: auto;
  margin-top: 0;
  margin-bottom: 0.1rem;
  text-align: center;
  color: #badeff;
  font-size: 13px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 72, 137, 1),
    transparent
  );
}
.item-icon {
  width: 50px;
  height: 41px;
  margin: auto;
  /* background: red; */
}
</style>
