<!--
  @description:采购人竞价大厅-报价排名
  @Modifier:gmy
  @routerPath:
  @date:2020/6/16-18:39
-->
<template>
  <div class="offer-goods">
    <!-- 标题-->
    <p class="offer-detail" style="padding-left: 10px">
      报价排名
    </p>
    <section class="offer-goods-tables">
      <el-row class="clearfix">
        <el-col class="fl agent-info-div">
          <div class="agent-info-divs">
            <div class="agent-info-div-var">
              {{ bidPrice ? bidPrice : 0 }}
            </div>
            <div>当前最{{ projectRulesData.comparePriceMethod === '00' ? '高' : '低' }}报价(元)</div>
          </div>
        </el-col>
        <el-col class="fr agent-info-div">
          <div class="agent-info-divs">
            <div class="agent-info-div-var">
              {{ bidPriceSupplier ? bidPriceSupplier : '未开始' }}
            </div>
            <div>当前最{{ projectRulesData.comparePriceMethod === '00' ? '高' : '低' }}报价方</div>
          </div>
        </el-col>
      </el-row>

      <el-table
        :data="tableData"
        height="180"
        class="goods_table"
      >
        <el-table-column
          header-align="center"
          prop="sort"
          label="排名"
          align="center"
          width="60"
        />
        <el-table-column
          header-align="center"
          prop="supplierName"
          label="企业名称"
          min-width="110"
          align="left"
        />
        <el-table-column
          header-align="center"
          prop="newBidPrice"
          label="最新报价(元)"
          width="110"
          align="center"
        />
        <el-table-column
          header-align="center"
          prop="beginBidPrice"
          label="初始报价(元)"
          width="110"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="amplitude"
          label="幅度(元)"
          width="90"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="negRecordTime"
          label="报价时间"
          min-width="110"
          align="center"
        />
      </el-table>
    </section>
  </div>
</template>

<script>
/* api 接口 */
import { quotationRanking } from '@/api/procurement/procurementOffer'
export default {
  name: 'ProOfferAgentGoodsListVue',
  inject: ['getTenderBase'],
  props: {
    // 竞价规则
    projectRulesData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 竞价状态 00竞价未开始 01竞价结束
    biddingStatus: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tenderBase: this.getTenderBase(), // 获取项目信息
      tableData: [], // 表格数据
      bidPrice: '', // 当前最低报价
      bidPriceSupplier: '' // 当前最低报价方
    }
  },
  watch: {
    // 监听竞价状态 01表示竞价结束 重新获取报价排名
    biddingStatus: {
      handler(val) {
        if (val === '01') {
          // 报价排名（采购人）
          this.quotationRanking()
        }
      },
      immediate: true
    }
  },
  created() {
    // 报价排名（采购人）
    this.quotationRanking()
  },
  methods: {
    // 报价排名（采购人）
    quotationRanking() {
      const params = {
        // 项目标段id
        packId: this.tenderBase.packId
      }
      quotationRanking(params).then(res => {
        this.tableData = res.data.quotationRankingList // 表格数据
        this.bidPrice = res.data.BidPrice // 当前最低报价
        this.bidPriceSupplier = res.data.BidPriceSupplier // 当前最低报价方
      }).catch(() => {
      })
    }
  }
}
</script>

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