<!--
  @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.trim="searchForm.name" />
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model.trim="searchForm.idCard" />
          </el-form-item>
          <div class="fr">
            <el-button @click="search()">
              查询
            </el-button>
            <el-button @click="resetForm()">
              重置
            </el-button>
          </div>
        </el-form>
        <el-table :data="tableData" @selection-change="personnelChange">
          <el-table-column type="selection" />
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="name" />
          <el-table-column label="身份证号" prop="idCard" />
          <el-table-column label="手机号" prop="mobilePhone" />
          <el-table-column label="性别" prop="sex">
            <template slot-scope="scope">
              <span
                v-if="scope.row.sex==='00'"
                type="primary"
              >
                男
              </span>
              <span
                v-if="scope.row.sex==='01'"
                type="primary"
              >
                女
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button :loading="confirmLoading" type="primary" @click="addPersonnel">
          确 定
        </el-button>
        <el-button @click="dialog=false">
          取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* api*/
import { expertSupplement } from '@/api/expert/expertscloud'
import { queryAllRepresentList } from '@/api/expert/expertscloud'
/* 公共方法*/
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
      personnelSelectData: [], // 弹框勾选的数据
      // 接受父组件传递参数
      parentData: {
        applyId: '', // 抽取申请id
        ownerNum: '', // 招标方代表人数
        bidPersonnelIds: [], // 获取父组件传递的专家id集合
        bidPersonnelNum: '' // 获取父组件传递的招标方代表数
      },
      searchForm: {
        name: '', // 姓名
        idCard: '' // 身份证号
      }
    }
  },
  watch: {
    // 监听-弹框展示状态
    dialog(val) {
      if (!val) {
        // 弹框已关闭-清空数据
        restoreInitialValue(this.searchForm)
        this.bidPersonnelIds = []
      }
    }
  },
  methods: {
    // 父组件触发 打开弹框 接受父组件传递参数 加载数据
    openDialogGetLoadData(data) {
      const { dialog, applyId, bidPersonnelIds, ownerNum, bidPersonnelNum } = data
      this.parentData.applyId = applyId // 申请id
      this.parentData.ownerNum = ownerNum // 招标方代表人数
      this.parentData.bidPersonnelNum = bidPersonnelNum // 已有的招标方代表人数
      this.parentData.expertIds = bidPersonnelIds // 获取父组件传递的招标方代表d集合 去重处理
      this.dialog = dialog // 打开弹框
      this.loading = true
      this.loadData()
    },
    // 获取专家列表
    loadData() {
      const params = this.getQueryParams() // 查询条件
      queryAllRepresentList(params).then(response => {
        const { data } = response
        this.tableData = data.records
        this.paginationData.total = data.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 选择招标方代表
    personnelChange(val) {
      this.personnelSelectData = 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)
    },
    // 确认
    addPersonnel() {
      if (this.personnelSelectData.length > 0) {
        // 校验是否超过规定的招标方人数
        if ((this.personnelSelectData.length + this.parentData.bidPersonnelNum) > this.parentData.ownerNum) {
          this.$message.warning('招标方代表人数大于指定招标方代表人数，请确认！！！')
        } else {
          this.confirmLoading = true // btnLoading
          this.subAddPersonnel(this.personnelSelectData)
        }
      } else {
        this.$message.warning('请选择')
      }
    },
    // 添加招标方代表请求
    subAddPersonnel(expertData) {
      const personnelSelectList = this.handleSelexpert(expertData)
      // 增加补录专家入参
      const dataParams = {
        applyId: this.parentData.applyId, // 抽取申请id
        purchaserDeputationList: personnelSelectList, // 补录的招标方代表数据
        extractResultList: [] // 补录的专家数
      }
      expertSupplement(dataParams).then((res) => {
        this.confirmLoading = false // btnLoading
        this.dialog = false// 关闭弹窗
        this.$parent.initData() // 刷新页面
      }).catch(() => {
        this.confirmLoading = false // btnLoading
      })
    },
    // 处理已选择的招标方代表
    handleSelexpert(personnelSelectData) {
      let personnelSelectArr = []
      // 处理选择的招标方数据 每一项增加抽取申请id
      personnelSelectArr = personnelSelectData.map(bidPersonnelItem => {
        return {
          applyId: this.parentData.applyId,
          departId: bidPersonnelItem.departId, // 所属单位id
          departName: bidPersonnelItem.departName, // 所属机构名称
          idCard: bidPersonnelItem.idCard, // 身份证号
          mobilePhone: bidPersonnelItem.mobilePhone, // 手机号
          purchaserId: bidPersonnelItem.id, // 采购方用户Id
          purchaserName: bidPersonnelItem.name, // 采购方名称
          sex: bidPersonnelItem.sex // 性别 00女 01男
        }
      })
      return personnelSelectArr
    },
    // 重置
    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>
