<!--
  @description: 抽取专家-直接指定--查看申请
  @Modifier: 徐媛媛
  @routerPath:/extractExpert/extractApply
  @date: 2020/8/26-13:27
-->
<template>
  <div class="leave_container">
    <section class="title title_border clearfix">
      <template>
        <!-- 抽取申请 -->
        <div>
          <i class="el-icon-s-home" />
          抽取申请
        </div>
      </template>
    </section>
    <el-scrollbar class="all_extract">
      <el-form ref="allData" :model="allData" :rules="rules" label-width="160px">
        <div class="page-title">
          1 抽取项目
        </div>
        <div>
          <el-table :key="index" :data="projectList" class="tableLimit" @selection-change="selectProject">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column header-align="center" min-width="200" align="left">
              <template slot="header" prop="tenderName">
                <span>项目名称</span>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.tenderName }}</span>
              </template>
            </el-table-column>
            <el-table-column header-align="center" min-width="200" align="left">
              <template slot="header" slot-scope="scope" prop="tenderNo">
                <span>项目编号</span>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.tenderNo }}</span>
              </template>
            </el-table-column>
            <el-table-column header-align="center" min-width="200" align="left">
              <template slot="header" slot-scope="scope" prop="packName">
                <span>标段名称</span>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.packName }}</span>
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="left">
              <template slot="header" slot-scope="scope" prop="pakNo">
                <span>标段编号</span>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.pakNo }}</span>
              </template>
            </el-table-column>
            <el-table-column header-align="center" label="操作" align="center" width="130">
              <template slot-scope="scope">
                <el-link type="primary" @click="removeProjectList">
                  [删除]
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <el-form ref="form" label-width="160px">
        <div class="page-title">
          <span>2 抽取申请</span>
        </div>
        <div>
          <table class="from_table">
            <!--抽取申请编号--->
            <tr>
              <td>
                <el-form-item label="抽取申请编号" prop="applyCode" />
              </td>
              <td colspan="3">
                {{ extractApply.applyCode }}
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="评标阶段" prop="stageType" />
              </td>
              <td>
                {{ extractApply.stageType=='00'?"资格预审":"资格后审" }}
              </td>
              <td>
                <el-form-item label="专家确定方式" prop="rakeType" />
              </td>
              <td>
                {{ extractApply.rakeType=='00' ? '随机抽取':"直接指定" }}
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="评标开始时间" prop="startTime" />
              </td>
              <td>
                {{ extractApply.startTime | formatTime }}
              </td>
              <td>
                <el-form-item label="评标结束时间" prop="endTime" />
              </td>
              <td>
                {{ extractApply.endTime |formatTime }}
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="专家人数" prop="expertNum" />
              </td>
              <td>
                {{ extractApply.expertNum }}
              </td>
              <td>
                <el-form-item label="业主代表人数" prop="ownerNum" />
              </td>
              <td>
                {{ extractApply.successNumber }}
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item ref="area" label="评标地点" prop="area" />
              </td>
              <td colspan="3">
                {{ extractApply.proviceName + extractApply.cityName + extractApply.areaName }}
                {{ extractApply.adress }}
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="抽取回避" />
              </td>
              <td colspan="3">
                {{ extractApply.attendDay }}天内参加过评标的专家不再抽取 一个月内参加过{{ extractApply.attendCount }}次评标的专家不再抽取
              </td>
            </tr>
          </table>
        </div>
      </el-form>
      <el-form ref="form" label-width="160px">
        <div class="page-title">
          <span>3 录入专家</span>
          <el-button
            type="primary"
            class="add_t"
            @click="addExpert"
          >
            添加专家
          </el-button>
        </div>
        <!-- 回避专家 -->
        <div>
          <el-table :data="avoidExpertData" class="tableLimit" border>
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column label="专家姓名" align="center" prop="expertName" />
            <el-table-column label="身份证号" align="center" prop="certificateCode" />
            <el-table-column label="手机号" align="center" prop="mobile" />
            <el-table-column label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-tooltip content="正常">
                  <el-button
                    icon="iconfont icon-delete"
                    type="bggary"
                    circle
                  />
                </el-tooltip>
                <el-tooltip content="放弃">
                  <el-button
                    icon="iconfont icon-delete"
                    type="bggary"
                    circle
                  />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <el-form ref="form" label-width="160px">
        <div class="page-title">
          <span>4 录入采购方代表</span>
        </div>
        <div>
          <el-table :data="tableData" class="tableLimit" border>
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column label="专家姓名" align="center" prop="name" />
            <el-table-column label="身份证号" align="center" prop="certificateCode" />
            <el-table-column label="手机号" align="center" prop="mobile" />
            <el-table-column label="性别" align="center" prop="sex" />
            <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>
      </el-form>
    </el-scrollbar>
    <div style="text-align:center;">
      <el-button type="primary" size="medium" @click="saveItem">
        提交
      </el-button>
    </div>
  </div>
</template>

<script>
/* 公用方法*/
import {
  getExtractExpertDetailById,
  adminExportExtractExpertBaseInfo,
  saveExpertByApplyId, getExpertList,
  deleteExpertByResultId
} from '@/api/expert/expertscloud'
// 组件
export default {
  data() {
    return {
      expertList: [],
      companyList: [],
      extractApply: {},
      extractProject: [],
      tableData: [],
      departList: [],
      expertStore: '',
      type: '',
      applyID: '',
      addExpertVisible: false,
      expertSearch: {
        expertName: '',
        certificateCode: '',
        expertIds: [],
        page: 1,
        pageSize: 10
      },
      expertTotal: 0,
      expertData: [],
      addExpertList: [], // 添加专家变量
      checkedExpert: []
    }
  },
  mounted() {
    const id = this.$route.query.id ? this.$route.query.id : ''
    this.applyID = id
    this.type = this.$route.query.type ? this.$route.query.type : ''
    // 根据id回显数据
    this.getExtractExpertDetailById(id)
    if (this.type === '00') {
      // this.getDetailExpertAvoidDepartList(id)
      // this.getDetailExpertCompanyList(id)
    }
  },
  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)
      })
    },
    getExtractExpertDetailById(id) {
      getExtractExpertDetailById(id).then(res => {
        this.extractApply = res.data.apply
        this.extractProject = res.data.applyDetailList
        this.avoidExpertData = res.data.expertList
        this.type = res.data.apply.rakeType
        // 指定抽取方式 00随机抽取 01直接指定
        if (this.type === '00') {
          this.expertList = res.data.avoidExpertList
          res.data.condionList.forEach(val => {
            const everyData = {}
            everyData.type = val.con.type // 类别
            everyData.specialName = val.con.specialName // 抽取专业
            everyData.specialCode = val.con.specialCode // 抽取专业code
            everyData.cityName = val.con.cityName // 抽取专家地区
            everyData.cityCode = val.con.cityCode // 抽取专家地区
            everyData.expertNum = val.con.expertNum // 抽取人数
            everyData.spareMajorName = val.specialNameList.join(',')// 备选专业
            everyData.spareMajorCode = val.specialCodeList.join(',')
            this.tableData.push(everyData)
          })
        } else {
          this.expertList = res.data.expertList
        }
      })
    },
    back() {
      this.$router.go(-1)
    },
    handleSelectionChangeExpert(val) {
      val.forEach(val => {
        val.expertName = val.realName
        val.expertId = val.id
      })
      this.checkedExpert = val
      this.addExpertList = this.addExpertList.concat(this.checkedExpert)
    },
    // 添加专家
    addDirect() {
      var expertArr = []
      const arr = []
      let expertObj
      this.checkedExpert.forEach(val => {
        arr.push(val.expertId)
      })
      this.addExpertVisible = false
      this.avoidExpert = false
      // const obj = {}
      // this.addExpertList = this.addExpertList.reduce(function(item, next) {
      //   obj[next.expertId] ? '' : obj[next.expertId] = true && item.push(next)
      //   return item
      // }, [])
      // this.entryExpertList = JSON.parse(JSON.stringify(this.addExpertList))
      const id = this.$route.query.id ? this.$route.query.id : ''
      this.checkedExpert.forEach(item => {
        expertObj = {
          applyId: id,
          expertId: item.id,
          expertName: item.expertName,
          mobile: item.mobile
        }
        var p = saveExpertByApplyId(expertObj)
        expertArr.push(p)
      })
      Promise.all(expertArr)
        .then((res) => {
          this.addExpertVisible = false
          const id = this.$route.query.id ? this.$route.query.id : ''
          this.getExtractExpertDetailById(id)
        }).catch(() => {})
    },
    // 删除专家
    deleteExpert(id) {
      this.$confirm('确认删除该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        deleteExpertByResultId(id).then(resp => {
          if (resp.header.ret === '0') {
            const id = this.$route.query.id ? this.$route.query.id : ''
            this.applyID = id
            this.getExtractExpertDetailById(id)
          }
        }).catch(() => {})
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    expertSearchFn() {
      this.getExpertList()
    },
    // 获取专家列表
    getExpertList() {
      this.expertSearch.expertIds = []
      this.expertList.forEach(item => {
        this.expertSearch.expertIds.push(item.id)
      })
      getExpertList(this.expertSearch).then(res => {
        this.expertData = res.data.returnData
        this.expertTotal = res.data.rows * 1
      })
    },
    resetFn() {
      this.expertSearch.expertName = ''
      this.expertSearch.certificateCode = ''
      this.expertSearch.page = 1
      this.expertSearch.pageSize = 10
      this.getExpertList()
    },
    pickHandleEx(val) {
      this.expertSearch.page = val
      this.expertSearch.pageSize = 10
      this.getExpertList()
    },
    handleSizeProjectChangeEx(val) {
      this.expertSearch.page = 1
      this.expertSearch.pageSize = val
      this.getExpertList()
    },
    addEntryExpert() {
      this.addExpertVisible = true
      this.getExpertList()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
