<template>
  <div class="goods_page">
    <el-table
      :data="tableData.adminProductVOList"
      border
      style="width: 100%"
    >
      <el-table-column
        label="产品主图"
      >
        <template slot-scope="scope">
          <img
            class="product-img"
            height="90"
            width="90"
            :src="scope.row.productImg"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="productName"
        label="产品名称"
      />
      <el-table-column
        prop="id"
        label="产品id"
      />
      <el-table-column
        prop="price"
        label="售价 (元)"
        :formatter="getPrice"
      />
      <el-table-column
        prop="applyPrice"
        label="原价 (元)"
        :formatter="getPrice"
      />
      <el-table-column
        prop="stock"
        label="库存 (件)"
      />
      <el-table-column
        prop="sellCount"
        label="累计销量 (件)"
      />
      <el-table-column
        prop="status"
        :formatter="getStatus"
        label="上架状态"
      />
    </el-table>
    <pagination
      v-show="tableData.total > 0"
      :limit.sync="formParams.pageSize"
      :page.sync="formParams.pageIndex"
      :total="Number(tableData.total)"
      @pagination="fetch"
    />
  </div>
</template>

<script>
import Marketing from '@/api/Marketing'
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  props: {
    info: {
      type: Object,
      default: () => []
    }
  },
  data() {
    return {
      formParams: {
        pageSize: 10,
        pageIndex: 1,
        productIds: this.info.productIds
      },
      tableData: {}
    }
  },
  created() {
    this.getGoodList()
  },
  methods: {
    async getGoodList() {
      const res = await Marketing.getGoodList(this.formParams)
      const resData = res.data
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    fetch() {
      this.getGoodList()
    },
    getStatus(row, item, value) {
      const ob = {
        1: '上架',
        0: '下架'
      }
      return ob[value]
    },
    getPrice(row, item, value) {
      return value / 100
    }
  }
}
</script>

<style lang='less' scoped>
.goods_page {
    .product-img {
        border-radius: 4px;
    }
}

/deep/ .el-table {
  th {
      background: #EEF3FF;
      color:#333333;
      font-size:16px;
      font-weight: 400;
      border-color: #E0E5EB;
      text-align: center;
  }
  td {
    font-size: 14px;
    text-align: center;
    color: #666666;
  }
}
</style>
