<!--
  @description:竞价大厅-我的报价/全部报价组件
  @Modifier:gmy
  @routerPath:
  @date:2020/5/9-15:48
-->
<template>
  <div class="offer-echarts">
    <el-tabs v-model="activeName" @tab-click="handleClick(activeName)">
      <el-tab-pane
        v-for="(item,index) in offerList"
        :key="index"
        :label="item.typename"
        :name="item.typecode"
      />
    </el-tabs>
    <!-- 我的报价组件 -->
    <offerApxecharts v-if="activeName === '00'" ref="offerApxecharts" :hall-type="hallType" :bidding-status="biddingStatus" />
    <!-- 全部报价组件 -->
    <el-table
      v-if="activeName === '01'"
      :data="tableData"
      max-height="200"
      border
    >
      <el-table-column
        header-align="center"
        prop="sort"
        label="排名"
        align="center"
        width="80"
      />
      <el-table-column
        header-align="center"
        prop="supplierName"
        label="供应商名称"
        align="left"
        min-width="230"
      />
      <el-table-column
        header-align="center"
        align="center"
        width="110"
      >
        <template slot="header">
          最新报价<span>（{{ Unit }}）</span>
        </template>
        <template slot-scope="scope">
          {{ scope.row.newBidPrice }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        min-width="110"
      >
        <template slot="header">
          初始报价<span>（{{ Unit }}）</span>
        </template>
        <template slot-scope="scope">
          {{ scope.row.beginBidPrice }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        min-width="110"
      >
        <template slot="header">
          幅度<span>（{{ Unit }}）</span>
        </template>
        <template slot-scope="scope">
          {{ scope.row.amplitude }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        prop="negRecordTime"
        align="center"
        label="报价时间"
        min-width="180"
      />
    </el-table>
  </div>
</template>

<script>
/* api 接口 */
import { quotationRankingForSupplier } from '@/api/procurement/procurementOffer'
/* 公共混入 */
import { procurementBiddingGroupMixin } from '../mixins/procurementBiddingGrounpMixins'
/* 组件 */
import offerApxecharts from './proBiddingApxecharts-detail' // 我的报价
export default {
  name: 'OfferLobbyAllDetailVue',
  components: {
    offerApxecharts
  },
  mixins: [procurementBiddingGroupMixin],
  props: {
    // 竞价规则
    projectRulesData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 大厅类型 00采购 01供应商
    hallType: {
      type: String,
      default: ''
    }
  },
  inject: ['getTenderBase'],
  data() {
    return {
      biddingStatus: '',
      activeName: '00',
      tableData: [],
      // 报价单位 元 || %
      Unit: '',
      // 获取项目信息
      tenderBase: this.getTenderBase()
    }
  },
  watch: {
    // 监听竞价类型 comparePriceType 00竞价格 01 竞折扣率
    'projectRulesData.comparePriceType': {
      handler(val) {
        if (val === '00') {
          this.Unit = '元'
        } else {
          this.Unit = '%'
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // 全部报价
    this.quotationOfferData()
  },
  methods: {
    reload() {
      // 我的报价趋势
      if (this.$refs.offerApxecharts) {
        this.$refs.offerApxecharts.getMyOfferData()
      }
      // 全部报价
      this.quotationOfferData()
    },
    handleClick(val) {
      // 初始化订单状态
      this.activeName = val
    },
    // 全部报价
    quotationOfferData() {
      const params = {
        packId: this.tenderBase.packId
      }
      quotationRankingForSupplier(params).then(res => {
        this.tableData = res.data
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>
.offer-echarts{
  min-height: 200px;
}
</style>
