<template>
  <vxe-modal v-model="value" id="commissionModal" width="500" v-loading="load" @show="show" @hide="hide" height="260" show-footer :title="data.skuTitle + '-佣金明细'">
    <div class="split-num">
      <div class="max-label">一级佣金(%)：</div>
      <vxe-input v-model="val1" size="small" style="width:200px" placeholder="请输入" type="number" @input="minValChange"></vxe-input>
      <span class="msg" v-if="commissionVal">注：{{ commissionVal.minRate }}% ~ {{ commissionVal.maxRate }}%</span>
    </div>
    <div class="split-num">
      <div class="max-label">二级佣金(%)：</div>
      <vxe-input  v-model="val2" size="small" style="width:200px" placeholder="请输入" type="number" @input="maxValChange"></vxe-input>
      <span class="msg" v-if="commissionVal">注：{{ commissionVal.minRate }}% ~ {{ commissionVal.maxRate }}%</span>
    </div>
    <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>
  </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { productCommissionSave,productCommissionQueryByProductId,productCommissionUpdate } from '@/api/distribution'
import { saleRankList } from '@/api/distribution'
@Component({components:{}})
export default class CommissionModal extends Vue {
  value=false;
  load=false;
  productCommissionValue:any=null;
  val1:any=0;
  val2:any=0;
  data:any=[];
  commissionVal:any=null
  state=1
  setShow(v:boolean){
    this.value = v;
  }
  mounted(){
    this.getCommissionValue()
  }
  minValChange(){
    // if(!this.commissionVal){
    //   this.val1 = 0
    //   return
    // }
    if(this.commissionVal && this.val1 < this.commissionVal.minRate){
      this.val1 = this.commissionVal.minRate
    }
    if(this.commissionVal && this.val1 > this.commissionVal.maxRate){
      this.val1 = this.commissionVal.maxRate
    }
  }
  maxValChange(){
    // if(!this.commissionVal){
    //   this.val2 = 0
    //   return
    // }
    if(this.commissionVal && this.val2 < this.commissionVal.minRate){
      this.val2 = this.commissionVal.minRate
    }
    if(this.commissionVal && this.val2 > this.commissionVal.maxRate){
      this.val2 = this.commissionVal.maxRate
    }
  }
  setData(data:Array<any>){
    this.data = data;
    this.queryProductCommission()
  }
  show(){}
  hide(){
    this.val1 = null;
    this.val2 = null;
    this.productCommissionValue=null;
  }
  queryProductCommission(){
    productCommissionQueryByProductId({productId:this.data.id}).then((res:any) => {
      this.val1 = res.data.commission1;
      this.val2 = res.data.commission2;
      this.productCommissionValue = res.data;
    }).catch(() =>{})
  }
  btn(){
    if(this.productCommissionValue && this.productCommissionValue.id){
      productCommissionUpdate({
        id:this.productCommissionValue.id,
        productId:this.data.id,
        commission1:this.val1,
        commission2:this.val2
      }).then(() => {
        this.$message({
          message:'商品“' + this.data.skuTitle + '”佣金修改成功！',
          type:'success'
        });
        this.value = false
      }).catch(() => {})
    }else{
      productCommissionSave({
        productId:this.data.id,
        commission1:this.val1,
        commission2:this.val2
      }).then(() => {
        this.$message({
          message:'商品“' + this.data.skuTitle + '”佣金设置成功！',
          type:'success'
        });
        this.value = false
      }).catch(() => {})
    }
    
  }
  getCommissionValue(){
    saleRankList({
      pageNo:1,
      pageSize:20
    }).then((res:any) => {
      this.commissionVal = res.data.records[0]
    }).catch(()=>{})
  }
}
</script>

<style lang="scss" scoped>
.split-num{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 16px;
  .max-label{
    font-size: 14px;
    padding-right: 8px;
  }
}
.msg{
  color: rgb(240, 175, 95);
  font-size: 12px;
  padding-left: 8px;
}
</style>