<template>
  <div class="flex-between el-transferTree">
    <div class="pr-24 pt-24 br-r el-transferTree__right">
      <slot name="searchContent"></slot>
      <div class="flex-between mb-16 el-transferTree-right__all">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        >全选</el-checkbox>
        <div class="text-tip">{{`${value.length}/${leafNodeIdList.length}`}}</div>
      </div>
      
      <el-tree
        ref="tree"
        :data="data"
        show-checkbox
        :node-key="props.id"
        :default-checked-keys="value"
        :default-expanded-keys="value"
        :props="props"
        @check-change="handleCheckChange"
      >
      </el-tree>
    </div>
    <div class="pl-24 pt-24 el-transferTree__left">
      <div class="mb-24">已选房间（{{ value.length }}）</div>
      <div
        class="flex-between mb-16"
        v-for="(item, index) in lastChildrenList"
        :key="index"
      >
        <div class="text-14">{{ item[props.label] }}</div>
        <i
          class="el-icon-close pointer ml-16"
          @click="delRoom(item)"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ElTransferTree',
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    value: {
      type: Array,
      default() {
        return [];
      }
    },
    props: {
      type: Object,
      default() {
        return {
          label: 'label',
          id: 'id',
          children: 'children'
        };
      }
    }
  },
  data() {
    return {
      leafNodeList: [],
      leafNodeIdList: [] // 子节点id数组
    };
  },
  computed: {
    lastChildrenList() {
      this.leafNodeList = [];
      this.leafNodeIdList = [];
      this.data.forEach(e => {
        const childrenList = e[this.props.children];
        if (!childrenList) {
          this.leafNodeList.push(e);
        } else {
          this.recursionData(childrenList);
        }
      });
      this.leafNodeIdList = this.leafNodeList.map(e => e[this.props.id]);
      return this.leafNodeList.filter(e => this.value.includes(e[this.props.id]));
    },
    isIndeterminate() {
      const checkedLen = this.value.length;
      return checkedLen > 0 && checkedLen < this.leafNodeIdList.length;
    },
    checkAll: {
      get() {
        return this.value.length === this.leafNodeIdList.length;
      },
      set() {}
    }
  },
  methods: {
    handleCheckAllChange(val) {
      const list = val ? this.leafNodeIdList : [];
      this.$refs.tree.setCheckedKeys(list);
      this.handleCheckChange();
    },
    delRoom(item) {
      const checkedKeys = this.value.filter(e => e !== item[this.props.id]);
      const checkedNodes = this.lastChildrenList;
      this.$refs.tree.setCheckedKeys(checkedKeys);
      this.emitData(checkedKeys, checkedNodes);
    },
    handleCheckChange() {
      const checkedKeys = this.$refs.tree.getCheckedKeys();
      const checkedNodes = this.$refs.tree.getCheckedNodes();
      this.emitData(checkedKeys, checkedNodes);
    },
    emitData(allCheckedKeys, checkedNodes) {
      const checkedKeys = allCheckedKeys.filter(e => this.leafNodeIdList.includes(e));
      let checkedNodesFilter = [];
      checkedNodes.forEach(e => {
        if (!e[this.props.children]) {
          checkedNodesFilter.push({
            id: e[this.props.id],
            label: e[this.props.label]
          });
        }
      });
      this.$emit('input', checkedKeys);
      this.$emit('change', checkedKeys, checkedNodesFilter);
    },
    // 递归源数据
    recursionData(childrenList) {
      childrenList && childrenList.forEach(c => {
        this.leafNodeList.push(c);
        this.recursionData(c[this.props.children]);
      });
    }
  }
};
</script>
