<template>
    <div class="seccontainer">
        <div class="titles">图层控制</div>
        <div class="layersbox">
            <a-tree
                v-model:checkedKeys="checkedKeys"
                checkable
                :tree-data="treeData"
                :field-names="fieldNames"
            >
                <template #title="{ name, id }">
                    <span >{{ name }}</span>
                </template>
            </a-tree>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted, Ref } from 'vue';
import type { TreeProps } from 'ant-design-vue';
import { GetTucengInfo } from '@/api/ziranziyuan/index';

const emits = defineEmits([
    'changeMapLayers'
]);

const checkedKeys = ref<string[]>();

const fieldNames: TreeProps['fieldNames'] = {
    key: 'id', // 假设数据中的唯一标识是 'id'
    title: 'name',
    children: 'child',
};

const treeData: Ref<TreeProps['treeData']> = ref();
const checkArr = ref([])
watch(checkedKeys, () => {
  checkArr.value = []
  treeData.value?.forEach(item =>{
    item.child.forEach(val =>{
        checkedKeys.value.forEach(rel =>{
            if(rel == val.id){
                checkArr.value.push(val)
            }
        })
    })
  })
  emits('changeMapLayers',checkArr.value);
});
onMounted(() => {
    GetTucengInfoList();
});
function GetTucengInfoList(){
    GetTucengInfo().then(res =>{      
        treeData.value = res
    })
}

                    
</script>
<style scoped>
.seccontainer{
    width: 300px;
    height: 600px;
    padding: 10px 20px;
    background: rgba(0,0,0, 0.6);
    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
    border-radius: 6px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -300px;
    .titles{
        height: 50px;
        line-height: 50px;
        color: #fff
    }
    .layersbox{
        height: calc(100% - 50px);
    }
}
::v-deep(.ant-tree){
    background: none;
    color: #fff;
}
::v-deep(.ant-tree-node-selected){
    background-color: transparent !important;
}
</style>