<template>
  <div class="app-content page-common-layout">
    <div class="page-layout">
      <div class="page-head">
        <a-tabs :activeKey="tabsActive" @tabClick="tabclick">
          <a-tab-pane key="1" tab="分配到专家"></a-tab-pane>
          <a-tab-pane key="2" tab="分配到专家组" force-render></a-tab-pane>
        </a-tabs>
        <div v-if="tabsActive=='1'">
          <a-form :form="expertForm" :model="expertSearchForm" layout="inline" class="search_form">
            <a-form-item>
              <a-input placeholder="姓名" v-model="expertSearchForm.personName" :maxLength="100" style="width: 150px" />
            </a-form-item>
            <a-form-item>
              <a-input placeholder="工作单位" v-model="expertSearchForm.workUnit" :maxLength="100" style="width: 150px" />
            </a-form-item>
            <a-form-item>
              <para-multi-select-tow v-model="expertSearchForm.spec" @parentChange="parChange" :title="'专业'" :objType="'expert'" :typeId="57" :width="150" />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" icon="search" @click="expertSearch">搜索</a-button>
              <a-button icon="reload" style="margin-left: 10px" @click="expertReset" class="bt-normal">重置</a-button>
            </a-form-item>
          </a-form>
          <a-divider style="height: 1px; background-color: #e8e8e8;" />
          <a-table :dataSource="expertTableData" :scroll="{ y: 200 }" :row-selection="{ selectedRowKeys: expertSelectedRowKeys, onChange: onExpertSelectChange }" :columns="expertColumns" rowKey="id" :pagination="false" :loading="expertLoading">
            <template slot="expertName" slot-scope="record">
              <a @click="expertView(record.id)">{{record.personName}}</a>
              <!-- <a-tag :color="'green'">{{record.personName}}</a-tag> -->
              <!-- <span v-if="record">{{record.personName}}</span> -->
            </template>
            <template slot="assignInfo" slot-scope="record">
              <a-tag v-for="(obj, index) in record.assignInfo" :key="index" color="#87d068">
                <a>{{obj.year+'('+ obj.assignCount+')'}}</a>
              </a-tag>
              <a-tag v-if="!record.assignInfo||record.assignInfo.length==0" color="orange">未分配</a-tag>
            </template>
          </a-table>
        </div>
        <div v-else>
          <a-form :form="groupForm" :model="groupSearchForm" ref="formRef" layout="inline" class="search_form">
            <a-form-item>
              <base-select v-model="groupSearchForm.year" :type="4" :isAll="true" :width="150" :title="'年度'" />
            </a-form-item>
            <a-form-item>
              <base-select v-model="groupSearchForm.batch" :type="10" :isAll="true" :width="150" :title="'批次'" />
            </a-form-item>
            <a-form-item>
              <a-input placeholder="专家组名称" v-model="groupSearchForm.name" :maxLength="100" style="width:150px" />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" icon="search" @click="groupSearch">搜索</a-button>
              <a-button icon="reload" style="margin-left: 10px" @click="groupReset" class="bt-normal">重置</a-button>
            </a-form-item>
          </a-form>
          <a-divider style="height: 1px; background-color: #e8e8e8;" />
          <a-table :dataSource="groupTableData" :scroll="{ y: 200 }" :row-selection="{ selectedRowKeys:groupSelectedRowKeys, onChange: onGroupSelectChange }" :columns="groupColumns" rowKey="id" :pagination="false" :loading="groupLoading">
            <template slot="name" slot-scope="record">
              <a>{{record.name}}</a>
            </template>
            <template slot="assignInfo" slot-scope="record">
              <a-tag v-for="(obj, index) in record.assignInfo" :key="index" color="#87d068">
                <a>{{obj.year+'('+ obj.assignCount+')'}}</a>
              </a-tag>
              <a-tag v-if="!record.assignInfo||record.assignInfo.length==0" color="orange">未分配</a-tag>
            </template>
          </a-table>
        </div>
      </div>
      <div class="page-center">
        <a-form :form="projForm" :model="projSearchForm" layout="inline" class="search_form">
          <a-form-item>
            <a-input placeholder="项目名称" v-model="projSearchForm.projName" :maxLength="100" style="width: 150px" />
          </a-form-item>
          <!-- <a-form-item>
            <a-input placeholder="项目编号" v-model="projSearchForm.projNo" :maxLength="100" style="width: 150px" />
          </a-form-item> -->
          <a-form-item>
            <a-input placeholder="申报单位" v-model="projSearchForm.appUnitName" :maxLength="100" style="width: 150px" />
          </a-form-item>
          <!-- <a-form-item>
            <a-input placeholder="申报人" v-model="projSearchForm.appPersonName" :maxLength="50" style="width: 150px" />
          </a-form-item> -->
          <a-form-item>
            <a-select default-value="" placeholder="分配状态" v-model="projSearchForm.assignState" style="width: 150px" @change="handleAssignChange">
              <a-select-option value="">--请选择状态--</a-select-option>
              <a-select-option value="1">已分配</a-select-option>
              <a-select-option value="0">未分配</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <para-multi-select-tow v-model="projSearchForm.knowledgeId" @parentChange="parChange" :title="'学科'" :objType="'project'" :typeId="57" :width="150" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="search" @click="projSearch">搜索</a-button>
            <a-button icon="reload" style="margin-left: 10px" @click="projReset" class="bt-normal">重置</a-button>
          </a-form-item>
        </a-form>
        <a-divider style="height: 1px; background-color: #e8e8e8;" />
        <a-table :dataSource="projTableData" :scroll="{ y: 250 }" :row-selection="{ selectedRowKeys: projSelectedRowKeys, onChange: onProjSelectChange }" :columns="projColumns" rowKey="id" :pagination="false" :loading="projLoading">
          <template slot="projName" slot-scope="record">
            <a @click="projectView(record.id)">{{record.projName}}</a>
          </template>
          <!-- <template slot="expertEvaluation" slot-scope="record">
          <a-tag v-for="data in record.evaluationList" :key="data.id" :color="evaluationColor(data)" @click="evaluationView(data)">{{evaluationText(data)}}</a-tag>
        </template> -->
          <template slot="assignInfo" slot-scope="record">
            {{record.pageSize}}
            <!-- {{CalculateAvgScore(record)}} -->
          </template>
        </a-table>
      </div>
      <div class="page-bottom">
        <a-button icon="deployment-unit" type="primary" @click="onDistribute">分配</a-button>
      </div>
    </div>
    <a-modal v-model="expertVisibleView" title="查看专家" width="700px" :footer="null" destroyOnClose>
      <expert-view v-model="expertId"></expert-view>
    </a-modal>
    <a-modal v-model="projectVisibleView" v-if="projectVisibleView" title="项目详情" width="94%" :footer="null" :dialog-style="{ top: '8%' }" destroyOnClose :maskClosable="false">
      <project-view v-model="projectId" @close="() => this.projectVisibleView = false"></project-view>
    </a-modal>
    <a-modal v-model="evaluationVisibleView" title="查看专家评价" width="600px" :footer="null" destroyOnClose>
      <evaluation-view v-model="evaluationId" @close="closeWindow"></evaluation-view>
    </a-modal>
  </div>
</template>

<script>
import { isEmptyParams } from '@/views/utils/common'
import paraMultiSelectTow from '@/views/components/common/paraMultiSelectTow'
import projectView from '@/views/report/project/components/projectView'
import expertView from '@/views/expert/components/expertView'
import moment from 'moment'

export default {
  name: "projectAssign",
  components: {
    projectView,
    paraMultiSelectTow,
    expertView,
    evaluationView, 
  },
  data () {
    return {
      tabsActive: '1',
      expertForm: this.$form.createForm(this, { name: "expertSearch" }),
      expertSearchForm: {
        personName: '',
        workUnit: null,
        specParentId: null,
        spec: null,
        expert: 1
      },
      expertTableData: [],
      expertColumns: [
        { title: '姓名', scopedSlots: { customRender: 'expertName' }, align: 'center' },
        { title: "工作单位", dataIndex: "workUnit", align: 'center' },
        { title: "专业", dataIndex: "specName", align: 'center' },
        { title: '分配项目数', scopedSlots: { customRender: 'assignInfo' }, align: 'center', fixed: 'right', width: 300, },
      ],
      expertLoading: false,
      expertSelectedRowKeys: [],
      expertId: null,
      expertVisibleView: false,
      evaluationId: null,
      evaluationVisibleView: false,
      //专家组
      groupForm: this.$form.createForm(this, { name: 'advanced_search' }),
      groupSearchForm: { year: null, batch: null, name: null },
      groupTableData: [],
      groupColumns: [
        { title: '专家组', scopedSlots: { customRender: 'name' }, align: 'center' },
        { title: "年度", dataIndex: "year", align: 'center' },
        { title: "批次", dataIndex: "batch", align: 'center' },
        { title: '分配项目数', scopedSlots: { customRender: 'assignInfo' }, align: 'center', fixed: 'right', width: 300, },
      ],
      groupLoading: false,
      groupSelectedRowKeys: [],
      groupId: null,
      // 项目
      projForm: this.$form.createForm(this, { name: "projSearch" }),
      projSearchForm: {
        auditType: 1,
        projName: null,
        projNo: null,
        appUnitName: null,
        appPersonName: null,
        projClass: null,
        knowledgeParentId: null,
        knowledgeId: null,
        assignState: '',
      },
      projTableData: [],
      projColumns: [
        { title: "项目名称", scopedSlots: { customRender: 'projName' } },
        { title: "申报学科", dataIndex: "knowledgeName", align: 'center' },
        { title: "申报单位", dataIndex: "appUnitName", align: 'center' },
        { title: '分配信息', scopedSlots: { customRender: 'assignInfo' }, align: 'center', fixed: 'right', width: 300, },
      ],
      projLoading: false,
      projSelectedRowKeys: [],
      projectId: null,
      projectVisibleView: false,
    };
  },
  created () {
    this.getAssignExpertList()
    this.getAssignProjectList()
    this.getAssignExpertGroupList()
  },
  methods: {
    moment,
    tabclick (key) {
      this.tabsActive = key
    },
    getAssignExpertList () {
      this.expertLoading = true
      let pars = isEmptyParams(this.expertSearchForm)
      let par = { ...pars, pageIndex: -1, pageSize: 10000 }
      this.$api.expert.getAssignExpertList(par).then(({ data = {} }) => {
        if (data) {
          this.expertTableData = data.dataList
          this.expertLoading = false
          this.expertSelectedRowKeys = []
        }
      }).catch(() => {
        this.expertLoading = false
      })
    },
    expertSearch () {
      this.getAssignExpertList()
    },
    expertReset () {
      this.expertSearchForm = {
        personName: '',
        unitId: null,
        specParentId: null,
        spec: null,
      }
    },
    getAssignExpertGroupList () {
      this.groupLoading = true
      let pars = isEmptyParams(this.groupSearchForm)
      let par = { ...pars, pageIndex: -1, pageSize: 10000 }
      this.$api.expertGroup.getAssignExpertGroupList(par).then(({ data = {} }) => {
        if (data) {
          this.groupTableData = data.dataList
          this.groupLoading = false
          this.groupSelectedRowKeys = []
        }
      }).catch(() => {
        this.groupLoading = false
      })
    },
    groupSearch () {
      this.getAssignExpertGroupList()
    },
    groupReset () {
      this.groupSearchForm = { year: null, batch: null, name: null }
    },
    getAssignProjectList () {
      this.projLoading = true
      let pars = isEmptyParams(this.projSearchForm)
      let par = { ...pars, pageIndex: -1, pageSize: 10000 }
      this.$api.projectAssign.getProjectListByPage(par).then(({ data = {} }) => {
        if (data) {
          this.projTableData = data
          this.projLoading = false
          this.projSelectedRowKeys = []
        }
      }).catch(() => {
        this.projLoading = false
      })
    },
    projSearch () {
      this.getAssignProjectList()
    },
    projReset () {
      this.projSearchForm = {
        projName: null,
        projNo: null,
        appUnitName: null,
        appPersonName: null,
        projClass: null,
        knowledgeParentId: null,
        knowledgeId: null,
        assignState: '',
      }
    },
    parChange (value) {
      if (value.type == 'project') {
        this.projSearchForm.knowledgeParentId = value.value
      } else {
        this.expertSearchForm.specParentId = value.value
      }
    },
    handleAssignChange (value) {
      this.projSearchForm.assignState = value
    },
    onExpertSelectChange (selectedRowKeys) {
      this.expertSelectedRowKeys = selectedRowKeys
    },
    onGroupSelectChange (selectedRowKeys) {
      this.groupSelectedRowKeys = selectedRowKeys
    },
    onProjSelectChange (selectedRowKeys) {
      this.projSelectedRowKeys = selectedRowKeys
    },
    onDistribute () {
      let expertsId = []
      if (this.tabsActive == '1') {
        if (this.expertSelectedRowKeys.length == 0) {
          this.$message.warning('请选择专家！')
          return
        } else {
          expertsId = this.expertSelectedRowKeys
        }
      } else {
        if (this.groupSelectedRowKeys.length == 0) {
          this.$message.warning('请选择专家组！')
          return
        }
        else {
          if (this.groupSelectedRowKeys.length > 1) {
            this.$message.warning('每次只能选择一个专家组！')
            return
          }
          expertsId = this.groupSelectedRowKeys
        }
      }
      if (this.projSelectedRowKeys.length == 0) {
        this.$message.warning('请选择项目！')
        return
      }
      let pars = { type: this.tabsActive, projects: this.projSelectedRowKeys, experts: expertsId }
      this.$api.projectAssign.assignProject(pars).then(({ data = {} }) => {
        if (data) {
          this.$message.success('分配成功！')
          this.getAssignProjectList()
          if (this.tabsActive == '1')
            this.getAssignExpertList()
          else
            this.getAssignExpertGroupList()
        } else
          this.$message.error('分配失败，请稍后再试！')
      }).catch(() => {
        this.$message.error('分配失败，请稍后再试！')
      })
    },
    expertView (value) {
      this.expertVisibleView = true
      this.expertId = value
    },
    projectView (value) {
      this.projectVisibleView = true
      this.projectId = value
    },
    closeWindow () {
      this.evaluationVisibleView = false
      this.getExpertList()
      this.getAssignProjectList()
    },
    evaluationColor (record) {
      if (record.gradeScore != null)
        return '#87d068'
      else
        return '#f50'
    },
    evaluationText (record) {
      if (record.gradeScore != null)
        return record.expertName + "：" + record.gradeScore
      else
        return record.expertName + "：" + '未评分'
    },
    evaluationView (record) {
      this.evaluationId = record.id
      this.evaluationVisibleView = true
    },
    CalculateAvgScore (record) {
      let totalSocre = 0
      record.evaluationList.forEach(e => {
        if (e.gradeScore != null)
          totalSocre += e.gradeScore
        else
          totalSocre += 0
      })
      return parseFloat(totalSocre / record.evaluationList.length).toFixed(2)
    },

  },
};
</script>

<style scoped lang="less">
.page-common-layout {
  width: 100%;
  height: 100%;
  overflow: hidden;

  ::v-deep .ant-table-thead > tr > th {
    padding: 9px 8px !important;
    overflow-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  ::v-deep .ant-table-tbody > tr > td {
    padding: 8px 8px !important;
    overflow-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.page-layout {
  width: 100%;
  height: 100%;
  overflow: auto;
  border-style: solid;
  border-width: 1px;
  border-color: #e8e8e8;
  border-radius: 4px;
}
.page-head {
  width: 100%;
  height: calc(50% - 25px);
  padding: 5px 5px 0px 5px;
  overflow: auto;
}
.page-center {
  border-style: solid;
  border-width: 1px 0px 0px 0px;
  border-color: #e8e8e8;
  width: 100%;
  height: calc(50% - 20px);
  padding: 0px 5px 0px 5px;
  overflow: auto;
}
.page-bottom {
  border-style: solid;
  border-width: 1px 0px 0px 0px;
  border-color: #e8e8e8;
  width: 100%;
  height: 45px;
  padding: 5px;
  text-align: center;
}
</style>