<template>
  <vxe-modal v-model="value" id="addProductModal" width="70%" v-loading="load" :mask="mask" @hide="hide" height="80%" show-footer :title="title">
    <by-tool :propConfig="toolConfig" class="add-ptool" ref="tool">
      <template v-slot:tool-right>
        <el-switch
          v-if="!isGift"
          v-model="isPay"
          active-text="快速支付" />
      </template>
    </by-tool>
    <by-table :propConfig="config" ref="table">
      <template v-slot:price='{ row }'>
        <span v-if="isGift">0</span>
        <vxe-input v-else v-model="row.price" placeholder="单价" align="center" size="mini" type="number"></vxe-input>
      </template>
    </by-table>
    <template #footer>
      <div class="btn">
        <el-button plain size="small" @click="value = false">取消</el-button>
        <el-button type="primary" size="small" @click="btn">确定</el-button>
      </div>
    </template>
    <!-- 商品 -->
    <product-sku-modal ref="product" :mulit="true" @confirm="confirmProduct" />
  </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { addItem,addGift } from '@/api/omsOrder'
@Component({components:{}})
export default class AddProductModal extends Vue {
  @Prop()
  mask?:boolean;
  isGift=false
  title='';
  value=false;
  load=false;
  isPay = true;
  billValue:Array<any>=[];
  config:any={
    attr:{
      size:'small',
      align:'center'
    },
    columns:[{
      title:'名称',
      field:'name',
      width:340
    },{
      title:'数量',
      field:'qty',
      width:120,
      component:'by-input',
      compConfig:{
        attr:{
          placeholder:'数量',
          type:'integer',
          size:'mini',
          align:'center'
        }
      }
    },{
      title:'单价',
      field:'price',
      width:120,
      slot:true,
      component:'by-input',
      compConfig:{
        attr:{
          type:'number',
          size:'mini',
          align:'center'
        }
      }
    },{
      title:'库存',
      field:'stock',
      width:100
    },{
      title:'操作',
      action:true,
      plugins:[{
        icon:'el-icon-delete',
        name:'删除',
        audit:'',
        event:{
          click:(item:any) => {
            this.deletaProduct(item);
          }
        }
      }]
    }]
  }
  toolConfig:any={
    customTools:[
      {
        name: '新增商品', icon: 'el-icon-plus', event:{
          click:()=>{
            (this.$refs.product as any).setShow(true);
          }
        }
      }
    ]
  }
  created(){
    
  }
  setGift(v:boolean){
    this.isGift = v;
    this.title = this.isGift?'添加赠品':'添加商品';
    this.toolConfig.customTools[0].name = this.title;
    if(this.$refs.tool){
      (this.$refs.tool as any).initTools();
    }
    
  }
  hide(){
    this.isPay = true;
    (this.$refs.table as any).setValue([]);
  }
  setShow(v:boolean){
    this.value = v;
    this.$nextTick(()=>{
      (this.$refs.product as any).setShow(true);
    })
  }
  setBillValue(data:any){
    this.billValue = data;
  }
  giftHandle(){
    let tlist=(this.$refs.table as any).getValue();
    if(tlist.length == 0){
      this.$message('请选择赠品！')
      return
    }
    let parames:any={};
    parames.idList = this.billValue;
    parames.giftList=[];
    for(const item of tlist){
      parames.giftList.push({
        itemId:item.itemId,
        qty:item.qty
      })
    }
    this.load = true;
    addGift(parames).then(() => {
      this.load = false;
      this.$message({
        message:'添加成功！',
        type:'success'
      });
      this.$emit('handleSuccess');
      this.value = false;
    }).catch((err:any)=>{
      this.load = false;
    })
  }
  productHandle(){
    let tlist=(this.$refs.table as any).getValue();
    let data:any={};
    if(tlist.length == 0){
      this.$message('请选择商品！')
      return
    }
    data.id = this.billValue;
    data.items=[];
    data.isPay = this.isPay;
    for(const item of tlist){
      data.items.push({
        itemId:item.itemId,
        qty:Number(item.qty),
        price:Number(item.price)
      })
    }
    this.load = true
    addItem(data).then(()=>{
      this.load = false;
      this.$message({
        message:'添加成功！',
        type:'success'
      });
      this.$emit('handleSuccess');
      this.value = false;
    }).catch(()=>{
      this.load = false
    })
  }
  btn(){
    if(this.isGift){
      this.giftHandle()
    }else{
      this.productHandle()
    }
  }
  confirmProduct(data:Array<any>){
    let nowData = (this.$refs.table as any).getValue();
    let names='';
    if(data.length > 0){
      for(const item of data){
        let t = true;
        for(const t_item of nowData){
          if(item.id == t_item.itemId){
            if(!names){
              names = item.skuTitle
            }else{
              names = names + ',' + item.skuTitle
            }
            t = false;
            break;
          }
        }
        if(t){
          let obj:any={};
          obj.name = item.skuTitle; //商品名称
          obj.itemId = item.id;
          obj.qty = 1;
          obj.price = this.isGift ? 0 : item.price;  //单价
          
          obj.stock = item.stock;
          nowData.push(obj)
        }
      }
      (this.$refs.table as any).setValue(nowData);
      if(names){
        let name = this.isGift ? '赠品' : '商品';
        this.$alert(name+'“'+names+'”已存在！', '提示', {
          confirmButtonText: '确定',
          callback: action => {}
        });
      }
    }
  }
  deletaProduct(item:any){
    let data=(this.$refs.table as any).getValue();
    let i = -1;
    for(const v of data){
      i++;
      if(v.itemId == item.itemId){
        break
      }
    }
    data.splice(i,1);
    (this.$refs.table as any).setValue(data);
  }
}
</script>

<style lang="scss" scoped>
.add-ptool{
  padding-bottom: 8px;
}
</style>