<template>
  <div class="module-container">
    <el-checkbox-group
      v-model="checkList"
      class="control-item-wrapper"
      @change="handleCheckListChange"
    >
      <el-checkbox
        v-for="item in controlItems"
        :key="item.value"
        :label="item.value"
      >
        <img
          class="type-icon"
          :src="require(`@/assets/img/bigScreen/basic/${item.icon}.png`)"
        />
        <span>{{ item.name }}</span>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>
  <script>
import ModuleHeader from '../components/moduleHeader.vue'
import SectionTitle from '../components/sectionTitle.vue'
export default {
  name: 'basic',
  components: {ModuleHeader, SectionTitle},
  props: {},
  data() {
    return {
      checkList: ['event'],
      controlItems: [
        {
          name: '突发事件',
          value: 'event',
          icon: 'control-event',
        },
        {
          name: '救援任务',
          value: 'task',
          icon: 'control-task',
        },
        {
          name: '巡查驻点',
          value: 'xcPlace',
          icon: 'event-icon01',
        },
        {
          name: '救援驻点',
          value: 'jyPlace',
          icon: 'event-icon03',
        },
        {
          name: '巡查车辆',
          value: 'xcCar',
          icon: 'control-xcCar',
        },
        {
          name: '救援车辆',
          value: 'jyCar',
          icon: 'sos',
        },
        {
          name: '救援区域',
          value: 'jyArea',
          icon: 'pic03',
        },
      ],
      pointData: [
        {
          createBy: '1',
          createName: '系统管理员',
          isDele: '0',
          id: 'DN_6001001',
          type: 1,
          teamId: 'TR_1001001',
          name: '三驱收费站',
          roadId: '1493834264024846336',
          monitorName: '监控总中心',
          monitorTel: '02345261555',
          trafficPoliceZ: '五支队',
          trafficPoliceD: '大足大队',
          managementZ: '高五支',
          managementD: '四大队',
          classType: 1,
          stationType: 1,
          peg: 1,
          pegAdd: 770,
          pegVal: 'K1+770',
          linkName: '何远威',
          linkTel: '19332561129',
          dutyTel: '19122601066',
          lng: 105.638497,
          lat: 29.645515,
          pkVal: 'DN_6001001',
        },
      ],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getControlItemsData()
    })
  },
  methods: {
    handleCheckListChange(val) {
      if (val.length) {
        this.checkList = [val[val.length - 1]]
      } else {
        this.checkList = []
      }
      if (this.checkList.length) {
        this.getControlItemsData(this.checkList[0])
      } else {
        this.$parent.$refs.mainMap.removeAllMarker()
      }
    },
    getControlItemsData(type) {
      let data = []
      if (type === 'event') {
      }
      this.setMapMarkers(this.pointData, type)
    },
    setMapMarkers(data, type) {
      this.$nextTick(() => {
        this.$parent.$refs.mainMap.removeMarker(type)
        this.$parent.$refs.mainMap.minemapMarker(data, type)
      })
    },
  },
}
</script>
<style scoped lang="scss">
.module-container {
    background: url('~@/assets/img/bigScreen/basic/map-control-bg.png') no-repeat;
    background-size: 100% 100%;
    padding: 10px;
    box-sizing: border-box;
    .control-item-wrapper{
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .el-checkbox{
            display: flex;
            align-items: center;
            margin-right: 0;
            span{
                font-size: 14px;
                color: #CFDBE6;
            }
            .type-icon{
                width: 14px;
                height: 14px;
                display: inline-block;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-position: center;
                margin-right: 10px;
            }
            ::v-deep.el-checkbox__label{
                display: flex;
                align-items: center;
            }
        }
    }
}
</style>