<template>
  <div class="layer-contrl">
    <div class="layer-group" v-for="(item, index) in layersData" :key="index">
      <div class="group-title">
        <span>{{ item.groupName }}</span>
      </div>
      <div class="group-content">
        <div
          class="group-item"
          v-for="layer in item.groupLayer"
          :key="layer.code"
          :class="{ active: selectedLayers.includes(layer.code.split('&')[0]) }"
          @click="onItemClick(layer.code, layer)"
        >
          <div
            class="icon"
            :class="{
              active: selectedLayers.includes(layer.code.split('&')[0]),
            }"
          >
            <SvgIcon
              :name="layerIcon[layer.code] || 'layerIconDefault'"
              class="layerIcon"
            />
          </div>
          <span>{{ layer.name }}</span>
        </div>
      </div>
    </div>
    <EquipmentInfo
      v-if="equipmentDialogObj.equipmentInfoVisible"
      :equipmentInfoVisible="equipmentDialogObj.equipmentInfoVisible"
      :equipmentData="equipmentDialogObj.data"
      @equipmentInfoClose="equipmentInfoClose"
    ></EquipmentInfo>
    <Monitoring ref="monitoring"></Monitoring>
  </div>
</template>
<script lang="jsx">
import { defineComponent } from "vue";
import { mapState, mapMutations } from "vuex";
import EquipmentInfo from './components/equipmentInfo.vue'
import Monitoring from './components/monitoringlist.vue'
export default defineComponent({
  components: { EquipmentInfo, Monitoring },
  data() {
    return {
      hasEquipmentInfo: ['BOARD', 'EP_T', 'P_LJQ', 'MTL'],
      equipmentDialogObj: {
        equipmentInfoVisible: false,
        data: {}
      },
      layersGroup: [
        {
          groupName: '路线概况集',
          groupLayer: [
            'ROUTE', // 路线
            'MILESTONE_HM', // 百米桩
            'MILESTONE_KM', // 千米桩
            {
              code: 'TRAFFIC&DYNAMIC_TRAFFIC',
              name: '实时路况'
            }
          ]
        },
        {
          groupName: '主要构造物集',
          groupLayer: [
            'BRIDGE', // 桥梁
            'TUNNEL', //隧道
            'SERVICE_AREA', // 服务区
            'TOLL_STATION', // 收费站
            'CULVERT', // 涵洞
          ]
        },
        {
          groupName: '沿线设施集',
          groupLayer: [
            'CAMERA', // 摄像头
            {
              code: 'BOARD',
              deviceType: 'CF',
              name: '情报板'
            },
            {
              code: 'EP_T',
              deviceType: 'EP_T',
              name: '紧急电话设备'
            },
            {
              code: 'P_LJQ',
              deviceType: 'P_LJQ',
              name: '加强灯'
            },
            {
              code: 'MTL',
              deviceType: 'MTL',
              name: '监控列表'
            },
          ]
        },
      ],
      layerIcon: {
        ROUTE: 'ROUTE',
        MILESTONE_HM: 'MILESTONE_HM',
        MILESTONE_KM: 'MILESTONE_KM',
        BRIDGE: 'BRIDGE',
        TUNNEL: 'TUNNEL',
        SERVICE_AREA: 'SERVICE_AREA',
        TOLL_STATION: 'TOLL_STATION',
        CULVERT: 'CULVERT',
        CAMERA: 'CAMERA',
        BOARD: 'BOARD',
        EP_T: 'EP_T',
        P_LJQ: 'P_LJQ',
      },
    }
  },
  computed: {
    ...mapState({
      layers: (state) => state.map.layers,
      selectedLayers: (state) => state.map.selectedLayers,
    }),
    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
    },
  },
  methods: {
    ...mapMutations('map', ['SET_STATE']),
    onItemClick(code, layer) {
      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(hasEquipmentInfo.includes(code)) {
            let data = {
              deviceType: layer.deviceType,
              name: layer.name
            }
            if(code == 'MTL') {
              this.$refs['monitoring'].init()
            } else {
              equipmentDialogObj.data = data
              equipmentDialogObj.equipmentInfoVisible = true
            }
            
          }
        } else {
          selectedLayers.splice(idx, 1)
        }
      })
      let obj = {
        key: 'selectedLayers',
        value: selectedLayers
      }
      this.SET_STATE(obj)
    },
    equipmentInfoClose() {
      this.equipmentDialogObj.equipmentInfoVisible = false
    }
  }
})
</script>
<style lang="postcss" scoped>
.layer-contrl {
  width: 290px;
  height: 420px;
  position: absolute;
  top: 60px;
  left: 20px;
  background: rgba(5, 15, 45, 0.5);
  border: 1px solid #00d0fd;
  border-radius: 8px;
  padding: 20px;
  overflow: auto;
}
.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: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  font-size: 12px;
  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 {
    border-color: #3ebfb5;
    background: #3ebfb5;
  }
}
</style>