<template>
  <div>
    <!-- 左側待選列表 -->
    <div class="left-box">
      <p>待選列表</p>
      <el-input placeholder="輸入關鍵詞過濾" 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="輸入關鍵詞過濾" 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ā)的數據字段名
        isLeaf: 'leaf',   // leaf 字段判斷節(jié)點是否為葉子節(jié)點
        // 配置禁選的節(jié)點
        disabled: function(data, node) {
          // 如這里配置父節(jié)點、帶有disable屬性的節(jié)點禁選
          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: {
    // 根據關鍵詞過濾節(jié)點
    filterNode(value, data) {
      if(!value) return true;
      // labeName 為defaultProps中配置的label值，未配置默認為label
      return data.labeName.indexOf(value) !== -1;
    },
    // 懶加載出樹結構的最后一層節(jié)點
    async loadNode(node, resolve) {
      if(node.level === 0) {
        return resolve(node.data);   // 頂層數據默認展示
      } else {
        if(node.data.children && node.data.children.length > 0) {
          return resolve(node.data.children);
        } else {  // 最后一層數據，異步懶加載
          let tempData = await this.getDynamicData(node.data.id);
          return resolve(tempData);
        }
      }
    },
    // 獲取數據接口
    getDynamicData(id) {
    },
    // 移除節(jié)點
    removeData() {
      // 右側選中節(jié)點
      let removeKeys = this.$refs.treeRight.getCheckedKeys();
      this.rightData = this.rightData.filter(item => !removeKeys.includes(item.id));
      // 左側：僅保留右側列表中有的數據為勾選狀態(tài)
      let leftCheckKeys = this.rightData.map(item => item.id);
      this.$refs.treeLeft.setCheckedKeys(leftCheckKeys);
    },
    // 添加節(jié)點
    removeData() {
      // 獲取左側選中節(jié)點，作為右側的數據
      let checkNodes = this.$refs.treeLeft.getCheckedNodes();
      let checkKeys = this.$refs.treeLeft.getCheckedKeys();
      this.rightData = checkNodes;
    },
  }
</script>