<template>
  <div>
    <!-- 左側(cè)待選列表 -->
    <div class="left-box">
      <p>待選列表</p>
      <el-input placeholder="輸入關(guān)鍵詞過濾" v-model="leftFilterText" clearable/>
      <el-tree
        ref="treeLeft"
        :data="leftData"
        show-checkbox
        node-key="id"
        props="defaultProps"
        :load="loadNode"
        lazy
        :filter-node-method="filterNode"  
      >
      </el-tree>
    </div>
    <!-- 穿梭按鈕 -->
    <div class="oper-box">
      <el-button circle type="primary" icon="el-icon-arrow-left" @click="removeData"></el-button>
      <el-button circle type="primary" icon="el-icon-arrow-right" @click="addData"></el-button>
    </div>
    <div class="right-box">
      <p>已選列表</p>
      <el-input placeholder="輸入關(guān)鍵詞過濾" v-model="rightFilterText" clearable/>
      <el-tree
        ref="treeRight"
        :data="rightData"
        show-checkbox
        node-key="id"
        props="defaultProps"
        :filter-node-method="filterNode"  
      >
      </el-tree>
    </div>
  </div>
</template>
<script>
  data(){
    return {
      checkAll: false,
      leftFilterText: '',
      rightFilterText: '',
      defaultProps: {
        chilren: 'children',
        label: 'labelName',   // 適配后端下發(fā)的數(shù)據(jù)字段名
        isLeaf: 'leaf',   // leaf 字段判斷節(jié)點(diǎn)是否為葉子節(jié)點(diǎn)
        // 配置禁選的節(jié)點(diǎn)
        disabled: function(data, node) {
          // 如這里配置父節(jié)點(diǎn)、帶有disable屬性的節(jié)點(diǎn)禁選
          if('children' in data || data.disable) {
            return true;
          } else {
            return false;
          }
        }
      },
      leftData: [],
      rightData: []
    }
  },
  watch: {
    leftFilterText(val) {
      this.$refs.treeLeft.filter(val);
    },
    rightFilterText(val) {
      this.$refs.treeRight.filter(val);
    }
  },
  methods: {
    // 根據(jù)關(guān)鍵詞過濾節(jié)點(diǎn)
    filterNode(value, data) {
      if(!value) return true;
      // labeName 為defaultProps中配置的label值，未配置默認(rèn)為label
      return data.labeName.indexOf(value) !== -1;
    },
    // 懶加載出樹結(jié)構(gòu)的最后一層節(jié)點(diǎn)
    async loadNode(node, resolve) {
      if(node.level === 0) {
        return resolve(node.data);   // 頂層數(shù)據(jù)默認(rèn)展示
      } else {
        if(node.data.children && node.data.children.length > 0) {
          return resolve(node.data.children);
        } else {  // 最后一層數(shù)據(jù)，異步懶加載
          let tempData = await this.getDynamicData(node.data.id);
          return resolve(tempData);
        }
      }
    },
    // 獲取數(shù)據(jù)接口
    getDynamicData(id) {
    },
    // 移除節(jié)點(diǎn)
    removeData() {
      // 右側(cè)選中節(jié)點(diǎn)
      let removeKeys = this.$refs.treeRight.getCheckedKeys();
      this.rightData = this.rightData.filter(item => !removeKeys.includes(item.id));
      // 左側(cè)：僅保留右側(cè)列表中有的數(shù)據(jù)為勾選狀態(tài)
      let leftCheckKeys = this.rightData.map(item => item.id);
      this.$refs.treeLeft.setCheckedKeys(leftCheckKeys);
    },
    // 添加節(jié)點(diǎn)
    removeData() {
      // 獲取左側(cè)選中節(jié)點(diǎn)，作為右側(cè)的數(shù)據(jù)
      let checkNodes = this.$refs.treeLeft.getCheckedNodes();
      let checkKeys = this.$refs.treeLeft.getCheckedKeys();
      this.rightData = checkNodes;
    },
  }
</script>