<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="item.icon" />
                <span>{{ item.name }}</span>
            </el-checkbox>
        </el-checkbox-group>
    </div>
</template>
<script>
import ModuleHeader from '@/components/common/moduleHeader.vue'
import SectionTitle from '@/components/common/sectionTitle.vue'

import event from "@/assets/images/patrolAndRescue/control-event.png";
import task from "@/assets/images/patrolAndRescue/control-task.png";
import xcCar from "@/assets/images/patrolAndRescue/control-xcCar.png";
import sos from "@/assets/images/patrolAndRescue/sos.png";
import xcPoint from "@/assets/images/patrolAndRescue/control-xc.png";
import jiuyuan from "@/assets/images/patrolAndRescue/control-jiuyuan.png";
import area from "@/assets/images/patrolAndRescue/control-area.png";
import { QueryMixin } from '../mixins/queryMixin'
import { getTaskCountData, getRescueTaskData, getPatrolPointData, getRescuePointData, getPatrolCarData, getRescueCarData, getRescueRegionData } from "@/api/patrolAndRescue";
export default {
    name: 'basic',
    components: { ModuleHeader, SectionTitle },
    mixins: [QueryMixin],
    data() {
        return {
            checkList: ["event", "task",],
            originCheckList: ["event", "task",],
            controlItems: [
                {
                    name: '实时事件',
                    value: 'event',
                    icon: event,
                },
                {
                    name: '救援任务',
                    value: 'task',
                    icon: task,
                },
                {
                    name: '巡查驻点',
                    value: 'xcPlace',
                    icon: xcPoint,
                },
                {
                    name: '救援驻点',
                    value: 'jyPlace',
                    icon: jiuyuan,
                },
                {
                    name: '巡查车辆',
                    value: 'xcCar',
                    icon: xcCar,
                },
                {
                    name: '救援车辆',
                    value: 'jyCar',
                    icon: sos,
                },
                // {
                //     name: '救援区域',
                //     value: 'jyArea',
                //     icon: area,
                // },
            ],
        }
    },
    methods: {
        // 获取当前控制项数据
        getData() {
            this.$nextTick(() => {
                this.$parent.$refs.mainMap.removeAllMarker()
            })
            this.checkList.forEach(item => {
                this.getControlItemsData(item)
            })
        },
        // 处理控制项选择更新
        handleCheckListChange(val) {
            const oldLength = this.originCheckList.length
            const newLength = val.length
            if (newLength > oldLength) {
                this.addMarker(val[newLength - 1])
            } else {
                const lessType = this.arrayDiff(this.originCheckList, val)
                this.removeMarker(lessType[0])
            }
            this.originCheckList = val
        },
        arrayDiff(arr1, arr2) {
            const set2 = new Set(arr2);
            return arr1.filter(item => !set2.has(item));
        },
        addMarker(type) {
            this.getControlItemsData(type)
        },
        removeMarker(type) {
            this.$nextTick(() => {
                this.$parent.$refs.mainMap.removeMarker(type)
            })
        },
        // 获取控制项数据
        async getTypeData(type) {
            switch (type) {
                case 'event':
                    const { value: eventValue = {} } = await getTaskCountData(this.query).then()
                    return eventValue.eventTaskList || []
                case 'task':
                    const { value: taskValue = [] } = await getRescueTaskData(this.query)
                    return taskValue
                case 'xcPlace':
                    const { value: patrolPoint = [] } = await getPatrolPointData(this.query)
                    return patrolPoint
                case 'jyPlace':
                    const { value: rescuePoint = [] } = await getRescuePointData(this.query)
                    return rescuePoint
                case 'xcCar':
                    const { value: patrolCar = [] } = await getPatrolCarData(this.query)
                    return patrolCar
                case 'jyCar':
                    const { value: rescueCar = [] } = await getRescueCarData(this.query)
                    return rescueCar
                case 'jyArea':
                    const { value: rescueRegion = [] } = await getRescueRegionData(this.query)
                    return rescueRegion
                default:
                    return []
            }
        },
        // 获取控制项数据并设置地图标记
        async getControlItemsData(type) {
            let pointData = []
            if (type === 'event') {
                const { value: eventValue = {} } = await getTaskCountData(this.query).then()
                // eventValue.eventTaskList.forEach(item => {
                //     item.lat = "29.25958538887112"
                //     item.lng = "105.79763870398254"
                // })
                pointData = eventValue.eventTaskList || []
            } else if (type === 'task') {
                const { value: taskValue = [] } = await getRescueTaskData(this.query)
                // taskValue.push({
                //     id: "1900382679199916032",
                //     lat: "30.25958538887112",
                //     lng: "107.79763870398254"
                // })
                pointData = taskValue

            } else if (type === 'xcPlace') {
                const { value: patrolPoint = [] } = await getPatrolPointData(this.query)
                pointData = patrolPoint

            } else if (type === 'jyPlace') {
                const { value: rescuePoint = [] } = await getRescuePointData(this.query)
                pointData = rescuePoint

            } else if (type === 'xcCar') {
                const { value: patrolCar = [] } = await getPatrolCarData(this.query)
                // patrolCar.forEach((item, index) => {
                //     item.lat = (Number("30.35958") + (index + 1) * 0.2).toString()
                //     item.lng = (Number("106.89763") + (index + 1) * 0.5).toString()
                // })
                pointData = patrolCar

            } else if (type === 'jyCar') {
                const { value: rescueCar = [] } = await getRescueCarData(this.query)
                pointData = rescueCar

            } else if (type === 'jyArea') {
                const { value: rescueRegion = [] } = await getRescueRegionData(this.query)
                pointData = rescueRegion
            }
            if (pointData.length) {
                this.setMapMarkers(pointData, type)
            }
        },
        // 设置地图标记
        setMapMarkers(data, type) {
            this.$nextTick(() => {
                this.$parent.$refs.mainMap.minemapMarker(data, type)
            })
        },
    },
}
</script>
<style scoped lang="scss">
.module-container {
    background: url('@/assets/images/patrolAndRescue/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;
            }
        }

        ::v-deep .el-checkbox__inner {
            background: transparent;
            border: 1px solid #3399FF;
        }

        ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
            background: #3399FF;
        }
    }


}
</style>