<template>
  <div class="layout-select">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <div class="layout-select-header">
        <span>已选专家：</span>
        <div class="select-header-content">
          <a v-for="(item) in expertSelectKeys" :key="item.key">{{item.title}}</a>
        </div>
      </div>
      <div class="select-header-content">
        <a-input placeholder="专家姓名" v-model="personName" @change="changePersonName" />
      </div>
      <div class="layout-select-content ">
        <div class="content-inner">
          <div class="tree-select">
            <a-tree v-model="checkedKeys" :expandedKeys="defaultExpandedKeys" :blockNode="true" style="width: 100%" :tree-data="treeData" @select="onClick" @check="onCheck" @expand="onExpand" />
          </div>
          <div class="content-select ">
            <select-item v-model="expertSelectKeys" :dataList="dataList" />
          </div>
        </div>
      </div>
      <div class="layout-select-bottom">
        <a-button class="bt-normal" @click="onCancel">取消</a-button>
        <a-button type="primary" style="margin-left: 10px;margin-right: 5px" @click="submit">提交</a-button>
      </div>
    </a-spin>
  </div>
</template>
<script>
import { getType } from '@/views/utils/auth'
import selectItem from './selectItem'
export default {
  name: 'expertSelect',
  components: {
    selectItem
  },
  data () {
    return {
      checkedKeys: [],
      treeData: [],
      defaultExpandedKeys: [],
      loading: true,
      expertSelectKeys: [],
      expertSelectedRowKeys: [],
      dataList: [],
      personName: null,
      specArray: [],
    }
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    projGroupSelectedRowKeys: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  created () {
    this.loadTreeSelect()
    this.loadSpecList()
    let parentArray = []
    let specArray = ["00000000-0000-0000-0000-000000000000"]
    this.seachExpert(specArray, parentArray)
  },
  methods: {
    loadTreeSelect () {
      this.$api.parameter.getKnowledgeParameterTreeList().then(({ data = {} }) => {
        if (data) {
          this.treeData = data
          this.defaultExpandedKeys = [this.treeData[0].key]
        }
      }).catch(() => { this.loading = true });
    },
    loadSpecList () {
      this.$api.parameter.getSpecArray().then(({ data = {} }) => {
        if (data) {
          this.specArray = data
          this.buildSpecKeyMap()
        }
      })
    },
    buildSpecKeyMap() {
      this.specKeyMap = {}
      this.specArray.forEach(item => {
        this.specKeyMap[item.key] = 3
        this.specKeyMap[item.pkey] = 2
        this.specKeyMap[item.ppkey] = 1
      })
    },
    FromSpecArrayFindKey(key) {
      return this.specKeyMap[key] || 0
    },
    processExpertSearch(value) {
      const level = this.FromSpecArrayFindKey(value)
      console.log(level)
      if (level == 1)
        this.seachExpert(null, null, value)
      else if (level == 2)
        this.seachExpert(null, value, null)
      else
        this.seachExpert(value, null, null)
    },
    onClick (value, info) {
      this.processExpertSearch(value)
    },
    onCheck (value, info) {
      this.processExpertSearch(value)
    },
    onExpand (value) {
      this.defaultExpandedKeys = value
    },
    changePersonName () {
      this.seachExpert(null, null, null)
    },
    seachExpert (specId, pkey, ppkey) {
      this.loading = true
      if (this.personName !== null && this.personName !== '') {
        specId = null
        pkey = null
        ppkey = null
      }
      this.$api.expertSpec.getExpertListByExpertSpecIdOrParentId({ specId: specId, pkey: pkey, ppkey: ppkey, personName: this.personName }).then(({ data = {} }) => {
        if (data) {
          this.dataList = data
          this.expertFilter(this.expertSelectKeys, this.dataList)
          this.loading = false
        }
      }).catch(() => { });
      this.loading = false  
    },
    onCancel () {
      this.$emit("close", 'cancel')
    },
    submit () {
      this.loading = true
      if (this.expertSelectKeys.length == 0) {
        this.$message.error('请选择专家！')
        this.loading = false
        return
      }
      this.expertSelectedRowKeys = []
      for (let j = 0; j < this.expertSelectKeys.length; j++) {
        this.expertSelectedRowKeys.push(this.expertSelectKeys[j].key)
      }
      let pars = { projType: getType(), groupIds: this.projGroupSelectedRowKeys, expertIds: this.expertSelectedRowKeys }
      this.$api.projectAssign.assignProjectGroup(pars).then(({ data = {} }) => {
        if (data) {
          this.$message.success('分配成功！')
          this.$emit("close", 'assign')
        }
        this.loading = false
      }).catch(() => {
        this.$message.error('分配失败，请稍后再试！')
        this.loading = false
      })
    },
    expertFilter (expertSelectKeys, dataList) {
      if (!!expertSelectKeys.length && expertSelectKeys.length > 0) {
        for (let i = 0; i < dataList.length; i++) {
          for (let j = 0; j < expertSelectKeys.length; j++) {
            if (dataList[i].key == expertSelectKeys[j].key) {
              dataList[i].selected = true
            }
          }
        }
      }
    }
  },
}
</script>
 <style scoped lang="less">
.layout-select {
  width: 100%;
  height: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 4px 4px 4px 4px;

  .layout-select-header {
    position: relative;
    border-bottom: 1px solid #d9d9d9;
    width: 100%;
    height: 35px;
    padding: 7px 0px 0px 5px;
    .select-header-content {
      line-height: 35px;
      position: absolute;
      top: 0;
      left: 75px;
      width: calc(100% - 75px);
      height: 100%;
    }
    .select-header-content a {
      margin-left: 6px;
    }
  }
  .layout-select-content {
    width: 100%;
    height: calc(100% - 70px);
    padding: 3px;
    .content-inner {
      position: relative;
      width: 100%;
      height: 100%;
      border: 1px solid #e8e8e8;
      border-radius: 4px 4px 4px 4px;
    }
  }
  .layout-select-bottom {
    border-top: 1px solid #d9d9d9;
    width: 100%;
    height: 35px;
    vertical-align: middle;
    text-align: right;
    padding: 1px;
  }
  ::v-deep.ant-spin-nested-loading .ant-spin-container {
    width: 100%;
    height: 100%;
  }
}
.tree-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  border-right: 1px solid #e8e8e8;
}
.content-select {
  margin-left: 200px;
  width: calc(100% - 200px);
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
}
</style>
