<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" @getCheckedList='getCheckedList' />
        </div>
        <div class="big_item">
          <MultiCheckBox :title="title2" :listArr="listArr2" :curLayerNum="2"  :parentChecked="parentChecked1"
            @getItemData="getItemData"  @getCheckedList='getCheckedList' v-if="listArr2.length>0" />
        </div>
        <div class="big_item">
          <MultiCheckBox :title="title3" :listArr="listArr3" :curLayerNum="3"  :parentChecked="parentChecked2"
            @getItemData="getItemData"  @getCheckedList='getCheckedList' v-if="listArr3.length>0" />
        </div>
        <div class="big_item">
          <MultiCheckBox :title="title4" :listArr="listArr4" :curLayerNum="4"  :parentChecked="parentChecked3"
            @getItemData="getItemData"  @getCheckedList='getCheckedList' v-if="listArr4.length>0" />
        </div>
      </div>
    </div>

    <div class="rightBox">
      <div class="title">已选<a-button class="clearAllBtn" type="link" @click="clearAll">清空</a-button></div>
      <div class="linkMulti_list">
          <div class="selectBox1">
            <span class="selectListitem" v-for="(item,index) in checkedShowList" :key='index'>{{item.name}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
          </div>
      </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,
        checkedShowList:[],
      }
    },
    watch: {},
    methods: {
      getItemData(val) {
        this.$nextTick(() => {
          // this.clickKey = val.clickObj.dataset.layers
          // let index = parseInt(val.clickObj.dataset.layers) || val.curLayerNum
          let index = val.curLayerNum
          this.currentData = val.data
          
          let childrensArr = Array.from(this.$refs.mycheckBox.children)
          setTimeout(() => {
            console.log(val, index)
            // console.log(val.data.checked)
            if (index == 1 || this.clickKey == 1) {
                this.$refs.mycheckBox.style.width = '100%'
                if(val.data.code&&this.maxLayers>index){
                    getAction(this.listUrl,{
                        parent:val.data.code,
                        // level:2
                    }).then((res)=>{
                        // console.log(res);
                        if(res.success){
                            if(res.result.length>0){
                                res.result.forEach((item,index)=>{
                                    
                                    item.value=item.regionId
                                    item.code=item.regionId
                                    item.checked=val.data.checked;
                                    item.indeterminates=false;
                                })
                                // console.log(this.checkedShowList)
                                this.checkedShowList.forEach((ele)=>{
                                  res.result.forEach((item)=>{
                                      if(ele.code==item.code){
                                            item.checked=true;
                                            return
                                        }
                                  })        
                                })
                                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
                                this.title2 = val.data.name
                            }else{
                                this.listArr3 = []
                                this.title3 = ''
                                this.listArr4 = []
                                this.title4 = ''
                                this.listArr2 = []
                                this.title2 = ''
                                this.resetStyle(childrensArr, index)
                            }                      
                        };
                        
                    })  
                
                }
                if(val.data.value=='all'){
                  this.listArr3 = []
                  this.title3 = ''
                  this.listArr4 = []
                  this.title4 = ''
                  this.listArr2 = []
                  this.title2 = ''
                  this.resetStyle(childrensArr, index)
                }
                //  this.checkedShowList=val.checkList     
            } else if (index == 2 || this.clickKey == 2) {
                if(val.data.code&&this.maxLayers>index){
                    getAction(this.listUrl,{
                        parent:val.data.code,
                      //  level:3
                    }).then((res)=>{
                        // console.log(res);
                        if(res.success){
                            if(res.result.length>0){
                                res.result.forEach((item,index)=>{
                                    item.value=item.regionId
                                    item.code=item.regionId
                                    item.checked=val.data.checked;
                                    item.indeterminates=false;
                                
                                })
                                this.checkedShowList.forEach((ele)=>{
                                  res.result.forEach((item)=>{
                                      if(ele.code==item.code){
                                            item.checked=true;
                                        }
                                  })
                                        
                                })
                                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
                                this.title3 = val.data.name
                            }else{
                              this.listArr4 = []
                              this.title4 = ''
                              this.listArr3 = []
                              this.title3 = ''
                              this.$refs.mycheckBox.style.width = '100%'
                              this.resetStyle(childrensArr, index)
                            }                    
                        };
                        
                    })
                }
                if(val.data.value=='all'){
                    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.parent){
                        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.code&&this.maxLayers>index){
                    getAction(this.listUrl,{
                        parent:val.data.code,
                        // level:4
                    }).then((res)=>{
                        // console.log(res);
                        if(res.success){
                            if(res.result.length>0){
                                res.result.forEach((item,index)=>{
                                    item.value=item.regionId
                                    item.code=item.regionId
                                    item.checked=val.data.checked;
                                    item.indeterminates=false;
                                
                                })
                                this.checkedShowList.forEach((ele)=>{
                                  res.result.forEach((item)=>{
                                      if(ele.code==item.code){
                                            item.checked=true;
                                        }
                                  })
                                        
                                })
                                this.listArr4 = res.result
                                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(val.data.value=='all'){
                    this.$refs.mycheckBox.style.width = '150%'
                    this.resetStyle(childrensArr, index)
                }
               
                let ind=-1;
                if(this.listArr2){
                    // console.log(this.listArr2)                                      
                    this.listArr2.forEach((ele,i)=>{                       
                      if(ele.code==val.data.parent){
                          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
                    }           
                }
                     let z=-1          
                    this.listArr1.forEach((element,num)=>{                        
                      if(element.code==this.listArr2[ind].parent){
                          z=num
                          // console.log(ind)
                      }
                        
                    })      
                    let checklist=this.listArr2.filter((item,index)=>{
                        return  item.checked || item.indeterminates
                    })    
                    // console.log(checklist)
                    if(z>-1){
                            this.listArr1[z].indeterminates = !!checklist.length && checklist.length < this.listArr2.length
                            this.listArr1[z].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.parent){
                            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.parent){
                            ind=i
                            // console.log(ind)
                        }
                                            
                    })   
                    this.listArr2.forEach((element,num)=>{
                        if(item.code==this.listArr3[ind].parent){
                            ind=num
                            // console.log(ind)
                        }                        
                    })    
                    if(ind>-1){
                  
                        let checklist3=this.listArr3.filter((item,index)=>{
                            return  item.checked || item.indeterminates
                        })    
                        // 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].parent){
                                z=num
                                // console.log(z)
                            }
                            
                        })      
                        let checklist2=this.listArr1.filter((item,index)=>{
                            return  item.checked || item.indeterminates
                        })  
                        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)
          // this.$emit('getSelectedArr',val.checkList)

        })
      },
      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'
          }
        })
      },
      
      
      deleteItem(item){
          // console.log(item);
          let val='';
          this.checkedShowList.forEach((ele,index)=>{
              if(ele.code==item.code){
                  val=ele.value
              }
          })
          
          this.checkedShowList=this.checkedShowList.filter((element,index) => {
              return element.code!=val;
          });
          if(item.level==1){
              this.listArr1.forEach((ele)=>{
                  if(ele.code==val){
                     ele.checked=false
                  }
              })  
          }
          if(item.level==2){
              // console.log('------------------------------------');
              let childList=this.checkedShowList.filter((element,index) => {
                  return element.parent==item.parent;
              });
              let data=[]
              let checkList=[];
              let plainOptions=[]
              this.listArr1.forEach((ele)=>{
                  if(ele.code==item.parent){
                      data=ele;
                  }
                  if(ele.checked){
                    checkList.push(ele.code)
                  }
                  plainOptions.push(ele.code)
              })
              if(childList.length==0){
                  data.indeterminates=false
              }
              
              
              this.getItemData({
                clickObj:{},
                data: data,
                curLayerNum:1,
                checkList,
                plainOptions,
              })
              

          }
          if(item.level==3){

          }
      },

      clearAll(){
          this.listArr1.forEach((item)=>{
              item.checked=false;
              item.indeterminates=false;
          })
          this.listArr2.forEach((item)=>{
              item.checked=false;
              item.indeterminates=false;
          })
          this.listArr3.forEach((item)=>{
              item.checked=false
              item.indeterminates=false
          })
          this.listArr4.forEach((item)=>{
              item.checked=false
              item.indeterminates=false
          })
          this.checkedShowList=[]
      },

      getCheckedList(val){
        // console.log(val);
        if(val.curLayerNum==1){
          if(val.checkList.length>0){
            this.checkedShowList=this.checkedShowList.filter((item)=>{
              return item.level!=1
            })
            // console.log(this.checkedShowList)
            if(val.checkList.length==this.listArr1.length){
                this.checkedShowList=[];
                val.checkList.forEach((ele)=>{
                  var result = this.checkedShowList.some(item => {
                    if(item.code == ele){
                        return true 
                    } 
                  })
                  if(!result){
                    this.listArr1.forEach((item)=>{
                      if(ele==item.code){
                          this.checkedShowList.push(item)
                      }
                    })
                  }
                
                })
            }else if(val.checkList.length<this.listArr1.length){
              val.checkList.forEach((ele)=>{
                var result = this.checkedShowList.some(item => {
                    if(item.code == ele){
                        return true 
                    } 
                })
                if(!result){
                  this.listArr1.forEach((item)=>{
                    if(ele==item.code){
                        this.checkedShowList.push(item)
                    }
                  })
                }
              
              })
            }
            
            // console.log(this.checkedShowList)
          }else{
            this.checkedShowList=this.checkedShowList.filter((item)=>{
              return item.level!=1
            })
          }
          
        }else if(val.curLayerNum==2){
          this.checkedShowList=this.checkedShowList.filter((item)=>{
              return item.code!=val.currentList[0].parent
          })
          
          if(val.checkList.length>0&&val.checkList.length<val.currentList.length){
            this.checkedShowList=this.checkedShowList.filter((item)=>{
              return item.parent!=val.currentList[0].parent
            })
            // console.log(this.checkedShowList)
            val.checkList.forEach((ele)=>{
              var result = this.checkedShowList.some(item => {
                if(item.code == ele){
                    return true 
                } 
              })
              if(!result){
                val.currentList.forEach((item)=>{
                  if(ele==item.code){
                      this.checkedShowList.push(item)
                  }
                })
              }
             
            })
            // console.log(this.checkedShowList)
          }else if(val.checkList.length==0){
            this.checkedShowList=this.checkedShowList.filter((item)=>{
              return item.parent!=val.currentList[0].parent

            })
          }else if(val.checkList.length==val.currentList.length){
            this.checkedShowList=this.checkedShowList.filter((item)=>{
              return item.parent!=val.currentList[0].parent
            })
            this.listArr1.forEach((item)=>{
                if(item.code==val.currentList[0].parent){
                    this.checkedShowList.push(item)
                }
            })
          }
        }else if(val.curLayerNum==3){
          this.checkedShowList=this.checkedShowList.filter((item)=>{
              return item.code!=val.currentList[0].parent
          })
          
          if(val.checkList.length>0&&val.checkList.length<val.currentList.length){
            this.checkedShowList=this.checkedShowList.filter((item)=>{
              return item.parent!=val.currentList[0].parent
            })
            // console.log(this.checkedShowList)
            val.checkList.forEach((ele)=>{
              var result = this.checkedShowList.some(item => {
                if(item.code == ele){
                    return true 
                } 
              })
              if(!result){
                val.currentList.forEach((item)=>{
                  if(ele==item.code){
                      this.checkedShowList.push(item)
                  }
                })
              }
             
            })
            // console.log(this.checkedShowList)
          }else if(val.checkList.length==0){
            this.checkedShowList=this.checkedShowList.filter((item)=>{
              return item.parent!=val.currentList[0].parent
              
            })
          }else if(val.checkList.length==val.currentList.length){
            this.checkedShowList=this.checkedShowList.filter((item)=>{
              return item.parent!=val.currentList[0].parent
            })
            this.listArr2.forEach((item)=>{
                if(item.code==val.currentList[0].parent){
                    this.checkedShowList.push(item)
                }
            })
          }
        }else if(val.curLayerNum==4){

        }


        let dataArr=[];
        this.checkedShowList.forEach(item=>{
          dataArr.push(item.code)
        })
        this.$emit('getSelectedArr',dataArr)

      },


    },
    mounted() {
        // this.listArr1=this.listArr;
        this.title1=this.title;
        // console.log(this.listUrl)
        console.log(this.listArr,'----------------')
        if(this.listUrl){
            getAction(this.listUrl,{
                parent:0,
                level:1
            }).then((res)=>{
                console.log(res);
                if(res.success){
                    res.result.forEach((item,index)=>{
                        item.value=item.regionId
                        item.code=item.regionId
                        item.checked=false;
                        item.indeterminates=false;
                        
                    })
                };
                this.listArr1=res.result;
                this.listArr.forEach(item=>{
                  this.listArr1.forEach(ele=>{
                    if(ele.value==item){
                      ele.checked=true
                    } 
                  })
                })
            })
        }

        
        
    }
  }
</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;
      overflow-y: hidden;
    }

    .rightBox {
      width: 35%;
      border: 1px solid #ccc;
      border-radius: 5px;
      .selectBox1{
            height: 250px;
            overflow: auto;
            
            .selectList{                      
                display: block;
                width: 100%;
                // padding: 0 15px;
                // padding: 3px 0;
            }
            .selectLists{
                display: block;
                width: 100%;
                padding: 0 15px;
            }
            .selectLists:hover{
                background-color: rgba(0,0,0,.1);
            }
            .selectListitem{
                display: block;
                height: 25px;
                line-height: 25px;
                background-color: #eee;
                border-radius: 5px;
                padding: 0 10px;
                margin: 8px 10px;
                position: relative;
                #close{
                    font-size: 12px;
                    position: absolute;
                    right: 10px;
                    top: 5px;
                    cursor: pointer;
                }
            }
      }
    }

    .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;
      position: relative;
      .clearAllBtn{
          position: absolute;
          top: 3px;
          right: 0;
      }
    }

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