<template>
<el-form-item :prop="prop" :label="label" :label-width="options.labelWidth" :rules="rules">
<glp-number v-model="value" style="width: 100%; min-height: 33px;" v-bind="props">
  <template v-slot:prepend v-if="options.prepend">{{options.prepend}}</template>
  <template v-slot:append v-if="options.append">{{options.append}}</template>
</glp-number>
</el-form-item>
</template>

<script lang="ts">

import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { FormDef, FormOptions, NumberDef, NumberOptions } from '../../type'
import FieldMixins from './FieldMixins'

@Component
export default class NumberControl extends mixins(FieldMixins) {
  get options () {
    return Object.assign(new NumberOptions(), this.def?.options)
  }

  get props () {
    return {
      disabled: this.disabled,
      placeholder: this.options?.placeholder || `请选择${this.def?.label}`,
      max: this.options?.max,
      min: this.options?.min,
      precision: this.options?.precision,
      unit: this.options?.unit
    }
  }
}
</script>
