<template>
    <div class="input-number-range flex items-center">
        <el-input-number
            v-model="form.minValue"
            class="flex-1"
            :placeholder="label + '最小'"
            :controls="false"
            :max="form.maxValue"
            v-bind="minAttrs"
            @change="handleNumberChange"
        />
        <ele-text>{{ separator }}</ele-text>
        <el-input-number
            v-model="form.maxValue"
            class="flex-1"
            :placeholder="label + '最大'"
            :controls="false"
            :min="form.minValue"
            v-bind="maxAttrs"
            @change="handleNumberChange"
        />
    </div>
</template>

<script setup>
    import { reactive, watch } from 'vue';

    const emit = defineEmits(['update:modelValue', 'change']);

    const props = defineProps({
        modelValue: {
            type: Array,
            default: () => []
        },
        separator: {
            type: String,
            default: '到'
        },
        minAttrs: {
            type: Object,
            default: () => ({})
        },
        maxAttrs: {
            type: Object,
            default: () => ({})
        },
        label: {
            type: String,
            default: ''
        }
    });

    const form = reactive({
        minValue: props.modelValue[0] || void 0,
        maxValue: props.modelValue[1] || void 0
    });

    // 监听 modelValue 的变化，同步更新内部状态
    watch(
        () => props.modelValue,
        (newValue) => {
            form.minValue = newValue?.[0] || void 0;
            form.maxValue = newValue?.[1] || void 0;
        },
        { deep: true }
    );

    function handleNumberChange() {
        emit('update:modelValue', [form.minValue, form.maxValue]);
        emit('change', {
            value: [form.minValue, form.maxValue],
            min: form.minValue,
            max: form.maxValue
        });
    }
</script>

<style lang="scss">
    .input-number-range {
        border: 1px solid #d9d9d9;
        border-radius: 6px;
        .el-input-number .el-input__inner {
            text-align: left;
        }
        .el-input-number .el-input .el-input__wrapper.is-focus,
        .el-input-number .el-input .el-input__wrapper {
            border: none !important;
            box-shadow: none !important;
            padding-right: 10px;
        }
    }
</style>
