<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-seach-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" checkable :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 () {
    if (!!this.projGroupSelectedRowKeys) {
      this.loadTreeSelect()
    }
  },
  methods: {
    getGroupProjectInfo () {
      let pars = { groupIds: this.projGroupSelectedRowKeys }
      this.$api.projectGroupAssign.getGroupProjectInfo(pars).then(({ data = {} }) => {
        if (data) {
          this.checkedKeys = data.spec
          this.defaultExpandedKeys = data.expanded
          this.seachExpert()
        }
        this.loading = false
      }).catch(() => {
        this.$message.error('error！')
        this.loading = false
      })
    },
    onClick (value, info) {
    },
    onCheck (value, info) {
      this.checkedKeys = value
      this.seachExpert()
    },
    onExpand (value) {
      this.defaultExpandedKeys = value
    },
    onCancel () {
      this.$emit("close", 'cancel')
    },
    loadTreeSelect () {
      this.$api.parameter.getKnowledgeInfoList1().then(({ data = {} }) => {
        if (data) {
          this.treeData = data
          // this.defaultExpandedKeys = [this.treeData[0].key]
          this.getGroupProjectInfo()
        }
      }).catch(() => { this.loading = true });
    },
    changePersonName () {
      this.seachExpert()
    },
    seachExpert () {
      this.loading = true
      this.$api.expertSpec.getExpertListByExpertSpecIds({ specIds: this.checkedKeys, groupIds: this.projGroupSelectedRowKeys, personName: this.personName }).then(({ data = {} }) => {
        if (data) {
          this.dataList = data
          this.expertFilter(this.expertSelectKeys, this.dataList)
          this.loading = false
        }
      }).catch(() => { this.loading = false });
    },
    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;
  font-size: 8pt;

  .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: 60px;
      width: calc(100% - 60px);
      height: 100%;
      padding: 2px;
    }
    .select-header-content a {
      margin-left: 6px;
    }
  }
  .select-seach-content {
    padding: 3px;
  }
  .layout-select-content {
    .ant-tree {
      font-size: 8pt !important;
    }
    ::v-deep .ant-tree .ant-tree-checkbox {
      margin: 0 0 !important;
    }
    ::v-deep .ant-tree li span.ant-tree-switcher,
    .ant-tree li span.ant-tree-iconEle {
      width: 16px !important;
    }
    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: left;
    padding: 1px;
  }
  ::v-deep.ant-spin-nested-loading .ant-spin-container {
    width: 100%;
    height: 100%;
  }
}
.tree-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  border-right: 1px solid #e8e8e8;
}
.content-select {
  margin-left: 320px;
  width: calc(100% - 320px);
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
}
</style>