<!--
  @description: 抽取申请-录入专家弹框
  @Modifier: 高铭昱
  @routerPath:
  @date: 2021-8-15-11:21
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialog"
      :close-on-click-modal="false"
      title="'录入专家'"
      width="960px"
      custom-class="el-dialog__body-p8"
    >
      <div>
        <el-form ref="searchForm" :model="searchForm" inline>
          <el-form-item label="专家姓名">
            <el-input v-model="searchForm.expertName" />
          </el-form-item>
          <el-form-item label="专家身份证号">
            <el-input v-model="searchForm.certificateCode" />
          </el-form-item>
          <div class="fr">
            <el-button @click="search()">
              查询
            </el-button>
            <el-button @click="resetForm()">
              重置
            </el-button>
          </div>
        </el-form>
        <el-table ref="schemeExpertTable" :data="tableData" @selection-change="expertsChange">
          <el-table-column type="selection" />
          <el-table-column label="序号" type="index" />
          <el-table-column label="专家姓名" prop="realName" />
          <el-table-column label="专家身份证号" prop="certificateCode" />
          <el-table-column label="专业" prop="specialName">
            <template slot-scope="{row}">
              {{ row.specialName ? row.specialName :"暂无数据" }}
            </template>
          </el-table-column>
          <el-table-column label="区域" prop="area">
            <template slot-scope="{row}">
              {{ row.area ? row.area :"暂无数据" }}
            </template>
          </el-table-column>
          <el-table-column label="联系方式" prop="mobile" />
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="addExpert">
          确 定
        </el-button>
        <el-button @click="dialog=false">
          取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* api*/
import { expertSupplement } from '@/api/expert/expertscloud'
import { getExpertList } from '@/api/expert/extractExpert/extractExpert'
/* 公共方法*/
import { filterObj, restoreInitialValue } from '@/assets/js/utils'// 过滤空的key
/* 混合开发*/
import { ListMixin } from '@/mixins/ListMixin'
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页

export default {
  name: 'ExtractBidAddDialog',
  components: {
    pagination // 分页
  },
  mixins: [ListMixin],
  data() {
    return {
      // 获取row的key值
      getRowKeys(row) {
        return row.id
      },
      dialog: false, // 是否打开弹框true 打开 false关闭
      loading: true, // 加载loafding
      tableData: [], // 列表数据
      confirmLoading: false, // 按钮Loding
      expertSelectData: [], // 弹框勾选的数据
      // 接受父组件传递参数
      parentData: {
        applyId: '', // 抽取申请id
        expertNum: '', // 申请抽取人数
        expertIds: [], // 获取父组件传递的专家id集合
        qualifiedExprtNum: '' // 获取父组件传递的符合专家个数（排除请假拒绝的专家）
      },
      // 搜索参数
      searchForm: {
        expertName: '', // 专家姓名
        certificateCode: '' // 身份证号
      }
    }
  },
  watch: {
    // 监听-弹框展示状态
    dialog(val) {
      if (!val) {
        // 弹框已关闭-清空数据
        restoreInitialValue(this.searchForm)
        restoreInitialValue(this.parentData)
        this.$refs.schemeExpertTable.clearSelection() // 清空数据
      }
    }
  },
  methods: {
    // 父组件触发 打开弹框 获取专家列表
    openDialogGetLoadData(data) {
      const { dialog, applyId, expertIds, expertNum, qualifiedExprtNum } = data
      this.parentData.applyId = applyId // 申请抽取id
      this.parentData.expertNum = expertNum // 申请抽取专家人数
      this.parentData.qualifiedExprtNum = qualifiedExprtNum // 已经抽取的申请专家数
      this.parentData.expertIds = expertIds // 获取父组件传递的专家id集合 去重处理
      this.dialog = dialog // 打开弹框
      this.loading = true
      this.loadData()
    },
    // 获取专家列表
    loadData() {
      const params = this.getQueryParams() // 查询条件
      getExpertList(params).then(response => {
        const { data } = response
        this.tableData = data.records
        this.paginationData.total = data.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 选择专家
    expertsChange(val) {
      this.expertSelectData = val
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.expertIds = this.parentData.expertIds
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 确认
    addExpert() {
      if (this.expertSelectData.length > 0) {
        // 校验是否超过申请抽取的专家人数
        if ((this.expertSelectData.length + this.parentData.qualifiedExprtNum) > this.parentData.expertNum) {
          this.$message.warning('抽取符合的专家个数加补录的专家个数,大于应抽取的专家数，请重新选择专家！！！')
        } else {
          this.subAddExpert(this.expertSelectData)
        }
      } else {
        this.$message.warning('请选择')
      }
    },
    subAddExpert(expertData) {
      const extractResultList = this.handleSelexpert(expertData)
      // 增加补录专家入参
      const dataParams = {
        applyId: this.parentData.applyId, // 抽取申请id
        extractResultList: extractResultList, // 补录的专家数
        purchaserDeputationList: [] // 补录的招标方代表数据
      }
      expertSupplement(dataParams).then((res) => {
        this.dialog = false// 关闭弹窗
        this.$parent.initData() // 刷新页面
      })
    },
    // 处理已选择的专家
    handleSelexpert(expertData) {
      let expertArr = []
      // 处理选择的专家数 每一项增加抽取申请id
      expertArr = expertData.map(expertItem => {
        return {
          applyId: this.parentData.applyId, // 申请id
          expertId: expertItem.id, // 专家id
          expertName: expertItem.realName // 专家姓名
        }
      })
      return expertArr
    },
    // 重置
    resetForm(formName) {
      restoreInitialValue(this.searchForm)
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData()
    },
    // 搜索
    search() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData()
    }
  }
}
</script>

<style scoped>

</style>
