<template>
  <div class="page">
    <div class="title">{{title}}</div>
    <el-input-number
      v-model="value"
      :max="maxValue"
      :min="minValue"
      :step="stepValue"
      :size="size"
      @change="onChange"
      @blur="onblur"
      @focus="onFocus"
    ></el-input-number>
  </div>
</template>

<script>
export default {
    name: "HmElementInputNumber",
    props: {
        /**
         * 初始值
         * @v-model
         */
        value:{
            type:Number,
            default:0
        },
        /**
         * 标题
         */
        title:{
            type:String,
            default:'计数器：'
        },
        /**
         * 最大值
         */
        maxValue:{
            type:Number,
        },
        /**
         * 最小值
         */
        minValue:{
            type:Number,
            default:0
        },
        /**
         * 步长
         */
        stepValue:{
            type:Number,
            default:1
        },
        /**
         * 大小
         * @type Enum
         * @default large
         * @options ["large","medium","small","mini"]
         */
        size:{
            type:String,
            default:"large"
        }
    },
    data() {
        return {
        }
    },
    watch: {
        cvalue(value){
            this.value = value
        },
        value(val){
            this.$emit("getData",val)
        }
    },
    methods: {
        onChange: function (currentValue, oldValue) {
            this.$emit('change',currentValue, oldValue)
        },
        onblur: function (e) {
            this.$emit('blur',e)
        },
        onFocus:function (e) {
            this.$emit('focus',e)
        }
    },

}
</script>

<style scoped>
    .page{
        width: 100%;
        display:flex;
        align-items: center;
        padding-left:5vw;
    }
</style>