<!--
  @description: 立项-预览-标的清单
  @Modifier：肖文龙
  @routerPath:
  @date：  2019-12-18 16:33:443
-->
<template>
  <div>
    <el-table
      :data="showTenderMaterielInfoList"
    >
      <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
      />
      <el-table-column
        header-align="center"
        label="物料编码"
        prop="productNo"
        align="center"
      />
      <el-table-column
        header-align="center"
        label="产品名称"
        prop="productName"
      />
      <el-table-column

        header-align="center"
        label="型号"
        prop="productModel"
      />
      <el-table-column
        header-align="center"
        label="数量"
        prop="quantity"
        align="right"
      />
      <el-table-column
        header-align="center"
        label="单位"
        prop="unit"
      />
      <el-table-column
        header-align="center"
        label="预算单价（元）"
        prop="unitBudget"
        align="right"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.unitBudget?moneyFormat(scope.row.unitBudget.toFixed(2)):scope.row.unitBudget }}</span>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        label="预算总额（元）"
        prop="totalBudget"
        align="right"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.totalBudget?moneyFormat(scope.row.totalBudget.toFixed(2)):scope.row.totalBudget }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination :pagination-data="paginationData" @change="paginData" />
  </div>
</template>

<script>
import { listTenderMaterie } from '@/api/bidding/biddingProject'
/* 公用方法*/
import { moneyFormat, paging } from '@assets/js/utils'// 常用方法
/* 混入公共方法*/
import { ListMixin } from '@/mixins/ListMixin'// 分页/* 混入-字典信息 */
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
export default {
  name: 'BidProjectMaterielDetail',
  components: {
    pagination// 分页
  },
  mixins: [ListMixin],
  props: {
    // 接收步骤条父页面信息
    projectData: {
      type: Object,
      default: function() {
        return {
          id: ''
        }
      }
    }
  },
  data() {
    return {
      moneyFormat: moneyFormat, // 金额添加千分位
      tenderMaterielInfoList: [], // 物料列表
      showTenderMaterielInfoList: [] // 显示的物料信息
    }
  },
  created() {
    let tenderId = ''
    tenderId = this.projectData.id ? this.projectData.id : this.$route.params.id
    if (this.$route.query.id) tenderId = this.$route.query.id // 传参方式都改完删除
    this.loadData(tenderId)
  },
  methods: {
    // 项目经理/采购人-查询项目物料列表
    loadData(tenderId) {
      listTenderMaterie({ tenderId: tenderId }).then(response => {
        if (response.data) {
          this.tenderMaterielInfoList = response.data // 回显物料列表
        }
        this.paginData()// 分页
      }).catch(() => {

      })
    },
    // 分页
    paginData() {
      this.showTenderMaterielInfoList = paging({}, this.tenderMaterielInfoList, this.paginationData)// 分页功能
    }
  }
}
</script>

<style scoped>

</style>
