<template>
  <div :class="classId[idx][0]">
    <div v-for="(tree, index) in trees" :key="tree.id">
      <div :class="classId[idx][1]">
        <!-- {{tree.checkedList}}
          {{tree.children.length}}
          {{tree.indeterminate}}
        {{tree.checkAll}}-->
        <a-checkbox
          @change="e=>{onChange(tree, index, e)}"
          :indeterminate="tree.indeterminate === true"
          :checked="selectList.indexOf(tree.id)>-1?tree.checkAll=true:tree.checkAll=false"
          v-model="tree.checkAll"
        >{{tree.name}}</a-checkbox>
      </div>
      <tree
        v-model="selectList"
        v-if="tree.children.length > 0"
        v-on:closeParent="close"
        :trees="tree.children"
        :classId="classId"
        :idx="idx+1"
      ></tree>
    </div>
  </div>
</template>
<script>
export default {
  name: 'tree',
  props: {
    value: {
      type: Array,
      default: function () {
        return []
      }
    },
    trees: {
      type: Array,
      default: function () {
        return []
      }
    },
    classId: {
      type: Array,
      default: function () {
        return []
      }
    },
    idx: {
      type: Number,
      default: function () {
        return null
      }
    }
  },
  watch: {
    value (val) {
      this.selectList = val
    }
  },
  data () {
    return {
      selectList: this.value
    }
  },
  methods: {
    close (data) {
      let oIndex
      this.trees.map((item, index) => {
        if (item.id === data.parentId) oIndex = index
      })
      let isIndeterminate = false
      this.trees[oIndex].children.map(item => {
        if (item.indeterminate) isIndeterminate = true
      })
      if (isIndeterminate) {
        this.trees[oIndex].indeterminate = true
      } else if (
        data.checkedList.length === 0 ||
        data.checkedList.length === this.trees[oIndex].children.length
      ) {
        this.trees[oIndex].indeterminate = false
      } else {
        this.trees[oIndex].indeterminate = true
      }
      var ind = this.selectList.indexOf(data.parentId)
      if (ind === -1) {
        this.selectList.push(data.parentId)
      } else if (ind !== -1 && data.checkedList.length === 0) {
        this.selectList.splice(ind, 1)
      }
      this.trees[oIndex].checkedList = data.checkedList
      if (data.checkedList.length === 0) this.trees[oIndex].checkAll = false
      var checkedList = []
      this.trees.map(ele => {
        if (ele.checkAll) checkedList.push(ele.id)
      })
      this.$emit('closeParent', {
        parentId: this.trees[oIndex].parentId,
        checkedList,
        trees: this.trees
      })
    },
    onChange (tree, index, e) {
      let that = this
      var ind = this.selectList.indexOf(tree.id)
      // 当存在
      if (!e.target.checked) {
        // 删除当前选中数据
        this.selectList.splice(ind, 1)
        tree.indeterminate = false
        tree.checkedList = []
        // 选中的时候先向下递归添加是否选中同时删除所有id
        const isCheckAll = data => data.map(item => {
          // 将子节点全部置位false
          item.indeterminate = false
          item.checkAll = false
          if (that.selectList.indexOf(item.id) !== -1) that.selectList.splice(that.selectList.indexOf(item.id), 1)
          item.checkedList = []
          return {
            ...item,
            children: isCheckAll(item.children)
          }
        })
        this.trees[index].children = isCheckAll(this.trees[index].children)
        let checkedList = []
        this.trees.map(ele => {
          if (ele.checkAll) checkedList.push(ele.id)
        })
        this.$emit('closeParent', {
          parentId: this.trees[index].parentId,
          checkedList: checkedList,
          index
        })
      } else {
        // 不存在 则新增
        this.selectList.push(tree.id)
        tree.indeterminate = false
        tree.checkedList = tree.plainOptions
        // 选中的时候先向下递归添加是否选中同时删除所有id
        const isCheckAll = data => data.map(item => {
          // 将子节点全部置位false
          item.indeterminate = false
          item.checkAll = true
          if (that.selectList.indexOf(item.id) === -1) that.selectList.push(item.id)
          item.checkedList = item.plainOptions
          return {
            ...item,
            children: isCheckAll(item.children)
          }
        })
        this.trees[index].children = isCheckAll(this.trees[index].children)
        let checkedList = []
        this.trees.map(ele => {
          if (ele.checkAll) checkedList.push(ele.id)
        })
        this.$emit('closeParent', {
          parentId: this.trees[index].parentId,
          checkedList: checkedList
        })
      }
    }
  }
}
</script>
<style scoped>
.permisson {
    display: flex;
    height: 500px;
  }
  .permissonLeft {
    height: 65px;
    line-height: 65px;
    font-weight: 400;
    width: 9.5%;
    text-align: right;
    font-size: 14px;
    color: rgba(0,0,0,0.85);
  }
  .permissonRight {
    font-family: 'PingFangSC-Medium;';
    height: 500px;
    width: 100%;
    font-size: 14px;
    color: rgba(0,0,0,0.85);
  }
  .permissonTitle {
    padding: 22px 20px;
    background: #FAFAFA;
    border: 1px solid #F8F8F8;
    border-radius: 4px 4px 0px 0px;
  }
  .confirm {
    margin-top: 40px;
  }
  .addOrRights /deep/ .ant-checkbox-group {
    width: 100% !important;
    color: rgba(0,0,0,0.85);
  }
  .addOrRights /deep/.ant-row {
    width: 100% !important;
  }
  .selectPeople {
    width: 100%;
    font-size: 14px;
    color: #cccccc;
    min-height: 40px;
    line-height: 40px;
    margin-left: 5px;
    text-indent: 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
  }
  .box2>div{
    display: flex;
    border: 1px solid #f8f8f8;
  }
  .box2-2{
    flex: 4;
    border-right: 1px solid #f8f8f8;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }
  .box3{
    flex: 20;
    padding-top: 22px;
  }
  .box3>div{
    width: 25%;
    float: left;
  }
  .box3-3{
    padding-bottom: 22px;
    padding-left: 22px;
  }
</style>