<!--
  @description: 今日开标列表主页面
  @Modifier: haoFx
  @routerPath:/bidOpeningHall/bidOpeningTodayList
  @date: 2020/3/18-9:42
-->
<template>
  <div class="bg_wrap scrollbar">
    <div v-loading="loading" class="bg_color">
      <div>
        <h1 v-if="projectInfoList && projectInfoList.length>0" class="bidOpening_title p16-0">
          今日开标项目
        </h1>
        <h2 v-if="projectInfoList && projectInfoList.length===0" class="bidOpening_title p16-0">
          今日暂无开标
        </h2>
      </div>
      <el-row :gutter="24" style="width: 100%">
        <el-col :span="18" :offset="3">
          <el-scrollbar class="todayOpening_wrap_scrollbar scrollbar">
            <div v-for="(item,index) in projectInfoList" :key="index" class="card">
              <div class="opening_time p0-16 clearfix">
                开标时间：
                <span class="time">
                  {{ item.openBidStartTime && $Moment(item.openBidStartTime).format(momentDateTime) }}
                </span>
                <count-down
                  :end-time="item.openBidStartTime"
                  :sys-current-time="sysCurrentTime"
                  :index="index"
                  class="fr"
                  @end_callback="countDownE_cb"
                />
              </div>
              <el-row :gutter="20">
                <el-col :span="16">
                  <ul class="p0-16" style="line-height: 40px">
                    <li>
                      项目
                      <span class="blue Underline" @click="viewProjectPackList(item,'')">
                        {{ item.tenderNumber }}
                      </span>个 （标包
                      <span class="blue Underline" @click="viewProjectPackList(item,'')">
                        {{ item.packageNumber }}
                      </span>个，有效投标人
                      <span class="blue">
                        {{ item.validBidderNumber }}
                      </span>家）
                    </li>
                    <li>
                      <span class="red Underline" @click="viewProjectPackList(item,'00')">
                        {{ item.discontentThreeBidderPackageNumber }}
                      </span>个标包不满足三家投标人
                    </li>
                  </ul>
                </el-col>
                <el-col :span="8">
                  <div class="btn">
                    <span v-if="item.msTimeShow" class="hint">数据持续更新中，以开标时间截止为准</span>
                    <el-button type="primary" @click="enterHal(item)">
                      进入开标大厅
                    </el-button>
                    <!--        <div style="display: block">
                      <el-link type="primary">导入开标议程</el-link>
                    </div>-->
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-scrollbar>
        </el-col>
      </el-row>
    </div>
    <!-- 标段列表组件 -->
    <projectPackList ref="projectPack" />
  </div>
</template>

<script>
/* 组件*/
import countdown from '@comp/bidding/countdownCom/countdown'
import projectPackList from './projectPack-list'
/* api*/
import { getTime } from '@api/common/tools.js' // 获取服务器时间
import { getTodayOpeningList, getOpenBidStartTimeIsStart } from '@api/bidding/bidOpening'
import { bidOpeningRedisConfigMixin } from '../mixins/bidOpeningRedisConfigMixin'

export default {
  name: 'BidOpeningTodayList',
  components: {
    'count-down': countdown,
    projectPackList
  },
  mixins: [bidOpeningRedisConfigMixin],
  data() {
    return {
      loading: true, // 加载中
      sysCurrentTime: '', // 系统当前时间
      // 今日开标列表
      projectInfoList: []
    }
  },
  watch: {
    $route() {
      // 获取当前时间
      this.getCurrentTime()
      // 项目经理-获取今日开标列表
      this.getTodayOpening()
    }
  },
  created() {
    sessionStorage.clear() // 清除session
    // 获取当前时间
    this.getCurrentTime()
    // 项目经理-获取今日开标列表
    this.getTodayOpening()
  },
  methods: {
    // 获取系统当前时间
    getCurrentTime() {
      getTime().then(res => {
        this.sysCurrentTime = res.data.time
      }).catch(() => {
      })
    },
    // 项目经理-获取今日开标列表
    getTodayOpening() {
      getTodayOpeningList().then(res => {
        this.loading = false
        this.projectInfoList = res.data
        this.projectInfoList.map((item) => {
          item.msTimeShow = true// 倒计时状态
        })
      }).catch(() => {
        this.loading = false
      })
    },
    // 查看项目标段列表
    viewProjectPackList(item, type) {
      this.todayOpeningInfo(item)
      this.$refs.projectPack.openDialog(item, type)
    },
    // 进入大厅
    enterHal(item) {
      this.todayOpeningInfo(item)
      this.getOpenBidStart(item)
    },
    // 获取是否有已开启标段
    getOpenBidStart(item) {
      const params = {
        openStageType: item.openStageType,
        stageIds: item.stageIds
      }
      getOpenBidStartTimeIsStart(params).then(response => {
        // 判断是否有标段开启的，没有开启的进入开标等待界面，如果有开启的进入开启界面
        // isStartOpeningStatus 00:未开启 01:已开启
        if (response.data.isStartOpeningStatus === '01') {
          if (item.packageNumber > 1) {
            // 如果分包进入分包界面
            this.$router.push({
              path: this.decryptionPath.packagePath,
              query: {
                ...this.$route.query
              }
            })
          } else {
            // 不分包进入不分包界面
            this.$router.push({
              path: this.decryptionPath.noPackagePath,
              query: {
                ...this.$route.query
              }
            })
          }
        } else {
          // 没有开启的标段进入开标等待界面
          this.$router.push({
            path: '/bidOpeningHall/openingHall',
            query: {
              ...this.$route.query,
              isCanOperate: true // 是否有操作权限
            }
          })
        }
      }).catch(() => {

      })
    },
    // 存储今日开标标包信息
    todayOpeningInfo(OpeningInfo) {
      sessionStorage.setItem('todayOpeningInfo', JSON.stringify(OpeningInfo))
    },
    // 倒计时结束回调
    countDownE_cb(type, index) {
      this.projectInfoList[index].msTimeShow = type
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped lang="less">
  @import "../index";
  .todayOpening_wrap_scrollbar{
    height:calc(100vh - 56px - 64px);
  }
  .bg_wrap{
    width: 100%;
    height: calc(100vh - 56px);
    margin: 0 auto;
    background-image:url("~@assets/img/bidding/bidOpening/bidOpenHallbg.jpg");
    background-repeat:  no-repeat;
    background-size: 100% 146%;
    background-position-y: 35%;
  }
  .bg_color{
    width: 100%;
    height: calc(100vh - 56px);
    background-color: rgba(255,255,255,0.85);
    .bidOpening_title{
      text-align: center;
    }
  }
.card{
  border: 1px solid #E0E0E0;
  margin-bottom: 20px;
  background-color: #fff;
  .opening_time{
    background-color: rgb(239, 247, 250);
    height: 50px;
    line-height: 50px;
    .time{
      font-weight: bold;
    }
  }
  .btn{
    margin-right: 16px;
    text-align: right;
    .hint{
      display: block;
    }
    .el-button{
      margin: 10px 0;
    }
    /deep/.el-link{
      margin-bottom:10px;
      margin-right: 16px;
      .el-link--inner{
        font-size: 14px;
      }
    }
  }
}
</style>
