<template>
  <div class="xd-table-sort">
    <el-input-number
      v-model="value"
      @change="handleChange"
      :min="min"
      :max="max"
      :size="size"
    ></el-input-number>
  </div>
</template>

<script>
  export default {
    name: "XdTableSort",
    props:{
      defaultValue: {
        type: Number|null,
        default: null
      },
      min: {
        type: Number ,
        default: 1
      },
      max: {
        type: Number,
        default: 99999
      },
      size: {
        type: String,
        default: 'small' //small,large
      }
    },
    data(){
      return {
        valueOld: null, //老值
        value: null, //变化的值
        timeer: null
      }
    },
    created(){
      if(this.defaultValue !== null) {
        this.value = this.defaultValue;
        this.valueOld = this.defaultValue;
      }
      
    },
    methods:{
      handleChange(){
        if(this.timeer){
          clearTimeout(this.timeer);
          this.timeer = null
        }
        this.timeer = setTimeout(()=>{
          this.$emit('change', {
            value: this.value,
            cb:(status)=>{
              console.log(status);
              if (status === 2) this.value = this.valueOld;
              if (status === 1) this.valueOld = this.value;
            }
          });
        }, 500)
      },
    }
  }
</script>

<style scoped lang="scss">
  .xd-table-sort {
    display: flex;
    justify-content: center;
    align-items: center;

  }
</style>
