<template>
  <el-col :xl="span" :lg="lgSpan" :md="mdSpan" :sm="smSpan" :xs="xsSpan">
    <el-form-item class="number" :label="label"
                  :rules="[...requireRule(!disabled &&required, label, validate,trigger), ...rules]" :prop="prop"
                  :label-width="labelWidth">
      <el-input-number v-model="$parent.model[prop]"
                       @change="handleChange"
                       @input="handleInput"
                       :placeholder="placeholder ||('请输入') "
                       :clearable="clearable" :disabled="disabled" :size="size" :min="min" :max="max"
                       :precision="precision" :controls="controls"

                       :style="{width}"
                       :data-unit="dataUnit"
                       class="my-el-input-number"

      >

      </el-input-number>
      <!--      <span class="el-input-group__append">{{dataUnit}}</span>-->


    </el-form-item>
  </el-col>
</template>

<script>
import mixin from '../../mixin'

/**
 * 数字输入框组件
 */
export default {
  name:"CustomInputNumber",
  mixins: [mixin],
  props: {
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 999999999999.99
    },
    precision: {
      type: Number,
      default: 2
    },
    labelWidth: {
      type: String
    },
    append: {
      type: String
    },
    size: {
      type: String
    },
    span: {
      type: Number,
      default: 6
    },
    dataUnit: {
      type: String,
      default: '',
    },
    controls: {
      type: Boolean,
      default: false,
    },
    validate: {
      type: String
    },
    trigger: {
      type: String,
      default: 'blur'
    },
    rules: {
      type: Array,
      default: () => []
    },

    lgSpan: {
      type: Number,
      default: 8
    },
    mdSpan: {
      type: Number,
      default: 8
    },
    smSpan: {
      type: Number,
      default: 12
    },
    xsSpan: {
      type: Number,
      default: 24
    }

  },
  methods: {
    handleChange(currentValue, oldValue) {
      this.$emit('change', currentValue)
      this.$emit('changeNum', currentValue)
    },
    handleInput(val) {
      this.$emit('change', val)
    },
  }
}
</script>

<style scoped>
.suffix {
  font-size: 14px;
  color: #ff6600;
  line-height: 20px;
  padding-left: 20px;
}

/deep/ .el-input-number .el-input__inner {
  text-align: left;
}

.my-el-input-number[data-unit] {
  --el-input-number-unit-offset-x: 35px;
  position: relative;
}

.my-el-input-number[data-unit]::after {
  content: attr(data-unit);
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: -25%;
  color: #999999;
}

.my-el-input-number[data-unit] .el-input__inner {
  padding-left: 30px;
  padding-right: calc(var(--el-input-number-unit-offset-x) + 12px);
}

.el-input-group__append, .el-input-group__prepend {
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  width: 1px;
  white-space: nowrap;
}


</style>
