<template>
  <div id="product_list" class="body">
    <div style="flex: 1">
      <el-container>
        <el-table :data="productList" border style="width: 100%;flex: 1" :height="tableHeight" ref="table">
          <el-table-column prop="productName" label="货物或应税劳务.服务名称" width="160"></el-table-column>
          <el-table-column prop="specification" label="规格型号" width="160"></el-table-column>
          <el-table-column prop="units" label="单位" width="160"></el-table-column>
          <el-table-column prop="number" label="数量" width="100"></el-table-column>
          <el-table-column prop="price" label="单价" width="120"></el-table-column>
          <el-table-column prop="amount" label="金额" width="160"></el-table-column>
          <el-table-column prop="taxRate" label="税率" width="100" :formatter="getTaxRate"></el-table-column>
          <el-table-column prop="taxAmount" label="税额" width="120"></el-table-column>
        </el-table>
      </el-container>
    </div>
  </div>
</template>

<script>

export default {
  name: 'product_list',
  data() {
    return {
      tableHeight: '',
      productList: []
    }
  },
  created() {
    this.tableHeight = window.innerHeight - 250
    this.productList = this.$attrs.productList.productData.product
  },
  mounted() {
    this.tableHeight = window.innerHeight - 250
    window.onresize = () => {
      return (() => {
        this.tableHeight = window.innerHeight - 250
      })()
    }
  },
  methods: {
    // 获取企业税率
    getTaxRate(row, column, cellValue) {
      if (cellValue !== null || cellValue !== '') {
        return cellValue * 100 + '%'
      }
    },
    // 获取商品列表
    getProductList(productList) {
      this.productList = productList
    },
    // 清空商品列表
    cleanProductList() {
      this.productList = []
    }
  }
}
</script>

<style scoped>
.body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
