<template>
    <div class="flex items-center">
        <template v-if="isText">
            <ele-text>{{ inputValue || '-' }}</ele-text>
            <ele-text v-if="suffixStr" class="ml-1">{{ suffixStr }}</ele-text>
        </template>

        <el-input
            v-else
            ref="inputRef"
            v-bind="$attrs"
            v-model="inputValue"
            @input="handleInput"
            style="max-width: 200px"
        >
            <template #append v-if="suffixStr">{{ suffixStr }}</template>
        </el-input>
        <el-button
            type="success"
            plain
            link
            class="ml-10"
            @click="handleModify"
        >
            {{ isText ? '[修改]' : '[确定]' }}
        </el-button>
    </div>
</template>

<script setup>
    const props = defineProps({
        modelValue: {
            type: [String, Number]
        },
        suffixStr: {
            type: String,
            default: ''
        }
    });
    const inputValue = ref(props.modelValue);
    watch(
        () => props.modelValue,
        () => {
            inputValue.value = props.modelValue;
        },
        { immediate: true }
    );

    const emit = defineEmits(['update:modelValue', 'toggle']);
    const inputRef = ref(null);
    function handleInput(val) {
        console.log(val, 'input');
        emit('update:modelValue', val);
    }

    const isText = ref(true);
    function handleModify() {
        isText.value = !isText.value;
        if (!isText.value) {
            inputValue.value = props.modelValue;
            inputRef.value?.focus();
        }
    }
</script>
