<template>
  <div :class="className" :style="{height:height,width:width}">
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="width:100%;"
    >
      <el-table-column label="商品图片" align="center" prop="productImage" width="100px">
        <template slot-scope="{row}">
          <img :src="row.productImage" alt="" width="40">
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center" prop="name" width="300px">
        <template slot-scope="{row}">
          <span class="span-name">{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销售量" align="center" prop="totalNum" />
      <el-table-column label="订单量" align="center" prop="frequency" />
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    goodslistData: {
      type: Array,
      default: function() {
        return []
      }
    },
    className: {
      type: String,
      default: 'goods'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '80%'
    }
  },
  data() {
    return {
      list: null
    }
  },
  watch: {
    goodslistData: {
      handler: function(el) { // 监听对象的变换使用 function，箭头函数容易出现this指向不正确
        console.log(el)
        this.initGoodList(el)
      },
      deep: true
    }
  },
  created() {
    this.initGoodList(this.goodslistData)
  },
  methods: {
    initGoodList(data) {
      this.list = data
    }
  }
}
</script>
<style lang="scss" scoped>
  .goods{
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    margin-top: 10px;
  }
  .span-name{
      word-break:break-all;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      overflow:hidden;
  }
</style>
