<template>
  <div class="min-max">
    <div v-if="title">{{title}}：</div>
    <div class="munber-time">
      <vxe-input v-model="value[minField]" class="number-input" size="mini" type="number" @input="mininput"></vxe-input>
      <span class="split"> - </span>
      <vxe-input v-model="value[maxField]" class="number-input" size="mini" type="number" @input="maxinput"></vxe-input>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class OrderProduct extends Vue {
  value:any={}

  @Prop()
  title!: string;
  
  @Prop()
  minField!:string

  @Prop()
  maxField!:string
  clear(){
    this.value={}
  }
  mininput(){
    const max = Number(this.value[this.maxField]);
    const min = Number(this.value[this.minField]);
    if(max < min){
      this.$message({
        message: '最小值不能超过最大值！',
        type: 'warning'
      })
      this.value[this.minField] = null;
      return
    }
    this.$emit('change',this.value)
  }
  maxinput(){
    const max = Number(this.value[this.maxField]);
    const min = Number(this.value[this.minField]);
    if(max < min){
      this.$message({
        message: '最小值不能超过最大值！',
        type: 'warning'
      })
      this.value[this.maxField] = null;
      return
    }
    this.$emit('change',this.value)
  }
}
</script>

<style lang="scss" scoped>
.min-max{
  width: 100%;
  padding-bottom: 4px;
  .munber-time{
    width: 100%;
    display: flex;
    align-items: center;
    .split{
      padding: 0 8px;
    }
  }
}
</style>

<style lang="scss">
.number-input{
  width: 80px; 
  flex-shrink: 0; 
  padding: 0;
  .el-input__inner{
    padding: 0 !important;
    text-align: center;
  }
}
</style>