<template>
  <div class="items">
    <div class="tool">
      <el-button size="small" @click="addSku">新增</el-button>
    </div>
    
    <vxe-table border size="mini" show-header-overflow show-overflow :row-config="{isHover: true}" :data="data">
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="skuId" title="编码" width="120"></vxe-column>
      <vxe-column field="name" title="物料名称"></vxe-column>
      <vxe-column field="barCode" title="商品条码"></vxe-column>
      <vxe-column field="qty" title="数量" width="120">
        <template #default="{row}">
          <vxe-input v-model="row.qty" size="mini" min="1" type="integer" @input="qtyChange(row)"></vxe-input>
        </template>
      </vxe-column>
      <vxe-column resizable fixed="right" title="操作" width="120">
        <template #default="scope">
          <el-button type="text" @click="del(scope)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <product-sku-modal ref="product" :mulit="true" @confirm="confirmProduct" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component({components:{}})
export default class ItemSku extends Vue {
  data:Array<any> = []
  
  confirmProduct(data:Array<any>){
    for(const item of data) {
      let obj:any = {}
      obj.name = item.skuTitle;
      obj.skuId = item.id;
      obj.barCode = item.barCode;
      obj.qty = 1;
      this.data.push(obj);
    }
    this.$emit('onChange',this.data)
  }
  del(data:any) {
    this.data.splice(data.rowIndex,1)
    this.$emit('onChange',this.data)
    // console.log(this.data)
  }
  qtyChange(row:any) {
    if(Number(row.qty) < 1) {
      this.$message('数量不能小于0')
      row.qty = 1
      this.$forceUpdate()
    }
    row.qty = Number(row.qty)
    this.$emit('onChange',this.data)
  }
   // 清空数据
  clearValue(){
    this.data = [];
  }

  addSku(){
    (this.$refs.product as any).setShow(true)
  }
}
</script>

<style lang="scss" scoped>
.items{
  width: 100%;
  .tool{
    padding-bottom: 8px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>