<template>
  <div>
    <el-input-number
      ref="AosInputNumber"
      v-if="edit"
      :title="copyData"
      v-model="copyData"
      :min="min"
      :max="max"
      :style="{width: width}"
      size="small"
      :step="step"
      :step-strictly="stepStrictly"
      :precision="precision"
      :controls="controls"
      :controls-position="controlsPosition"
      :name="name"
      :placeholder="placeholder"
      :disabled="disabled"
      @blur="handleBlur"
      @change="handleChange"
      @focus="handleFocus"
    ></el-input-number>
    <div class="el-form-item__content aos-form-input-text" v-else>
      <div :title="copyData">{{copyData}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'AosInputNumber',
  componentName: 'AosInputNumber',
  props: {
    edit: {
      type: Boolean,
      default: true
    },
    title: {
      type: [String, Number]
    },
    value: {
      type: [Number, String],
      default: 0
    },
    min: {
      type: Number,
      default: -Infinity
    },
    max: {
      type: Number,
      default: Infinity
    },
    width: {
      type: String
    },
    step: {
      type: Number,
      default: 1
    },
    stepStrictly: {
      type: Boolean,
      default: false
    },
    precision: {
      type: Number
    },
    disabled: {
      type: Boolean,
      default: false
    },
    controls: {
      type: Boolean,
      default: true
    },
    controlsPosition: {
      type: String,
      default: 'right'
    },
    placeholder: {
      type: String,
      default: '请在此输入'
    },
    name: {
      type: String
    }
  },
  watch: {
    value: {
      handler: function (val) {
        this.copyData = typeof val === 'number' ? val : parseFloat(val)
      },
      immediate: true
    }
  },
  data(){
    return {
      copyData: 0
    }
  },
  methods: {
    handleBlur (event) {  
      this.$emit('blur', event)
    },
    handleChange (currentValue, oldValue) {
      this.$emit('change', currentValue, oldValue)
    },
    handleFocus (event) {
      this.$emit('focus', event)
    }
  }
};
</script>

