<template>
  <div id="numInput" class="inputBoxs">
      <input
        type="text"
        :placeholder="placeholder"
        class="inputSty"
        :value="value"
        @blur="changeValue($event)"
        :class="!value ? 'errSty' : ''"
      />
      <div v-if="!value && message" class="labelSty">{{message}}</div>
  </div>
</template>

<script>
export default {
  props:['value','placeholder','message','min'],
  data() {
    return {};
  },
  methods: {
    changeValue(e) {
      if (isNaN(Number(e.target.value))) {
        this.$message.warning("请输入数值");
        this.$emit('changevalues','')
      } else if (this.min != null && this.min != undefined && this.min != '' && Number(e.target.value) <= Number(this.min)) {
        this.$message.warning("请输入大于"+ this.min +"的数值");
        this.$emit('changevalues','')
      } else {
        this.$emit('changevalues',Number(e.target.value))
      }
    },
  },
};
</script>

<style lang="less" scoped>
.inputBoxs {
  vertical-align: top;
  display: inline-block;
  margin: 0px 6px 6px 0px;
  background-color: #fff;
  & .inputSty {
    outline: none;
    padding: 6px 10px;
    border-radius: 6px;
    color: #606266;
    border: 1px solid #dcdfe6;
    transition: all 0.3s;
    &:focus {
      border-color: #409eff;
    }
  }
  & .errSty {
    border-color: #f56c6c !important;
    &::placeholder {
      color: #f56c6c;
    }
  }
  & .labelSty {
    color: #f56c6c;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
  }
}
</style>
