<template>
    <div class="layer-controler-container">
        <div class="layer-button-item" 
            v-for="(item,index) in layerButtons" 
            :key="index" 
            @click="handlerLayerButtonClick(item,index)"
            :style="{'background-image':item.checked?'url(/videosupervision/layer-button-active.png)':'url(/videosupervision/layer-button.png)'}"    
        >
            {{ item.lable }}
        </div>
    </div>
</template>
<script lang="ts" setup>

import { ref,defineEmits } from 'vue';

const layerButtons = ref([
    {
        lable:"重点区域",
        value:["hangfeiareaFill","hangfeiareaLine","hangfeiareaLable"],
        checked:false,
    },{
        lable:"航飞规划",
        value:["hangfeiplanFill","hangfeiplanLine","hangfeiplanLable"],
        checked:false,
    },{
        lable:"视频监控",
        value:["JianKong"],
        checked:false,
    },{
        lable:"影像图",
        value:["yingxiang","weixing"],
        checked:true,
    },{
        lable:"地名地址",
        value:["dianzi"],
        checked:true,
    },
])

const emits = defineEmits(["handlerLayerButtonClick"])

function handlerLayerButtonClick(item,index){
    layerButtons.value[index].checked = !layerButtons.value[index].checked
    emits("handlerLayerButtonClick",layerButtons.value[index]);
}

</script>

<style type="less" scoped>
.layer-controler-container {
    width: 160px;
    position: absolute;
    top:50%;
    left:50px;
    transform: translate(0,-50%);
    z-index:2;
    .layer-button-item{
        width:100%;
        height:60px;
        margin-bottom:15px;
        background:rgba(0,0,0,0.2);
        color:#fff;
        text-align:center;
        line-height:60px;
        cursor:pointer;
        background-image:url("/videosupervision/layer-button.png");
        background-size:100% 100%;
        font-size:16px;
    }
}
</style>
  