<!-- 树形穿梭框组件 -->
<template>
  <div class="transfer-custom">
    <span class="transfer-custom-item left-item">({{ canBookLength }})</span>
    <span class="transfer-custom-item right-item">({{ bookLength }})</span>
    <tree-transfer
      :placeholder="placeholder"
      :title="title"
      :from_data="data"
      :to_data="toData"
      :default-props="{ ...defaultProps, label }"
      :mode="mode"
      height="540px"
      filter
      :pid="pid"
      :open-all="openAll"
      width="120%"
      @add-btn="add"
      @remove-btn="remove"
    />
  </div>
</template>

<script>
import treeTransfer from 'el-tree-transfer' // 引入

export default {
  components: { treeTransfer },
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    title: {
      type: Array,
      default() {
        return ['待选车位', '已选车位']
      }
    },
    placeholder: {
      type: String,
      default() {
        return '请输入车位名称'
      }
    },
    label: {
      type: String,
      default() {
        return 'name'
      }
    },
    // 配置项-同el-tree中props
    defaultProps: {
      type: Object,
      default: () => ({
        label: 'name',
        children: 'children',
        isLeaf: 'leaf',
        disable: 'checked'
      })
    },
    toData: {
      type: Array,
      default() {
        return []
      }
    },
    pid: {
      type: String,
      default: 'pid'
    },
    openAll: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      mode: 'transfer' // transfer addressList
    }
  },
  computed: {
    canBookLength() {
      return this.getDataLength(this.data)
    },
    bookLength() {
      return this.getDataLength(this.toData)
    }
  },
  created() {
    this.$emit('handle') // 初始化执行一次
  },
  methods: {
    // 获取原数据的length
    getDataLength(data) {
      const obj = { length: 0 }
      this.handleRecursion(data, obj)
      return obj.length
    },
    // 递归计算待选和已选的子节点总长度
    handleRecursion(data, obj) {
      data.forEach(item => {
        if (item.children?.length) {
          return this.handleRecursion(item.children, obj)
        } else {
          obj.length++
        }
      })
    },
    // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
    changeMode() {
      if (this.mode == 'transfer') {
        this.mode = 'addressList'
      } else {
        this.mode = 'transfer'
      }
    },
    // 监听穿梭框组件添加
    add(data, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      // console.log('data:', data)
      // console.log('toData:', toData)
      // console.log('obj:', obj)
      // console.log(this.data, this.toData, 'data and toData')
      this.$emit('handle')
    },
    // 监听穿梭框组件移除
    remove(data, toData, obj) {
      this.$emit('handle')
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      // console.log('data:', data)
      // console.log('toData:', toData)
      // console.log('obj:', obj)
    }
  } // 注册
}
</script>

<style lang="scss">
.transfer-custom{
  width: 600px;
  position: relative;
  .wl-transfer .transfer-center-item{
    padding: 0 ;
  }
  label.el-checkbox{
    width: 15px;
  }
  .el-button.el-button--primary.is-circle{
    border-radius: 0 !important;
  }
  .transfer-custom-item{
    position: absolute;
    top: 4px;
    z-index: 10;
  }
  .left-item{
    left: 120px;
  }
  .right-item{
    left: calc(73% + 120px);
  }
}
</style>
