<template>
  <!-- 自定义树形穿梭框组件、理论上左右均可选择是否为树形结构，目前固定为左侧树形、右侧无层级结构 -->
  <div class="tree-transfer">
    <!-- 穿梭框左侧 -->
    <div class="tree-transfer-left">
      <div class="title">
        <span
          ><el-checkbox
            :indeterminate="isIndeterminate1"
            v-model="checkAll1"
            @change="handleCheckAllChange1"
          ></el-checkbox>
          可选列表</span
        >

        <span>{{ nowKx }}/{{ this.$parent.$parent.all }}</span>
      </div>
      <div class="transfer-content">
        <el-input placeholder="请输入搜索内容" v-model="filterText"> </el-input>
        <!-- 左侧采用element-ui的el-tree -->
        <el-tree
          ref="treeLeft"
          :data="dataLeft"
          show-checkbox
          :node-key="defaultProps.id"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          @check-change="getTreeCheck"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
    </div>
    <!-- 穿梭框中间按钮区域 -->
    <div class="tree-transfer-middle">
      <el-button
        icon="el-icon-arrow-left"
        @click="remove"
        size="mini"
      ></el-button>
      <el-button
        icon="el-icon-arrow-right"
        @click="add"
        size="mini"
      ></el-button>
    </div>
    <!-- 穿梭框右侧 -->
    <div class="tree-transfer-right">
      <div class="title">
        <div style="display: flex">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          ></el-checkbox>
          &nbsp;已选列表
        </div>
        <span>{{ nowYx }}/{{ dataRight.length }}</span>
      </div>
      <!-- 右侧直接放置结果 -->
      <div class="transfer-content">
        <el-input placeholder="请输入搜索内容" v-model="filterText1">
        </el-input>
        <el-checkbox-group
          class="transfer_group"
          v-model="rightChecked"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            v-for="item in dataRight"
            :label="item"
            :key="item[defaultProps.id]"
          >
            <!-- <el-tooltip
                class="item"
                effect="dark"
                :content="item[defaultProps.label]"
                placement="bottom-start"
              > -->
            <span>{{ item[defaultProps.label] }}</span>
            <!-- </el-tooltip> -->
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  // data为原始树的数据，defaultProps默认设置字段，checkedList为初始选中的list集合
  props: ["datas", "defaultProps", "checkedList"],
  data() {
    return {
      nowYx: 0,
      checkAll: false,
      isIndeterminate: false,
      checkAll1: false,
      isIndeterminate1: false,
      filterText: "", // 搜索名
      filterText1: "",
      yuansiData: [],
      dataLeft: [],
      dataRight: [],
      rightChecked: [],
      nowKx: 0,
    };
  },
  watch: {
    // 搜索
    filterText(val) {
      this.$refs.treeLeft.filter(val);
    },
    // 搜索
    filterText1(val) {
      let arr = this.dataRight.filter((item) => {
        return item.label.indexOf(val) != -1;
      });
      this.dataRight = arr;
    },
    // 初始选中集合改变时，左侧的数据对应选中，右侧的列表加上
    checkedList() {
      this.$nextTick(() => {
        this.checkedList.map((item, index) => {
          this.$refs.treeLeft.setChecked(item[this.defaultProps.id], true);
        });
        this.dataRight = this.checkedList;
      });
    },
  },
  mounted() {
    this.dataLeft = this.datas;
    this.yuansiData = JSON.parse(JSON.stringify(this.datas));
  },
  methods: {
    getYx() {
      // this.nowYx=thisi
    },
    handleCheckAllChange1(val) {
      console.log(val, 98, this.dataLeft);
      if (val) {
        // 	设置目前勾选的节点，使用此方法必须设置 node-key 属性
        this.$refs.treeLeft.setCheckedNodes(this.dataLeft);
      } else {
        // 全部不选中
        this.$refs.treeLeft.setCheckedNodes([]);
      }
      this.checkAll1 = val;
      this.isIndeterminate = false;
    },
    getLeft() {
      this.$refs.treeLeft.setCheckedNodes(this.dataRight);
    },
    getTreeCheck(a, b, c) {
      this.nowKx = 0;
      let list = this.$refs.treeLeft.getCheckedNodes();
      list.map((item, index) => {
        if (
          !item[this.defaultProps.children] ||
          item[this.defaultProps.children].length == 0
        ) {
          this.nowKx += 1;
        }
      });

      let arr = [];
      this.dataLeft.forEach((item) => {
        arr.push(item.id);
      });
      let lh = [];
      this.$refs.treeLeft.getCheckedNodes().forEach((el) => {
        if (arr.indexOf(el.id) > -1) {
          lh.push(el);
        }
      });
      if (this.$refs.treeLeft.getHalfCheckedKeys().length > 0) {
        this.isIndeterminate1 = true;
        this.checkAll1 = false;
      } else if (this.$refs.treeLeft.getHalfCheckedKeys().length == 0) {
        if (lh.length == this.dataLeft.length) {
          this.isIndeterminate1 = false;
          this.checkAll1 = true;
        } else {
          this.isIndeterminate1 = true;
          this.checkAll1 = false;
        }
        if (lh.length == 0) {
          this.isIndeterminate1 = false;
        }
      }
    },
    handleCheckAllChange(val) {
      console.log(val, 88);
      this.rightChecked = val ? this.dataRight : [];
      this.isIndeterminate = false;
      this.nowYx = this.rightChecked.length;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.dataRight.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.dataRight.length;
      if (value.length == 0) {
        this.isIndeterminate = false;
        this.checkAll = false;
      }
      console.log(value);
      this.nowYx = checkedCount;
    },

    // 树筛选
    filterNode(value, data) {
      if (!value) return true;
      return data[this.defaultProps.label].indexOf(value) !== -1;
    },
    /**处理只能选择最后一级 */
    filterTreeData(treeData) {
      return treeData.filter((item) => {
        if (
          item[this.defaultProps.children] &&
          item[this.defaultProps.children].length > 0
        ) {
          item.disabled = true;
          item.children = this.filterTreeData(item[this.defaultProps.children]);
        } else {
          item[this.defaultProps.label] = `${item[this.defaultProps.label]}`;
        }
        return item;
      });
    },
    // 添加到右侧
    add() {
      this.rightChecked = [];
      // 获取所有选中的项,将最后一级选中的节点添加到右侧已选
      this.dataRight = [];
      let list = this.$refs.treeLeft.getCheckedNodes();
      list.map((item, index) => {
        if (
          !item[this.defaultProps.children] ||
          item[this.defaultProps.children].length == 0
        ) {
          this.dataRight.push(item);
          // this.$refs.treeLeft.setCheckedKeys([],false)
        }
      });
    },

    // 移除到左侧
    remove() {
      let rightCheckedData = JSON.parse(JSON.stringify(this.rightChecked));
      rightCheckedData.map((item, index) => {
        this.$refs.treeLeft.setChecked(item[this.defaultProps.id], false);
        this.dataRight.map((right, rightIndex) => {
          if (item[this.defaultProps.id] == right[this.defaultProps.id]) {
            this.dataRight.splice(rightIndex, 1);
          }
        });
      });
      console.log(this.dataRight, 998);
      if (this.dataRight.length == 0) {
        this.checkAll = false;
      }
      this.isIndeterminate = false;
      // this.$refs.treeLeft.insertBefore()
    },
    // 重置数据
    reset() {
      // 重置左侧
      let list = this.$refs.treeLeft.getCheckedNodes();
      list.map((item, index) => {
        this.$refs.treeLeft.setChecked(item, false);
      });
      // 重置右侧
      this.dataRight = [];
      this.rightChecked = [];
    },
    // 返回当前选中的值
    getVal() {
      return this.dataRight;
    },
  },
};
</script>
  <style scoped>
.el-checkbox .is-disabled {
  display: none;
}
.el-checkbox-group {
  width: 100%;
  position: relative;
  overflow: auto;
  overflow-x: hidden;
}
</style>
  <style scoped lang="scss">
/deep/ .el-input__inner {
  border-radius: 20px;
}
.tree-transfer {
  display: flex;
  min-height: 250px;
  justify-content: center;
  .title {
    padding: 10px 20px;
    border-bottom: 1px #e5e5e5 solid;
    background: #f3f4f7;
    display: flex;
    height: 20px;
    line-height: 100%;
    align-items: center;
    justify-content: space-between;
    .el-checkbox {
      margin-bottom: 0 !important;
    }
  }
  .transfer-content {
    padding: 10px;
  }
  .tree-transfer-left {
    max-width: 640px;
    min-width: 400px;
    border: 1px #e5e5e5 solid;
    border-radius: 4px;
    max-height: 540px;
    overflow-y: scroll;
  }
  .tree-transfer-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 120px;
  }
  .tree-transfer-right {
    max-width: 640px;
    min-width: 400px;
    border: 1px #e5e5e5 solid;
    border-radius: 4px;
    max-height: 540px;
    overflow-y: scroll;
    .el-checkbox {
      display: block;
      margin-bottom: 5px;
    }
  }
}
</style>