<template>
  <div class="digitalInput">
    <el-input-number
      v-model="num"
      :name="name"
      class="fl"
      :class="{ appendInput: append }"
      :precision="precision"
      :step="step"
      :min="min"
      :max="max"
      :disabled="disabled"
      :size="size || 'medium'"
      :placeholder="placeholder"
      :controls-position="position"
      @change="handleChange"
      @blur="handleChange"
    />
    <!-- step-strictly -->
    <div
      v-if="append"
      class="my-append fl"
      :class="{
        'my-append-mini': size === 'mini',
        'my-append-small': size === 'small',
      }"
    >
      {{ append }}
    </div>
  </div>
</template>

<script>
import { accMul } from '@/utils/validate'
export default {
  name: 'DigitalInput',
  props: [
    'values',
    'min',
    'max',
    'step',
    'precision',
    'size',
    'append',
    'name',
    'disabled',
    'controls',
    'newTime',
    'placeholder',
    'position'
  ],
  data() {
    return {
      num: 0,
      loading: false
    }
  },
  watch: {
    values: {
      handler: function(val) {
        this.num = val
        this.$emit('reschange', val)
      },
      immediate: true
    },
    newTime: function(val) {
      if (val) {
        // console.log(this.name + "=" + this.values);
        this.num = this.values
        this.$emit('reschange', this.num)
      }
    },
    min: function(val) {
      const a = accMul(val, '1')
      const b = accMul(this.num, '1')
      console.log(a, b)
      if (a >= b) {
        this.num = a + ''
        this.$emit('reschange', this.num)
      }
    },
    max: function(val) {
      const a = accMul(val, '1')
      const b = accMul(this.num, '1')
      console.log(a, b)
      if (a <= b) {
        this.num = a + ''
        this.$emit('reschange', this.num)
      }
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('reschange', this.num)
      // console.log(value);
    },
    manualUpdate(val) {
      this.num = val
      this.handleChange()
    }
  }
}
</script>
<style lang="scss" scoped>
.digitalInput {
  width: 100%;
  /deep/ .el-input-number.is-controls-right .el-input__inner {
    padding-right: 15px !important;
    text-align: left !important;
  }
  /deep/.el-input-number.is-controls-right .el-input-number__decrease {
    display: none !important;
  }
  /deep/.el-input-number.is-controls-right .el-input-number__increase {
    display: none !important;
  }
  /deep/.el-input-number {
    width: 100% !important;
    &.appendInput {
      width: calc(100% - 40px) !important;
      .el-input__inner {
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
      }
    }
  }
  .my-append {
    width: 40px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    text-align: center;
    background-color: #f5f7fa;
    color: #909399;
    position: relative;
    border: 1px solid #dcdfe6;
    border-left: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    &.my-append-small {
      height: 32px !important;
      line-height: 32px !important;
    }
    &.my-append-mini {
      height: 28px !important;
      line-height: 28px !important;
    }
  }
}
</style>
