<template>
  <div class="table-wrap">
    <el-dialog title="编辑商品库存" :visible.sync="dialogTableVisible">
      <el-table :data="editSku" border>
        <el-table-column property="skuImg" label="商品" align="center">
          <template slot-scope="scope">
            <div class="ico-box list-box">
              <div class="item_1">
                <image-alert height="80" :image="scope.row.skuImg"></image-alert>
              </div>
              <div class="item_2">
                <span>{{scope.row.brandName}}{{scope.row.skuNum}}</span>
                <!-- <span>{{scope.row.brandName}}{{scope.row.skuNum}}</span> -->
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="skuStock" label="商品库存" align="center">
          <template slot-scope="scope">
            <div class="alert-sku">
              <p>
                库存数量：
                <el-input
                  class="input-box"
                  style="width:150px"
                  v-model="scope.row.skuStock"
                  @input="onEditSkuStock($event,scope.$index)"
                  placeholder="请输入内容"
                  @keyup.enter.native="onPostSkuStock"
                ></el-input>
              </p>
              <p>占用库存：{{scope.row.skuVisualStock}}</p>
              <p>可用库存：{{scope.row.skuAvailableStock}}</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="onPostSkuStock">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import imageAlert from "@/components/common/imageAlert";
export default {
  props: {
    editSku: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      dialogTableVisible:false
    }
  },
  methods:{
    onEditSkuStock(skuStock, index) {
      var sku = skuStock.replace(/[^\d]/g, "");
      this.editSku[index]["skuStock"] = sku;
    },
    toggle(){
      this.dialogTableVisible= !this.dialogTableVisible;
    },
    onPostSkuStock(){
      this.$emit('eventEditSkuStock',this.editSku);
    },
  },
  components:{
    imageAlert
  }
};
</script>
<style lang="scss" scoped>
.table-wrap {
  .ico-box {
    min-width: 200px;
  }

  .list-box {
    box-sizing: border-box;
    display: flex;
    justify-items: center;
    align-items: center;
    .item_1 {
      width: 80px;
    }
    .item_2 {
      flex: 1;
      // min-width: 60px;
    }
  }
  .icon_edit {
    min-width: 220px;
    .sku {
      width: 60%;
      p {
        text-align: right;
      }
    }
    .sku_edit {
      // width: 100px;
      width: 40%;
      text-align: left;
      margin-left: 10px;
    }
  }
  .alert-sku {
    display: inline-block;
    p {
      text-align: left;
    }
  }
}
</style>
