<!--
  @description:竞价大厅外部页-采购人-竞价结束
  @Modifier:hdk
  @date:2020/9/25-13:23
-->
<template>
  <el-col :span="24" class="offer-purchase-content">
    <div class="offer-beging offerTop">
      竞价信息
    </div>
    <div class="offer-tabel">
      <el-table
        :data="tableData"
        border
      >
        <el-table-column
          header-align="center"
          align="center"
          type="index"
          label="序号"
          width="180"
        />
        <el-table-column
          header-align="center"
          align="center"
          prop="supplierName"
          label="竞价方名称"
          width="180"
        />
        <el-table-column
          header-align="center"
          align="center"
          prop="beginBidPrice"
          label="初始报价（元）"
        />
        <el-table-column
          header-align="center"
          align="center"
          prop="newBidPrice"
          label="最终报价（元）"
        />
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="出价次数"
        />
        <el-table-column
          header-align="center"
          align="center"
          prop="amplitude"
          label="涨幅"
        />
        <el-table-column
          header-align="center"
          align="center"
          prop="address"
          label="报价明细"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click.stop="showDetail(scope.row)"
            >
              [查看]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <quotationDetailsDialog :dialog-data="dialogData" :tender-base="tenderBase" />
  </el-col>
</template>

<script>
/* api 接口 */
import { quotationRanking } from '@/api/procurement/procurementOffer'
/* 组件 */
import quotationDetailsDialog from './quotationDetails-dialog' // 报价明细
export default {
  name: 'ProcurementBiddingExternalEnd',
  components: {
    quotationDetailsDialog // 报价明细
  },
  inject: ['getTenderBase'],
  data() {
    return {
      tenderBase: this.getTenderBase(), // 获取项目信息
      tableData: [],
      // 报价明细弹窗
      dialogData: {
        dialog: false,
        supplierId: '' // 供应商id
      }
    }
  },
  created() {
    // 报价排名（采购人）
    this.quotationRanking()
  },
  methods: {
    // 查看报价明细
    showDetail(row) {
      // 打开弹窗
      this.dialogData.dialog = true
      // 供应商id
      this.dialogData.supplierId = row.supplierId
    },
    // 报价排名（采购人）
    quotationRanking() {
      const params = {
        // 项目标段id
        packId: this.tenderBase.packId
      }
      quotationRanking(params).then(res => {
        this.tableData = res.data.quotationRankingList // 表格数据
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
.offer-purchase-content{
  width:80%;
  .offer-single {
    width:100%;
    text-align: center;
  }
  .offer-beging{
    color:#47A20A;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  .offerTop{
    margin-top:calc(50% - 55%);
  }
  .offer-tabel{
    width:100%;
    margin-top:calc(50% - 45%);
  }
}
</style>
