<template>
  <div>
    <el-dialog title="查看商品库存" 
    width="800px"
    :visible.sync="dialogVisibleStock" 
    :before-close="handleDialogClose">
      <el-table :data="skuList" max-height="500px" v-loading="loading">
        <el-table-column property="mainImg" label="SKU图片" align="center">
          <template slot-scope="scope">
            <img style="width:50px;" :src="scope.row.mainImg" alt="">
          </template>
        </el-table-column>
        <el-table-column property="skuModel" label="SKU型号" align="center"></el-table-column>
        <el-table-column property="stock" label="库存数量" align="center">
          <template slot-scope="scope">
            <p>库存数量：{{scope.row.stock}}</p>
            <p>占用库存：{{scope.row.virtualQty}}</p>
            <p style="color:#409eff;">可用库存：{{scope.row.usableStock}}</p>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {_getStorage } from '@/utils/utils'
export default {
  name: "setStockDialog",
  data() {
    return {
      dialogVisibleStock:false,
      skuList:[],
      loading:false,
      params: {
        spuId:''
      },
    };
  },
  props:{
    objProps:{
      type:Object,
      default:()=>{ return {} }
    }
  },
  filters: {
    delivery: function(type) {
      return _delivery(type);
    }
  },
  watch:{
     objProps:{
          deep:true,
          handler: function(value) {
              this.dialogVisibleStock =value.dialogVisibleStock
          }
      }
  },
  mounted(){
    this.dialogVisibleStock = this.objProps.dialogVisibleStock
    if(this.objProps.spuId){
      this.params.spuId = this.objProps.spuId
      this.getSkuList()
    }
  },
  methods: {
    getSkuList(){
      this.loading = true
      let params = this.params
      this.$axios.get("/products/xlStockInfo", {params}).then(res => {
         let {code,data,msg} =res.data;
         if(code ==200){
            this.skuList = data && data.length>0?data:[]
         }else{
            this.$message.error(msg);
         }
         this.loading =false
      }).catch(res => {});
    },
    cancelForm(val) {
      this.$emit("resData", false);
    },
    handleDialogClose(){
      this.cancelForm(false);
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
