<!--
  @description: 报价明细
  @Modifier: haoFx
  @routerPath:
  @date: 2021-02-15-13:41
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="offerSureVisibleDialog"
      :close-on-click-modal="false"
      append-to-body
      title="报价明细"
      width="1160px"
      custom-class="el-dialog__body-p8 el-dialog_table"
    >
      <el-table
        ref="multipleTable"
        :data="offerSureDetailList"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
        />
        <el-table-column
          header-align="center"
          prop="productNo"
          align="center"
          label="物料编号"
          width="160"
        />
        <el-table-column
          header-align="center"
          prop="purchaseDesc"
          label="物料描述"
          min-width="200"
          align="center"
        />
        <el-table-column
          header-align="center"
          prop="purchaseNo"
          label="行项目号"
          width="160"
          align="center"
        />
        <el-table-column
          header-align="center"
          prop="unitBudget"
          label="预算净单价（元）"
          min-width="120"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="taxOfferTotal"
          label="历史报价（元）"
          width="110"
          align="center"
        >
          <template slot-scope="scope">
            <el-link type="primary" size="mini" @click="historicalQuotation(scope.row)">
              查看
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="taxRateStr"
          label="税率（%）"
          min-width="110"
        />
        <el-table-column
          header-align="center"
          prop="quantity"
          label="数量"
          width="110"
        />
        <el-table-column
          header-align="center"
          prop="unit"
          label="计量单位"
          width="90"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ filterDictText(purchaseUnitList,scope.row.unit ) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="taxUnitPrice"
          label="不含税单价（元）"
          min-width="120"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="singleTotalOfferPrice"
          label="不含税总价（元）"
          min-width="120"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="offerRemarks"
          label="品牌/生产厂家"
          min-width="110"
        />
        <el-table-column
          header-align="center"
          prop="offerInstructions"
          label="报价备注"
          min-width="110"
        />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">
          关闭
        </el-button>
      </span>
    </el-dialog>
    <historicalQuotationDialog :dialog-data="historyDialogData" />
  </div>
</template>

<script>
/* api*/
import { queryOfferSureDetailListByOfferId } from '@/api/procurement/procurementOffer'
/* 常用方法 */
import { filterDictText } from '@assets/js/utils'
/* 组件 */
import historicalQuotationDialog from './historicalQuotation-dialog.vue' // 历史报价弹窗
import { procurementGroupMixins } from '../mixins/procurementGrounpMixins'
export default {
  name: 'OfferSureDetailDialog',
  components: {
    historicalQuotationDialog // 历史报价弹窗
  },
  mixins: [procurementGroupMixins],
  data() {
    return {
      // 历史报价弹窗数据
      historyDialogData: {
        dialog: false,
        productNo: '', // 行项目编号
        productName: '' // 物资名称
      },
      offerSureVisibleDialog: false,
      offerSureDetailList: [] // 报价信息明细列表
    }
  },
  mounted() {
    // 查询项目字典
    this.initWebTypeGroup()
  },
  methods: {
    filterDictText, // 数据字典查询
    getOfferSureDetail(offerId) {
      this.offerSureVisibleDialog = true
      queryOfferSureDetailListByOfferId(offerId).then(res => {
        this.offerSureDetailList = res.data
      }).catch(() => {
      })
    },
    // 关闭弹框
    closeDialog() {
      this.offerSureVisibleDialog = false
    },
    // 历史报价弹窗
    historicalQuotation(row) {
      this.historyDialogData.productNo = row.productNo // 行项目编号
      this.historyDialogData.productName = row.productName // 物资名称
      this.historyDialogData.dialog = true
    }
  }
}
</script>

<style scoped>

</style>
