<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.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.value"
            :checked="item.checked"
            @click.stop="listItemClick($event,item)"
          >{{item.name}}</a-checkbox>
          <!-- <span>{{item.name}}</span>                        -->
          <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>
export default {
  name: 'MultiCheckBox',
  props: ['title', 'listArr', 'curLayerNum', 'parentChecked'],
  data() {
    return {
      checkedList: [],
      indeterminate: false,
      checkAll: false,
      plainOptions: [],
      layersNum: 0, //控制层级
      currentLayerNum: 0, //当前层级是多少层,
      currentItem: null
    }
  },
  watch: {
    checkAll: function(n, o) {
      if (n != o) {
        // this.onCheckAllChange()
      }
    },
    // listArr(n,o){
    //     this.listArr.forEach(element => {

    //         this.plainOptions.push(element.value);
    //         if(element.checked){
    //             this.checkedList.push(element.value)
    //         }
    //     });
    //     if(this.checkedList.length==this.plainOptions.length){
    //         this.checkAll=true;
    //     }
    // },

    parentChecked: {
      handler(n, o) {
        console.log(n, o, '--parentChecked', this.curLayerNum)
        if (n) {
          this.checkAll = true
          this.listArr.forEach((item, index) => {
            item.checked = n
            this.checkedList.push(item.value)
          })
        } else if (n == false && o == true) {
          this.checkAll = false
          this.listArr.forEach((item, index) => {
            item.checked = n
          })
          this.checkedList = []
        }
      },
      immediate: true,
      deep: 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.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(item);
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? this.plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked
      })
      if (this.checkedList.length) {
        this.listArr.forEach(item => {
          this.$set(item, 'checked', true)
        })
      } else {
        this.listArr.forEach(item => {
          this.$set(item, 'checked', false)
        })
      }
    },
    listItemClick(event, item) {
      console.log(item)

      this.$emit('getItemData', {
        clickObj: event.target,
        data: item
      })
    },
    // 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

    this.listArr.forEach(element => {
      this.plainOptions.push(element.value)
      if (element.checked) {
        this.checkedList.push(element.value)
      }
    })
    if (this.checkedList.length == this.plainOptions.length) {
      this.checkAll = true
    }
    // console.log(this.checkedList)
    // console.log(this.curLayerNum)

    // console.log(this.parentChecked)

    console.log(this.$refs.checkList)
    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
          }
        })
      })
    }
  }
}
</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;
    }
    .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%;
  }
}
</style>