<!--
  @description: 抽取项目列表--随机抽取--抽取结果成功/失败
  @author: 徐媛媛
  @routerPath:/extractProject/expertProjectList
  @date: 2020-8-24 8:35:58
-->
<template>
  <div class="leave_container">
    <div class="fram-content">
      <!--抽取项目信息-->
      <div class="page-title">
        <span>1 抽取项目</span>
      </div>
      <div>
        <el-table :data="applyDetailList" class="tableLimit">
          <el-table-column type="index" label="序号" align="center" />
          <el-table-column

            width="300px"
            label="项目名称"
            align="center"
            prop="tenderName"
          />
          <el-table-column

            label="项目编号"
            align="center"
            prop="tenderNo"
          />
          <el-table-column

            width="300px"
            label="标段名称"
            align="center"
            prop="packName"
          />
          <el-table-column label="标段编号" align="center" prop="pakNo" />
        </el-table>
      </div>
      <!--抽取结果-->
      <div class="page-title">
        <span>2 抽取结果</span>
      </div>
      <div>
        <table class="from_table">
          <tr>
            <td>抽取申请编号</td>
            <td>{{ extractResult.applyCode }}</td>
            <td>抽取结果</td>
            <td :class="extractResult.resultStatus==='01'?'successText':'failText'">
              {{ extractResult.resultStatus | extractingResults }}
            </td>
          </tr>
          <tr>
            <td>评标阶段</td>
            <td>{{ extractResult.stageType=='00'?"资格预审":"资格后审" }}</td>
            <td>专家确定方式</td>
            <td>{{ extractResult.rakeType=='00' ? '随机抽取':"直接指定" }}</td>
          </tr>
          <tr>
            <td>评标开始时间</td>
            <td>{{ extractResult.startTime }}</td>
            <td>预计评标结束</td>
            <td>{{ extractResult.endTime }}</td>
          </tr>
          <tr>
            <td>评标地点</td>
            <td colspan="3">
              {{ extractResult.proviceName }}{{ extractResult.cityName }}{{ extractResult.areaName }}{{ extractResult.adress }}
            </td>
          </tr>
          <tr>
            <td>申请抽取人数</td>
            <td>{{ extractResult.expertNum }}</td>
            <td>抽取成功人数</td>
            <td>{{ extractResult.realNum }}</td>
          </tr>
        </table>
      </div>
      <!--专家列表-->
      <div class="page-title">
        <span>3 专家列表</span> <el-button class="export-list" @click="exportList">
          导出专家名单
        </el-button>
      </div>
      <div>
        <el-table v-if="from" :data="expertList" class="tableLimit" border>
          <el-table-column type="index" label="序号" align="center" />
          <el-table-column prop="expertName" label="专家姓名" align="center" />
          <el-table-column prop="mobile" label="联系方式" align="center" />
          <el-table-column prop="certificateCode" label="身份证号" align="center" />
          <el-table-column prop="specialName" label="专业" align="center" />
          <el-table-column prop="area" label="地区" align="center" />
        </el-table>
        <el-table v-if="!from" :data="expertList">
          <el-table-column type="index" label="序号" align="center" />
          <el-table-column prop="expertName" label="专家姓名" align="center" />
          <el-table-column prop="mobile" label="联系方式" align="center" />
          <el-table-column prop="certificateCode" label="身份证号" align="center" />
          <el-table-column prop="expertMajor" label="专业" align="center" />
          <el-table-column prop="address" label="地区" align="center" />
          <el-table-column prop="selectTime" label="抽取时间" align="center">
            <template slot-scope="{row}">
              {{ row.selectTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="{row}">
              {{ row.isAttend | formatAttend }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{row}">
              <el-link
                v-if="row.isAttend=='00'"
                class="tablebutton"
                type="primary"
                @click="changeAttend(row.id,'01')"
              >
                同意
              </el-link>
              <el-link
                v-if="row.isAttend=='00'"
                class="tablebutton"
                type="primary"
                @click="changeAttend(row.id,'02')"
              >
                拒绝
              </el-link>
              <el-link
                v-if="row.isAttend=='01'&& row.status!='02'"
                class="tablebutton"
                type="primary"
                @click="leave(row.id)"
              >
                请假
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <div class="page-title">
          <span>4 采购方代表</span>
        </div>
        <div>
          <el-table :data="purchaserDeputationList" class="tableLimit" border>
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column label="专家姓名" align="center" prop="purchaserName" />
            <el-table-column label="身份证号" align="center" prop="idCard" />
            <el-table-column label="手机号" align="center" prop="mobilePhone" />
            <el-table-column label="性别" align="center" prop="sex">
              <template slot-scope="{row}">
                {{ row.sex | sex }}
              </template>
            </el-table-column>
            <!-- <el-table-column label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-tooltip content="删除">
                  <el-button
                    icon="iconfont icon-delete"
                    type="bggary"
                    circle
                    @click="handleDelete(scope.row,scope.$index)"
                  />
                </el-tooltip>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getExtractExpertResultDetailById,
  adminGetExtractApplyResultDetailInfoExpertNextPage,
  editAttendStatus,
  editLeaveStatus,
  adminExportExtractExpertBaseInfo } from '@/api/expert/expertscloud'
export default {
  filters: {
    extractingResults(val) {
      switch (val) {
        case '00':
          return '人数不够'
        case '01':
          return '抽取成功'
      }
    },
    formatAttend(val) {
      switch (val) {
        case '01':
          return '同意'
        case '02':
          return '拒绝'
      }
    },
    sex(val) {
      switch (val) {
        case '01':
          return '女'
        case '00':
          return '男'
      }
    }
  },
  data() {
    return {
      expertList: [],
      applyDetailList: [],
      extractResult: {},
      applyID: '',
      resultList: [],
      expertSearch: {
        page: 1,
        pageSize: 10,
        id: ''
      },
      totalPage: 0,
      from: '',
      expertStore: '',
      entryExpertProject: {},
      extractProject: [],
      purchaserDeputationList: []
    }
  },
  mounted() {
    this.applyID = this.$route.query.id
    this.from = this.$route.query.from ? this.$route.query.from : ''
    // 根据id回显数据
    getExtractExpertResultDetailById({ applyId: this.applyID }).then(res => {
      const { data: { apply, applyDetailList, expertList, purchaserDeputationList }} = res
      // 抽取结果
      this.extractResult = apply
      this.extractResult.startTime = this.$Moment(this.extractResult.startTime).format('YYYY-MM-DD HH:mm')
      this.extractResult.endTime = this.$Moment(this.extractResult.endTime).format('YYYY-MM-DD HH:mm')
      // 抽取项目信息
      this.applyDetailList = applyDetailList
      // 专家列表
      if (this.from) {
        this.expertList = expertList
      }
      // 采购方代表
      this.purchaserDeputationList = purchaserDeputationList
    }).catch(res => {
    })
    this.expertSearch.id = this.applyID
    if (!this.from) {
      this.adminGetExtractApplyResultDetailInfoExpertNextPage()
    }
  },
  methods: {
    download(data) {
      if (!data) {
        return
      }
      const url = window.URL.createObjectURL(new Blob([data]))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', '专家名单.xls')
      document.body.appendChild(link)
      link.click()
    },
    exportList() {
      adminExportExtractExpertBaseInfo({ id: this.applyID }).then(res => {
        this.download(res)
      })
    },
    // 专家请假
    leave(id) {
      this.$confirm('确认专家请假?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        editLeaveStatus(id).then(res => {
          this.adminGetExtractApplyResultDetailInfoExpertNextPage()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 管理员获取专家列表
    adminGetExtractApplyResultDetailInfoExpertNextPage() {
      adminGetExtractApplyResultDetailInfoExpertNextPage(this.expertSearch).then(res => {
        this.expertList = res.data.records
        this.totalPage = res.data.rows * 1
      })
    },
    pickHandle(val) {
      this.expertSearch.pageSize = 10
      this.expertSearch.page = val
      this.adminGetExtractApplyResultDetailInfoExpertNextPage()
    },
    handleSizeChange(val) {
      this.expertSearch.pageSize = val
      this.expertSearch.page = 1
      this.adminGetExtractApplyResultDetailInfoExpertNextPage()
    },
    changeAttend(id, isAttend) {
      editAttendStatus(id, isAttend).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.adminGetExtractApplyResultDetailInfoExpertNextPage()
      })
    },
    back() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.successText{
  color:green;
  font-weight: 500;
}
.failText{
  color:red;
  font-weight: 500;
}
.fram-content{
  padding: 10px 60px 20px 16px;
}
</style>

