<template>
    <div class="multiCheckbox" >
        <div class="linkMulti_list" ref="mycheckMul">
            <div class="title">{{title}}</div>
            <ul class="linkMulti_list_one">
                <li class="checkAll"><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> 全选</a-checkbox> </li>
                <li @click="listItemClick(item)" v-for="(item,index) in listArr" :key='index' >
                    <a-checkbox   @change='checkItemChange' >{{item.name}}</a-checkbox>                       
                    <span class="more" v-show="item.children"><a-icon type="right" /></span>
                </li>                    
            </ul>                               
        </div> 
        <MultiCheckBox class="childClass"  :title='currentItem.name'  :listArr='currentItem.children'  v-if="currentItem" :curLayerNum='currentLayerNum'  />     
    </div>    
</template>

<script>
const plainOptions = ['Apple', 'Pear', 'Orange'];
    export default {
        name:'MultiCheckBox',
        props:['title','listArr','curLayerNum'],
        data() {
            return {
               checkedList: [],
                indeterminate: false,
                checkAll: false,
                plainOptions,
                layersNum:0,//控制层级
                currentLayerNum:0,//当前层级是多少层,
                currentItem:null,
            }
        },
        methods: {
            onChange(checkedList) {
                this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
                this.checkAll = checkedList.length === plainOptions.length;
            },
            onCheckAllChange(e) {
                Object.assign(this, {
                    checkedList: e.target.checked ? plainOptions : [],
                    indeterminate: false,
                    checkAll: e.target.checked,
                });
            },
            listItemClick(item){
                console.log(item);
                if(item.children){
                    this.currentLayerNum++;
                    this.currentItem=item;
                    this.$refs.mycheckMul.style='width:50%;border-right:1px solid #ccc';
                    
                }
            },
            checkItemChange(e){
                console.log(e.target.checked);
                // if(e.target.checked){

                // }   
            },
            //判断传入的数组的children层数
            getLayersNum(arr){
                arr.map((item,index)=>{
                    if(item.children){

                    }
                })
            }
        },
        mounted() {
            this.currentLayerNum=this.curLayerNum;
            console.log(this.curLayerNum)
        },
    }
</script>

<style lang="scss" scoped>
.multiCheckbox{   
    // width:100%;
    // overflow: auto;   
    height: 100%;
    display: flex;
    overflow: scorll;
    ul,li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .linkMulti_list{
        // padding: 5px 0px;
        display: inline-block;
        width: 100%;
        height: 300px;
        box-sizing: border-box;       
        overflow: hidden;   
        .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;
        }
        ul{
            height: 264px;
            overflow: auto;
        }
        .checkAll{
            
        }
        li{
            height: 30px;
            line-height: 30px;
            cursor: pointer;
            padding: 0 15px;
            position: relative;
            .more{
                position:absolute;
                top: 2px;
                right: 10px;
            }
        }
        li:hover{
            background-color: rgb(240,240,240);
        }
    
    }
    .ant-checkbox-group{
        width: 100%;
    }
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.linkMulti_list{
    // padding: 5px 0px;
    display: inline-block;
    width: 100%;
    min-width: 200px;
    height: 300px;
    box-sizing: border-box;       
    overflow: auto;
    .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;
    }
    ul{
        height: 264px;
        overflow: auto;   
    }
    .checkAll{
        
    }
    li{
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        padding: 0 15px;
        position: relative;
        .more{
            position:absolute;
            top: 2px;
            right: 10px;
        }
    }
    li:hover{
        background-color: rgb(240,240,240);
    }

}

.addborder{
    border-right: 1px solid #ccc;
}

</style>