<template>
  <div class="multiCheckbox">
    <div class="linkMulti_list" >
      <div class="title">{{title}}</div>
      <ul class="linkMulti_list_one">
        <li class="checkAll" ref="checkAllBox">
          <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" :data-layers="curLayerNum"   >全选</a-checkbox>
        </li>
        <li @click.stop="listItemClick($event,item)" v-for="(item,index) in listArr" :key="index"
          :data-layers="curLayerNum" ref="checkList">
          <a-checkbox @change="onChange($event,item,index)" :value="item.code" :checked="item.checked"
            @click.stop="listItemClick($event,item)" :indeterminate="item.indeterminates" >{{item.name}}</a-checkbox>
          <!-- <span>{{item.name}}</span>                        -->
          <span class="more" v-show="item.hasChild">
            <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>
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  export default {
    name: 'MultiCheckBox',
    props: {
      title: {
        type: String
      },
      listArr: {
        type: Array,
        default () {
          return []
        }
      },
      curLayerNum: {
        type: Number,
        default () {
          return 1
        }
      },
      parentChecked: {
        type: Boolean,
        default () {
          return false
        }
      },
      indeterminates:{
          type:Boolean,
          default(){
              return false
          }
      }
    },
    data() {
      return {
        checkedList: [],
        indeterminate: false,
        checkAll: false,
        plainOptions: [],
        layersNum: 0, //控制层级
        currentLayerNum: 0, //当前层级是多少层,
        currentItem: null,
        labelList:[],//选中的文字的样式
      }
    },
    watch: {
      checkedList: function (n, o) {
      // this.labelList=[];
      //   this.checkedList.forEach((item)=>{
      //     this.listArr.forEach((ele,index)=>{
      //       if(ele.code==item){
      //         this.labelList.push(ele.name)
      //       }
      //     })
      //  }) 
     },
      listArr:{
          handler(n, o) {
              this.plainOptions=[];
              this.checkedList=[];
            //   console.log(n,o,'------')
              this.listArr.forEach(element => {
                this.plainOptions.push(element.value)
                if(element.checked){
                    let num = this.checkedList.indexOf(element.value)
                    if (num == -1) {
                        this.checkedList.push(element.value);
                        this.labelList.push(element.name);
                        // console.log(this.checkedList,'--',this.curLayerNum)
                    }                
                }else{
                    let num = this.checkedList.indexOf(element.value)
                    if (num > -1) {
                        this.checkedList.splice(num, 1)

                    }
                    let n=this.labelList.indexOf(element.name)
                    if (n > -1) {
                        this.labelList.splice(n, 1)
                    }
                }
            });
           
            // console.log(this.checkedList.length,this.plainOptions.length)
            // console.log(this.checkedList,this.plainOptions.length)

            this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
            this.checkAll = this.checkedList.length === this.plainOptions.length && this.plainOptions.length!=0

            this.$emit('getCheckedList',{
              curLayerNum:this.curLayerNum,
              checkList:this.checkedList,
              currentList:this.curLayerNum>1? this.listArr : []
            })
          },
          deep: true
      },

      parentChecked: {
        handler(n, o) {
        //   console.log(n, o, '--parentChecked', this.curLayerNum,this.checkedList,this.plainOptions)
          if (n) {
            this.checkAll = true
            this.checkedList=[];
            this.listArr.forEach((item, index) => {
                item.checked = n
                let num = this.checkedList.indexOf(item.value)
                if (num == -1) {
                    this.checkedList.push(item.value);
                }
             

            })
          } else if (n == false) {
            this.checkAll = false
            // this.listArr.forEach((item, index) => {
            //   item.checked = n
            // })
            this.checkedList = []
          }
        },
        
        deep: true,
        immediate: true
      }
    },
    methods: {
       onChange(e, item, index) {
        // console.log(e.target,item)

        if (e.target.checked) {
          // item.checked=true;
          this.listArr.forEach((ele, i) => {
            if (index == i) {
              this.$set(ele, 'checked', e.target.checked)
              this.$set(ele, 'indeterminates',false)
              this.checkedList.push(e.target.value)
            }
          })
        } else {
          this.listArr.forEach((ele, i) => {
            if (index == i) {
              this.$set(ele, 'checked', e.target.checked)
              
            }
          })

          let num = this.checkedList.indexOf(e.target.value)
          if (num > -1) {
            this.checkedList.splice(num, 1)
          }
        }
        this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
        this.checkAll = this.checkedList.length === this.plainOptions.length
        // this.listItemClick(e,item);
      },
      onCheckAllChange(e) {
              
        console.log(event)
        Object.assign(this, {
          checkedList: e.target.checked ? this.plainOptions : [],
          indeterminate: false,
          checkAll: e.target.checked
        })
        console.log(this.checkedList)
        if (this.checkedList.length) {
          this.listArr.forEach(item => {
            this.$set(item, 'checked', true)
            this.$set(item, 'indeterminates', false)
          })
        } else {
          this.listArr.forEach(item => {
            this.$set(item, 'checked', false)
            this.$set(item, 'indeterminate', false)
          })
        }
      

        this.listItemClick(event,{
            name:'全选',
            value:'all',
            checked:e.target.checked,
            indeterminates:false,
            parent:this.listArr[0].parent
        })
      },
      
      listItemClick(event, item) {
        // console.log(item)
        
        this.$emit('getItemData', {
          clickObj: event.target,
          data: item,
          curLayerNum:this.curLayerNum,
          checkList:this.checkedList,
          plainOptions:this.plainOptions,
          
        })
      },
     
    },
    mounted() {
      this.currentLayerNum = this.curLayerNum

      this.listArr.forEach(element => {
        this.plainOptions.push(element.value)
        // console.log(this.plainOptions)
      })
 
    
       console.log('zhixingle yici')
      if (this.$refs.checkList) {
        let refsCheckListArr = Array.from(this.$refs.checkList)
        refsCheckListArr.forEach((item, index) => {
          let nodeArr = Array.from(item.children[0].children)
          // console.log(nodeArr)
          nodeArr.forEach((ele, i) => {
            if (i == 0) {
              let nodeArr2 = Array.from(ele.children)
            //   console.log(nodeArr2)
              nodeArr2.forEach(element => {
                element.dataset['layers'] = this.curLayerNum
              })
            } else {
              ele.dataset['layers'] = this.curLayerNum
            }
          })
        })
      }

      if(this.$refs.checkAllBox){
        //   console.log(this.$refs.checkAllBox)
          let refsCheckAllArr = Array.from(this.$refs.checkAllBox)
            refsCheckAllArr.forEach((item, index) => {
          let nodeArr = Array.from(item.children[0].children)
          // console.log(nodeArr)
          nodeArr.forEach((ele, i) => {
            if (i == 0) {
              let nodeArr2 = Array.from(ele.children)
            //   console.log(nodeArr2)
              nodeArr2.forEach(element => {
                element.dataset['layers'] = this.curLayerNum
              })
            } else {
              ele.dataset['layers'] = this.curLayerNum
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .multiCheckbox {
    width: 100%;
    height: 300px;

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

    .linkMulti_list {
      // padding: 5px 0px;
      display: inline-block;
      width: 100%;
      height: 100%;
      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;
        box-sizing: border-box;
      }

      ul {
        height: 264px;
        overflow: auto;
      }


      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%;
    }
  }
</style>