<template>
  <div class="app-content" style="height:450px;overflow:auto;">
    <a-spin :spinning="loading">
      <div>
      </div>
      <div class="frame-select">
        <div class="tree-select ">
          <!-- checkable  showSearch-->
          <a-tree v-model="checkedKeys" :expandedKeys="defaultExpandedKeys" :blockNode="true" style="width: 100%" :tree-data="treeData" @select="onClick" @check="onCheck" @expand="onExpand" />
        </div>
        <div class="transfer-select ">
          <a-transfer :titles="['待选专家', '已选专家']" :listStyle="{width: 400,height: 500}" :dataSource="mockData" :targetKeys="targetKeys" :filterOption="filterOption" @change="handleChange" @search="handleSearch" :render="item=>item.title">
          </a-transfer>
        </div>
      </div>
      <div style="text-align: center;padding: 5px;">
        <a-button type="primary" @click="submitUnit">提 交</a-button>
      </div>
    </a-spin>
  </div>
</template>
<script>
export default {
  name: 'expertGroupMembers',
  components: {

  },
  data () {
    return {
      checkedKeys: [],
      mockData: [],
      targetObj: [],
      targetKeys: [],
      treeData: [],
      loading: true,
      defaultExpandedKeys: []
    }
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  mounted () {
    this.load(this.value)
  },
  methods: {
    load (value) {
      this.$api.parameter.getTreeListByType({ typeId: 41 }).then(({ data = {} }) => {
        if (data) {
          this.treeData = data
          this.defaultExpandedKeys = [this.treeData[0].key]
          if (value && value.length > 0) {
            this.mockData = value
            this.targetObj = value
            for (let i = 0; i < value.length; i++) {
              this.targetKeys.push(value[i].key)
            }
            this.loading = false
          } else {
            this.loading = false
          }
        }
      }).catch(() => { });

    },
    seachExpert (value) {
      this.loading = true
      if (value && value.length > 0) {
        this.$api.expertSpec.getExpertListBySpecId({ specId: value }).then(({ data = {} }) => {
          if (data) {
            this.mockData = this.arrConcat(data, this.targetObj)
            this.loading = false
          }
        }).catch(() => { });
      } else {
        this.loading = false
      }
    },
    submitUnit () {
      this.loading = true
      this.$emit("input", this.targetObj);
      this.$emit("close", 'edit');
      this.$message.success('成功！')
    },
    onClick (value) {
      this.seachExpert(value)
    },
    onCheck (value) {
      this.seachExpert(value)
    },
    onExpand (value) {
      this.defaultExpandedKeys = value
    },
    filterOption (inputValue, option) {
      //   console.log('filterOption', inputValue, option)
      return option.description.indexOf(inputValue) > -1;
    },
    handleChange (targetKeys, direction, moveKeys) {
      this.targetObj = this.arrFilter(this.mockData, targetKeys);
      this.targetKeys = targetKeys
    },
    handleSearch (dir, value) {
     
    },
    arrConcat (arr1, arr2) {
      let arrs = [...arr1, ...arr2];
      //根据key去重
      let map = new Map();
      for (let item of arrs) {
        if (!map.has(item.key)) {
          map.set(item.key, item)
        }
      }
      return [...map.values()]
    },
    arrFilter (arr1, arr2) {
      let result = arr1.filter((a) => {
        return arr2.some(f => (f === a.key))
      })
      return result
    },
  },
}
</script>
 <style scoped lang="less">
.frame-select {
  width: 800px;
  height: 400px;
  border: 1px solid #f0f0f0;
  padding: 5px;
  border-radius: 4px 4px 0 0;
}
.tree-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 385px;
  overflow-x: auto;
  overflow-y: auto;
}
.transfer-select {
  margin-left: 250px;
  width: 530px;
  overflow-x: auto;
  overflow-y: auto;
}
.inline {
  position: relative;
  display: inline-block;
}
.app-content {
  /deep/ .ant-transfer .ant-transfer-list {
    width: 240px !important;
    height: 385px !important;
  }
}
</style>