<template>
  <div>
    <r-board :boardData="tops" class="boxcard" />
    <div :style="{height:`${this.contentHeight}px`}"  style="background-color: #ffff;margin-top: 10px;padding-top: 20px;">
      <r-table class="page" :isIndex="false" :tableData="tableData" :tableCols="tableCols"   :tablePage="pagination" @refresh="init()" >
        <div class="flex-col-center" style="width:100%;">
          <r-search ref="searchalt" :searchData="searchData" :searchForm="searchForm" :searchHandle="searchHandle" style="" />
        </div>
      </r-table>
      
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      pagination: { size: 10, page: 1, total: 0 },
      searchData: {
        keyWord:"",
        status:'-1'
      },
      searchForm: [
        // { type: "radioButton",label: "时间", prop: "keyWord",radios:[{label:'今日',value:'day'},{label:'昨日',value:'yesterday'},{label:'本周',value:'week'},{label:'本月',value:'month'},{label:'本季',value:'quarter'},{label:'本年',value:'year'}]},
        { type: "input",label: "关键词", prop: "keyWord",placeholder:'商品名、规格'},
        { type: "select",label: "SKU状态", prop: "status",options:[{label:'全部',value:'-1'},{label:'在售',value:'1'},{label:'下架',value:'0'},{label:'预警',value:'2'}]},
      ],
      searchHandle: [
        {type: "info",icon: "el-icon-refresh", handle: e => this.init(true) },
        {label: "搜索",type: "primary",icon: "el-icon-search",handle: e => this.seach()},  
      ],
      contentHeight:500,
      tableData: [],
      tableCols:[
          
          { label: "商品类型", prop: "type_name",width:150},
          { label: "品牌", prop: "brand_name",width:150},
          { label: "商品名称", prop: "good_name",width:150},
          { label: "商品sku", prop: "title",width:200},
          { label: "总量库存", prop: "num",width:200},
          { label: "可售库存", prop: "stock",width:200},
          { label: "采购成本", prop: "buyer_price",width:150},
          { label: "参考售价", prop: "reference_price",width:150},
          { label: "成本", prop: "cost",width:200},
          { label: "SKU状态", prop: "status",width:200},
          { label: "更新时间", prop: "updated_at",width:200},
        ],
      tops:[{label:'商品总数',value:0},{label:'实际库存量',value:0},{label:'可售库存量',value:0},{label:'在售SKU',value:0},{label:'下架SKU',value:0},{label:'预警SKU',value:0}],
      
    }
  },
  computed:{

  },
  mounted() {
    let  element = document.querySelector('.box-card');
    let  topEl = document.querySelector('.boxcard');
    console.log(element.offsetHeight,topEl.offsetHeight);
    this.contentHeight=element.offsetHeight-50-10-10
    this.init()
  },
  methods:{
    init(param={}){
      this.$http.post('/goodChart',Object.assign(this.pagination,param)).then(res=>{
        this.tableData=res.data.list
        let skan=res.data.skan
        this.tops.forEach((lst,index)=>{
          lst.value=skan[index]
        })
      })
    },
    seach(){
      this.init(this.searchData)
    }

    
  }
};
</script>
<style scoped>
.divi{
    display: inline-block;
    width: 1px;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
    background-color:#DCDFE6;
}
</style>