<template>
  <div class="flex">
    <InputNumber
      placeholder="最小值"
      :disabled="$props.disabled"
      :value="getValue.min!"
      style="width: 38%"
      @change="(value) => emitChange(value, 'min')"
    />
    <span style="width: 8px"></span>
    <span>~</span>
    <span style="width: 8px"></span>
    <InputNumber
      placeholder="最大值"
      :disabled="$props.disabled"
      :value="getValue.max!"
      style="width: 38%"
      @change="(value) => emitChange(value, 'max')"
    />
  </div>
</template>
<script lang="ts">
  export default {
    inheritAttrs: false,
  };
</script>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { InputNumber } from 'ant-design-vue';

  const emit = defineEmits(['change', 'update:value']);
  const props = withDefaults(
    defineProps<{
      value?: {
        min: Nullable<number>;
        max: Nullable<number>;
      };
      disabled: boolean;
    }>(),
    {
      value: () => ({ min: null, max: null }),
    }
  );

  const getValue = computed(() => {
    const { value } = props;
    return value;
  });

  function emitChange(value: number, key: 'min' | 'max') {
    const _value = { ...props.value, [key]: value };
    emit('update:value', _value);
  }
</script>
<style scoped></style>
