<template>
  <div class="linkMultiSel">
    <div class="leftBox">
      <div class="bigBOX" ref="mycheckBox">
        <div class="big_item">
          <MultiCheckBox :title="title1" :listArr="listArr1" :curLayerNum="1" :parentChecked="false"
            @getItemData="getItemData" />
        </div>
        <div class="big_item">
          <MultiCheckBox :title="title2" :listArr="listArr2" :curLayerNum="2"  :parentChecked="parentChecked1"
            @getItemData="getItemData" v-if="listArr2.length>0" />
        </div>
        <div class="big_item">
          <MultiCheckBox :title="title3" :listArr="listArr3" :curLayerNum="3"  :parentChecked="parentChecked2"
            @getItemData="getItemData" v-if="listArr3.length>0" />
        </div>
        <div class="big_item">
          <MultiCheckBox :title="title4" :listArr="listArr4" :curLayerNum="4"  :parentChecked="parentChecked3"
            @getItemData="getItemData" v-if="listArr4.length>0" />
        </div>
      </div>
    </div>

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

<script>
  import MultiCheckBox from './MultiCheckBox'
  import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  export default {
    props: ['title', 'listArr','listUrl','maxLayers'],
    components: {
      MultiCheckBox
    },
    data() {
      return {
        listArr1:[],
        title1:'',
        title2: '',
        listArr2: [],
        title3: '',
        listArr3: [],
        title4: '',
        listArr4: [],
        clickKey: 0,
        parentChecked1: false,
        parentChecked2: false,
        parentChecked3: false,

       

        currentData: null,
        layersNum: 0
      }
    },
    watch: {},
    methods: {
      getItemData(val) {
        this.$nextTick(() => {
          this.clickKey = val.clickObj.dataset.layers
          let index = parseInt(val.clickObj.dataset.layers) || val.curLayerNum
          this.currentData = val.data
          
          let childrensArr = Array.from(this.$refs.mycheckBox.children)
          setTimeout(() => {
            console.log(val, val.clickObj.dataset.layers)
            // console.log(val.data.checked)
            if (index == 1 || this.clickKey == 1) {
                this.$refs.mycheckBox.style.width = '100%'
                if(val.data.hasChild){
                    getAction(this.listUrl,{
                        parentCode:val.data.code,
                        level:this.maxLayers
                    }).then((res)=>{
                        console.log(res);
                        if(res.success){
                            if(res.result.records.length>0){
                                res.result.records.forEach((item,index)=>{
                                    item.value=item.code
                                    item.checked=val.data.checked;
                                    item.indeterminates=false;
                                
                                })
                                this.listArr3 = []
                                this.title3 = ''
                                this.listArr4 = []
                                this.title4 = ''

                                //处理样式
                                this.styleHandle(childrensArr, index)
                                this.parentChecked1 = val.data.checked
                                this.parentChecked2 = val.data.checked
                                this.parentChecked3 = val.data.checked
                                this.listArr2=res.result.records
                                this.title2 = val.data.name
                            }                    
                        };
                        
                    })  
                }else{
                    this.listArr3 = []
                    this.title3 = ''
                    this.listArr4 = []
                    this.title4 = ''
                    this.listArr2 = []
                    this.title2 = ''
                    this.resetStyle(childrensArr, index)
                    }  
                        
            } else if (index == 2 || this.clickKey == 2) {
                if(val.data.hasChild){
                    getAction(this.listUrl,{
                        parentCode:val.data.code,
                        level:this.maxLayers
                    }).then((res)=>{
                        console.log(res);
                        if(res.success){
                            if(res.result.records.length>0){
                                res.result.records.forEach((item,index)=>{
                                    item.value=item.code
                                    item.checked=val.data.checked;
                                    item.indeterminates=false;
                                
                                })
                                this.listArr4 = []
                                this.title4 = ''
                                
                                this.$refs.mycheckBox.style.width = '150%'
                                this.styleHandle(childrensArr, index)
                                this.parentChecked2 = val.data.checked
                                this.parentChecked3 = val.data.checked
                                this.listArr3=res.result.records
                                this.title3 = val.data.name
                            }                    
                        };
                        
                    })
                }else{
                    this.listArr4 = []
                    this.title4 = ''
                    this.listArr3 = []
                    this.title3 = ''
                    this.$refs.mycheckBox.style.width = '100%'
                    this.resetStyle(childrensArr, index)
                }  
                 
              
                let ind=-1
                this.listArr1.forEach((ele,i)=>{                       
                    if(ele.code==val.data.parentCode){
                        ind=i
                        // console.log(ind)
                    }                        
                }) 
                if(ind>-1){
                    this.listArr1[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
                    this.listArr1[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
                }
                
            } else if (index == 3 || this.clickKey == 3) {
                if(val.data.hasChild){
                    getAction(this.listUrl,{
                        parentCode:val.data.code,
                        level:this.maxLayers
                    }).then((res)=>{
                        console.log(res);
                        if(res.success){
                            if(res.result.records.length>0){
                                res.result.records.forEach((item,index)=>{
                                    item.value=item.code
                                    item.checked=val.data.checked;
                                    item.indeterminates=false;
                                
                                })
                                this.listArr4 = res.result.records
                                this.title4 = val.data.name
                                this.$refs.mycheckBox.style.width = '200%'
                                this.styleHandle(childrensArr, index)
                                this.parentChecked3 = val.data.checked
                                
                            }                    
                        };
                        
                    })
                }else{
                    this.$refs.mycheckBox.style.width = '150%'
                    this.resetStyle(childrensArr, index)
                }  

             
                if(this.listArr2){
                    console.log(this.listArr2)
                    let ind=-1;
                    
                    this.listArr2.forEach((ele,i)=>{                       
                            if(ele.code==val.data.parentCode){
                                ind=i
                                // console.log(ind)
                            }                                           
                    })      
                    if(ind>-1){
                        this.listArr2[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
                        this.listArr2[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
                    }           
                
              }
              
                  
                    this.listArr1.forEach((element,num)=>{
                        
                        if(element.code==this.listArr2[ind].parentCode){
                            ind=num
                            console.log(ind)
                        }
                        
                    })      
                    let checklist=this.listArr2.filter((item,index)=>{
                        return  item.checked
                    })    
                    // console.log(checklist)
                    if(ind>-1){
                            this.listArr1[ind].indeterminates = !!checklist.length && checklist.length < this.listArr2.length
                            this.listArr1[ind].checked = checklist.length === this.listArr2.length && this.listArr2.length!=0
                    }
                   
               
              

            }else if (index == 4 || this.clickKey == 4){
                if(this.listArr3){
                    // console.log(this.listArr3)
                    let ind=-1
                    this.listArr3.forEach((ele,i)=>{
                        
                        if(item.code==val.data.parentCode){
                            ind=i
                            // console.log(ind)
                        }
                                            
                    })   
                    if(ind>-1){
                        this.listArr3[ind].indeterminates = !!val.checkList.length && val.checkList.length <val.plainOptions.length
                        this.listArr3[ind].checked = val.checkList.length === val.plainOptions.length && val.plainOptions.length!=0
                    }              
                    
                }
                if(this.listArr2){
                    // console.log(this.listArr2)
                    let ind=-1
                    this.listArr3.forEach((ele,i)=>{
                        
                        if(item.code==val.data.parentCode){
                            ind=i
                            // console.log(ind)
                        }
                                            
                    })   
                    this.listArr2.forEach((element,num)=>{
                        if(item.code==this.listArr3[ind].parentCode){
                            ind=num
                            console.log(ind)
                        }                        
                    })    
                    if(ind>-1){
                  
                        let checklist3=this.listArr3.filter((item,index)=>{
                            return  item.checked
                        })    
                        // console.log(checklist)
                   
                        this.listArr2[ind].indeterminates = !!checklist3.length && checklist3.length < this.listArr3.length
                        this.listArr2[ind].checked = checklist3.length === this.listArr3.length && this.listArr3.length!=0
                        let z=-1;
                        this.listArr1.forEach((element,num)=>{
                            
                            if(item.code==this.listArr2[ind].parentCode){
                                z=num
                                console.log(z)
                            }
                            
                        })      
                        let checklist2=this.listArr1.filter((item,index)=>{
                            return  item.checked
                        })  
                        if(z>-1){
                            this.listArr1[z].indeterminates = !!checklist2.length && checklist2.length < this.listArr2.length
                            this.listArr1[z].checked = checklist2.length === this.listArr2.length && this.listArr2.length!=0
                        }
                        
                    }              
              } 
             
            }
          }, 100)


        })
      },
      styleHandle(arr, i) {
        arr.forEach((item, index) => {
          if (index <= i) {
            item.style.width = `${100 / (i + 1)}%`
            item.style.borderRight = '1px solid #ccc'
          }
        })
      },
      resetStyle(arr, i) {
        arr.forEach((item, index) => {
          if (index < i) {
            item.style.width = `${100 / i}%`
            item.style.borderRight = '1px solid #ccc'
          }
          if (index == i - 1) {
            item.style.borderRight = 'none'
          }
        })
      }
    },
    mounted() {
        // this.listArr1=this.listArr;
        this.title1=this.title;
        // console.log(this.listUrl)
        if(this.listUrl){
            getAction(this.listUrl,{
                parentCode:0,
                level:this.maxLayers
            }).then((res)=>{
                console.log(res);
                if(res.success){
                    res.result.records.forEach((item,index)=>{
                        item.value=item.code
                        item.checked=false;
                        item.indeterminates=false;
                        
                    })
                };
                this.listArr1=res.result.records
            })
        }

        
        
    }
  }
</script>

<style lang="scss" scoped>
  .linkMultiSel {
    width: 100%;
    height: 310px;
    display: flex;

    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .leftBox {
      width: 62%;
      margin-right: 3%;
      border: 1px solid #ccc;
      border-radius: 5px;
      overflow-x: auto;
    }

    .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;
    }

    .big_item {
      width: 100%;
      // min-width: 200px;
      // width: 426px;
      display: inline-block;
      // height: calc(100% - 10px);
    }

    .bigBOX {
      // width: calc(2 * 100%);
      height: calc(100% - 10px);
      box-sizing: border-box;
      // display: flex;
    }
  }
</style>