<template>
  <a-input-number
    v-model:value="dataValue"
    :disabled="readonly || disabled"
    allowClear
    @change="dataValueChange"
    @click="dataValueClick"
    @blur="dataValueBlur"
    @focus="dataValueFocus"
    @input="dataValueInput"
    :max="props.record?.formItemNumber?.maxValue"
    :min="props.record?.formItemNumber?.minValue"
    style="width: 100%"
    :precision="props.record?.formItemNumber?.decimalPlaces"
    :placeholder="props.record?.placeholderContent || placeholder"
  ></a-input-number>
</template>

<script setup name="FormInputNumber">
import { ref, onMounted, watch } from 'vue';
import { isString } from '@/utils/common/util';

const props = defineProps({
  value: {
    type: [Number, String],
    default: null
  },
  //是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  record: {
    type: Object,
    default: {}
  },
  placeholder: {
    type: String,
    default: '请输入'
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  }
});

onMounted(() => {
  if (props.record?.formItemNumber?.defaultValue) {
    dataValue.value = props.record?.formItemNumber?.defaultValue;
  } else {
    dataValue.value = isString(props.value) ? Number(props.value) : props.value;
  }
  dataValueChange();
});

const emits = defineEmits(['update:value', 'onBlur', 'onClick', 'onChange', 'onFocus', 'onInput']);

// 选中的值
const dataValue = ref(null);

watch(
  () => props.value,
  val => {
    dataValue.value = isString(val) ? Number(val) : val;
  },
  { deep: true }
);

// 更改值
const dataValueChange = () => {
  emits('update:value', dataValue.value);
  emits('onChange', props.record);
};
// 点击
const dataValueClick = () => {
  emits('onClick', props.record);
};
// 失去焦点
const dataValueBlur = () => {
  emits('onBlur', props.record);
};
// 获取焦点
const dataValueFocus = () => {
  emits('onFocus', props.record);
};
// 输入
const dataValueInput = () => {
  emits('onInput', props.record);
};
</script>

<style></style>
