<!--
  @description:评标-选择项目
  @Modifier:yf/wxy
  @routerPath:/procurement/evaluationLobby-list
  @date:2020/8/2-9:48
-->
<template>
  <div>
    <div class="expertReviewList clearfix">
      <img class="imgBg" src="@/assets/img/procurement/procurementEvaluation/expertReview.png" alt="">
      <div class="conten">
        <h3>
          专家，您好！您有
          <b style="color:#027BD0;font-size:24px">{{ stayNum }}</b>
          个待评审的项目。请选择相应项目进入评标室！
        </h3>
        <div class="review clearfix">
          <div class="header">
            <div class="fl" style="cursor: pointer;">
              <h4 :class="evalIsReviewed === '00' ? 'active_title':''" class="stay_title" @click="switchActive('00')">
                待评审项目
              </h4>
            </div>
            <div class="fl" style="cursor: pointer;">
              <h4 :class="evalIsReviewed === '01' ? 'active_title':''" class="stay_title" @click="switchActive('01')">
                已评审项目
              </h4>
            </div>
            <div class="fr" style="cursor: pointer;">
              <gx-input
                v-model.trim="searchContent"
                placeholder="请输入项目编号或项目名称"
                class="search"
                @keyup.enter.native="onsearch"
              />
              <span class="iconfont icon-search searchIcon" @click="onsearch" />
              <!-- <img class="searchIcon" src="~@assets/img/procurement/procurementEvaluation/search.svg" alt="" @click="onsearch"> -->
            </div>
          </div>
          <el-scrollbar class="scrollbar-x-none" style="width: 100%;height:calc( 90% - 58px);overflow-Y:visible;padding:0 10px">
            <el-table
              v-loading="loading"
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column header-align="center" align="center" type="index" fixed width="60px" label="序号" />
              <el-table-column header-align="center" align="left" min-width="200" fixed label="采购单编号/名称">
                <template slot-scope="scope">
                  {{ scope.row.tenderName }}
                </template>
              </el-table-column>
              <el-table-column header-align="center" align="center" width="200" fixed label="报价截止时间">
                <template slot-scope="scope">
                  {{ scope.row.finishDesc }}
                </template>
              </el-table-column>
              <el-table-column v-if="evalIsReviewed === '00'" header-align="center" align="center" width="150" fixed label="当前节点">
                <template slot-scope="scope">
                  {{ scope.row.evalStepName }}
                </template>
              </el-table-column>
              <el-table-column header-align="center" align="center" width="150" fixed label="操作" style="cursor: pointer">
                <template slot-scope="scope">
                  <el-link v-if="evalIsReviewed === '00'" :underline="false" class="getInto" @click="introw(scope.row)">
                    <span style="line-height:34px;margin-right:6px">进入评标室</span>
                    <span class="iconfont icon-jinru" style="font-size:13px" />
                  </el-link>
                  <!-- 是否已经评审结束 00未结束 01已结束 -->
                  <el-link v-if="evalIsReviewed === '01'" :underline="false" class="getInto" @click="introw(scope.row)">
                    <span style="line-height:34px;margin-right:6px">进入评标室</span>
                    <span class="iconfont icon-jinru" style="font-size:13px" />
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
          <!--分页组件-->
          <pagination :pagination-data="paginationData" @change="loadData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// api
import {
  queryProtProjectProcurementEvaluationInfo,
  queryProtProjectProcurementPendingNum,
  qryProcurementEvalFactorEnteringStatusByPackId
} from '@/api/procurement/procurementEvaluation'
/* 混合开发*/
import { ListMixin } from '@/mixins/ListMixin' // 分页
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
export default {
  name: 'ExpertReviewList',
  components: { pagination },
  mixins: [ListMixin],
  data() {
    return {
      loading: false,
      evalIsReviewed: '00', // 是否已经评审结束 00未结束 01已结束
      searchContent: '', // 搜索内容
      stayNum: '', // 待审核项目数
      tableData: [] // 列表数据
    }
  },
  created() {
    // 获取评标室数据
    this.loadData()
    // 获取待审核项目数
    this.getReviewedProjectNum()
  },
  methods: {
    // 初始化/搜索数据
    loadData() {
      queryProtProjectProcurementEvaluationInfo(this.paginationData.pageNo, this.paginationData.pageSize, this.evalIsReviewed, this.searchContent).then(res => {
        this.tableData = res.data.records // 评标室数据
        this.paginationData.total = res.data.total // 分页总数
        // 清空搜索框
        // this.searchContent = ''
      })
    },
    // 获取待评审项目数
    getReviewedProjectNum() {
      queryProtProjectProcurementPendingNum().then(res => {
        this.stayNum = res.data // 获取待评审项目数
      })
    },
    //  进入评标大厅
    introw(item) {
      // 判断采购员是否设置过评审指标
      qryProcurementEvalFactorEnteringStatusByPackId(item.packId).then(res => {
        if (res.data.ret === '0') {
          this.$router.push({
            name: 'procurementEvaluationLobbyDrive',
            params: {
              packId: item.packId // 标段id
            }
          })
          return
        }
        if (res.data.ret === '1') {
          this.$confirm(`请联系采购执行人${res.data.contactName}设置评审指标！采购执行人联系方式：${res.data.contactTel}`, '提示', {
            confirmButtonText: '我知道了',
            confirmButtonClass: 'confirmBtn',
            showCancelButton: false,
            type: 'warning'
          }).then(() => {
          })
        }
      })
    },
    // 切换高亮
    switchActive(num) {
      this.evalIsReviewed = num
      this.loadData()
    },
    // 搜索
    onsearch() {
    // 判断用户是否输入了
      if (!this.searchContent) {
        this.$message.warning('请输入项目编号或项目名称')
        return
      }
      this.loadData()
    }
  }
}

</script>

<style lang="less" scoped>
 @import '~@assets/style/common/public.less';
  .expertReviewList{
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    .imgBg{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
    }
    .conten{
      z-index: 2;
      position: absolute;
      right: 0px;
      height: 100%;
      width:88.4%;
      h3{
        width: 80%;
        font-size: 16px;
        text-align: center;
        margin-top: 8%;
      }
      .review{
        width: 88%;
        height:60%;
        margin: 20px auto;
        background:@white;
        border:1px solid @border-gray;
        overflow: hidden;
        position: relative;
        .header{
          width: 100%;
          height: 38px;
          border-bottom:1px solid @border-gray;
        }
        /*描述*/
        h4{
          font-size:14px;
          font-weight:bold;
          margin-bottom: 10px;
        }
        .stay_title{
         width:109px;
         height:38px;
         background:@french-grey;
         text-align: center;
         line-height: 38px;
        }
        .active_title{
          // margin-top: 10px;
          border-top:2px solid @hyacinthine;
          background: @white;
          color:@hyacinthine;
        }
        /*列表*/
        ul{
          li{
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            margin-bottom: 2px;
            .ind{
               display: inline-block;
               width: 40px;
               text-align: center;
               color:@hyacinthine
            }
            // height: 38px;
            // line-height: 38px;
            .index{
              margin-right: 6px;
            }
            .evalStepName {
              width: 10%;
              display: inline-block;
              text-align:center;
            }
            .finishDesc {
              width: 15%;
              display: inline-block;
              text-align:center;
              word-wrap:break-word;
            }
            .tenderName {
              width: 50%;
              display: inline-block;
              text-align:left;
              word-wrap:break-word;
            }
            .getInto{
              width: 15%;
              display: inline-block;
              text-align:right;
              cursor: pointer;
              img{
                width: 20px;
                height: 20px;
                display: block;
                margin-left: 4px;
                margin-top: 10px;
                float: right;
              }
            }
          }
             li:nth-child(2n){
               background:@french-grey;
           }
            li:nth-child(2n+1){
              background:#EEF3F7;
              }
              li:hover{
                background: #F8F0E4;
              }
        }
        .getInto{
          color: @orange;
        }
      }
    }
  }
  .search{
    margin: 2px 5px;
    width: 20vw;
    height: 5vh;
    border: @black;
    cursor: pointer;
  }
  .searchIcon {
    font-size: 14px;
    color: @gray;
    position: absolute;
    right: 20px;
    top: 7px;
    z-index:3;
  }
</style>
