<!--
  @description:竞价大厅未开启
  @Modifier:gmy/wxy
  @routerPath2:/procurement/procurementDrive/offerPurchase/offerBiddingOuterNo 采购人竞价大厅
  @date:2020/5/23-10:54
-->
<template>
  <div class="main" style="margin-top:0px">
    <!-- 倒计时组件动态监听倒计时情况-->
    <count-down
      v-if="formData.quoteStartTime"
      v-show="true"
      :end-time="$Moment(formData.quoteStartTime).format(momentSaveFormat)"
      :end_callback="endCallback"
    />
    <el-row type="flex" class="row-bg" justify="center" style="padding: 0">
      <el-col class="offer-horologe">
        <offer-Clock />
      </el-col>
      <el-col :span="24" class="offer-purchase-content">
        <div class="offer-beging offerTop">
          {{ biddingText }}
        </div>
        <div class="offer-tabel">
          <el-form
            ref="formData"
            :model="formData"
            style="height:216px;overflow:auto"
          >
            <table class="tableData">
              <tr>
                <td>
                  <p>竞价开始时间</p>
                </td>
                <td colspan="3" style="background-color: #FFFFFF">
                  <p class="money">
                    {{ $Moment(formData.quoteStartTime).format(momentSaveFormat) }}
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p>竞价时长</p>
                </td>
                <td colspan="3" style="background-color: #FFFFFF">
                  <p class="money">
                    <span>{{ formData.quoteTime }}</span><span v-for="(item, index) in quoteTimeUnit" v-if="item.typecode===formData.quoteTimeUnit" :key="index">{{ item.typename }}</span>
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p>竞价方式</p>
                </td>
                <td colspan="3" style="background-color: #FFFFFF">
                  <p v-for="(item, index) in comparePriceMethod" v-if="item.typecode === formData.comparePriceMethod" :key="index" class="money">
                    {{ item.typename }}
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p>竞价类型</p>
                </td>
                <td colspan="3" style="background-color: #FFFFFF">
                  <p v-for="(item, index) in comparePriceType" v-if="item.typecode===formData.comparePriceType" :key="index" class="money">
                    {{ item.typename }}
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p>起拍价格</p>
                </td>
                <td colspan="3" style="background-color: #FFFFFF">
                  <p class="money">
                    <span>{{ formData.comparePrice }}</span><span>{{ formData. comparePriceType==='00'? '元' : '%' }}</span>
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p>报价次数</p>
                </td>
                <td colspan="3" style="background-color: #FFFFFF">
                  <p v-for="(item, index) in quoteCountType" v-if="item.typecode===formData.quoteCountType" :key="index" class="money">
                    {{ item.typename }}
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p>超时竞价</p>
                </td>
                <td colspan="3" style="background-color: #FFFFFF">
                  <p class="money">
                    {{ formData.quoteOutTime }}<span v-for="(item, index) in quoteOutTimeUnitList" v-if="item.typecode === formData.quoteOutTimeUnit" :key="index">{{ item.typename }}</span>
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <p>报价幅度</p>
                </td>
                <td colspan="3" style="background-color: #FFFFFF">
                  <p v-for="(item, index) in quoteRangeType" v-if="item.typecode===formData.quoteRangeType" :key="index" class="money">
                    {{ item.typename }}
                  </p>
                </td>
              </tr>
            </table>
          </el-form>
        </div>
      </el-col>
      <!--  进入竞价大厅按钮-->
      <gx-link :href="url" target="_blank" class="enterOffer el-button--primary el-button--small">
        进入竞价大厅
      </gx-link>
    </el-row>
  </div>
</template>

<script>
/* 引入公共方法*/
import { commonMxin } from '@/mixins/commonMxin'
import { procurementBiddingGroupMixin } from '../mixins/procurementBiddingGrounpMixins'
import { procurementBiddingMixins } from '../mixins/procurementBiddingMixins'
import { createURL } from '@/assets/js/utils/index'
/* 组件*/
import offerClock from '../../components/procurementClockComp/procurementClockComp.vue' // 时钟组件
import countdown from '@comp/procurement/countdownCom/countDownCom' // 倒计时组件
export default {
  name: 'OfferLobbyNobeginDetailVue',
  components: {
    offerClock,
    'count-down': countdown
  },
  mixins: [commonMxin, procurementBiddingGroupMixin, procurementBiddingMixins],
  data() {
    return {
      // 路由地址
      url: '',
      // 路由携带参数
      urlData: {
        tenderId: this.$route.query.tenderId, // 项目id
        packId: this.$route.query.packId, // 项目标段id
        tenderMethod: this.$route.query.tenderMethod,
        supplierId: this.$route.query.supplierId // 供应商id
      },
      // 当前时间
      currentTimes: '',
      qouteEndTime: '',
      // 倒计时期间的状态值 布尔
      flag: true, // 倒计时结束返回false 默认true
      // 竞价状态显示文本
      biddingText: '竞价暂未开始....'
    }
  },
  watch: {
    'flag'(val) {
      if (!val) {
        this.biddingText = '竞价进行中....'
      }
    }
  },
  created() {
    // 查询当前时间
    const packId = this.$route.query.packId // 获取标段id
    this.getOfferRulesData(packId)
    this.url = '#/biddingLobby/offerLobbyAgentBidding' + createURL(this.urlData) // '#/biddingLobby/offerLobbyBidding'
  },
  methods: {
  // 监听倒计时回调
    endCallback(data) {
      // 时间截止后返回data对象中的isTimeStop为true
      this.flag = data.isTimeStop
    }
  }
}
</script>

<style lang="less" scoped>
  @import "~@assets/style/procurement/procurement.bidding.less";

</style>
