<template>
  <div class="input-number-range">
    <el-input
      style="flex: 1"
      v-model="begin"
      @input="val => (begin = val.replace(/\D/g, ''))"
      @blur="begin = Number(begin) > 100 ? '100' : begin"
    />
    <span style="margin: 0 5px">-</span>
    <el-input
      style="flex: 1"
      v-model="end"
      @input="val => (end = val.replace(/\D/g, ''))"
      @blur="end = Number(end) > 100 ? '100' : end"
    />
  </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps, computed } from "vue";

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(["update:modelValue"]);

const begin = computed<string | undefined>({
  get() {
    return props.modelValue?.[0] as string;
  },
  set(val) {
    const result = props.modelValue ? [...props.modelValue] : [];
    result[0] = val || undefined;
    emit("update:modelValue", result);
  }
});
const end = computed<string | undefined>({
  get() {
    return props.modelValue?.[1] as string;
  },
  set(val) {
    const result = props.modelValue ? [...props.modelValue] : [];
    result[1] = val || undefined;
    emit("update:modelValue", result);
  }
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
