<template>
  <div class="inputnumber-prop">
    <FormItem label="占位提示">
      <Input v-model="info.form.placeholder" placeholder="请输入占位提示"></Input>
    </FormItem>
    <FormItem label="最小值">
      <InputNumber v-model="info.form.min" controls-outside placeholder="最小值"></InputNumber>
    </FormItem>
    <FormItem label="最大值">
      <InputNumber v-model="info.form.max" controls-outside placeholder="最大值"></InputNumber>
    </FormItem>
    <FormItem label="步长">
      <InputNumber
        v-model="info.form.step"
        :min="0"
        controls-outside
        placeholder="步长"></InputNumber>
    </FormItem>
    <FormItem label="精度">
      <InputNumber
        v-model="info.form.precision"
        :min="0"
        controls-outside
        placeholder="精度"></InputNumber>
    </FormItem>
    <FormItem label="按钮位置">
      <RadioGroup v-model="info.form.controlsOutside" type="button" button-style="solid">
        <Radio label="">默认</Radio>
        <Radio :label="1">按钮</Radio>
      </RadioGroup>
    </FormItem>
  </div>
</template>

<script>
const DEFAULT_LIST = [
  { key: 'min', default: -100 },
  { key: 'max', default: 100 },
  { key: 'step', default: 1 },
  { key: 'precision', default: 0 },
]

export default {
  name: 'InputnumberProp',
  props: {
    info: {
      type: Object,
      default() {
        return {
          form: {
            options: [],
          },
        }
      },
    },
  },
  watch: {
    'info.name': {
      handler() {
        const { form } = this.info
        if (Object.keys(form).length !== 1) { return }
        for (const val of DEFAULT_LIST) {
          if (!form[val.key] && form[val.key] !== 0) {
            this.$set(form, val.key, val.default)
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>