<template>
    <div class="linkMultiSel">
        <div class="leftBox">
            
                <MultiCheckBox  :title="title" :listArr='listArr' :curLayerNum='1' @getItemData='getItemData' />
                <MultiCheckBox  :title="title" :listArr='listArr' :curLayerNum='2' v-if="listArr2.length>0" />
                <MultiCheckBox  :title="title" :listArr='listArr' :curLayerNum='3' v-if="listArr3.length>0"/>
                <MultiCheckBox  :title="title" :listArr='listArr' :curLayerNum='4' v-if="listArr4.length>0"/>

        </div>
        
        <div class="rightBox"  >
            <div class="title">已选</div>
            <div class="linkMulti_list">

            </div>
        </div>
    </div>
</template>

<script>

import MultiCheckBox from './MultiCheckBox'
    export default {
        props:['title','listArr'],
        components:{
            MultiCheckBox,
        },
        data() {
            return {
                title2:'',
                listArr2:[],
                title3:'',
                listArr3:[],
                title4:'',
                listArr4:[],
                clickKey:0,
            }
        },
        methods: {
            getItemData(val){
                this.clickKey=val.clickObj.dataset.layers;
                let index=val.clickObj.dataset.layers;
                console.log(val,val.clickObj.dataset.layers);
                this.clickKey=val.clickObj.dataset.layers;
                if(index==1){
                  
                    this.listArr3=[];
                    this.title3='';
                    this.listArr4=[];
                    this.title4='';
                    this.listArr2=val.data.children;
                    this.title2=val.data.name;
                }else if(index==2){
                    
                    this.listArr4=[];
                    this.title4='';

                    this.listArr3=val.data.children;
                    this.title3=val.data.name;
                }else if(index==3){
                    
                    this.listArr4=val.data.children;
                    this.title4=val.data.name;
                }
            },

        },
        mounted() {
            
        },
    }
</script>

<style lang="scss" scoped>
.linkMultiSel{
    width: 100%;
    height: 300px;
    display: flex;
    ul,li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .leftBox{
        width: 62%;
        margin-right: 3%;
        border: 1px solid #ccc;
        border-radius: 5px;

    }
    .rightBox{
        width: 35%;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .title{
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        font-weight: 600;
        border-radius: 5px 5px 0 0;
        background-color: rgb(248,249,250);
        padding: 0 15px;
        border-bottom: 1px solid #ccc;
    }
    






    
}
</style>