<template>
    <div ref="textRef" class="input text" :class="{ suffix: $slots.icon || maxlength, disabled, right, 'pre-suffix': $slots.preIcon }" @click="emit('click')">
        <template v-if="type === 'password'">
            <div class="is-hidden">
                <input type="text" class="is-hidden" />
                <input type="password" autocomplete="off" class="is-hidden" />
            </div>
        </template>

        <span v-if="$slots.preIcon" class="pre-icon">
            <slot name="preIcon" />
        </span>
        <input
            ref="inputRef"
            class="ui-text"
            :class="{ icon: $slots.icon }"
            :type="type"
            :value="modelValue"
            autocomplete="off"
            :placeholder="placeholder"
            :readonly="readonly"
            :maxlength="maxlength"
            v-bind="other"
            @input="inputHandler"
            @focus="emit('focus')"
            @blur="emit('blur')"
        />
        <span v-if="$slots.icon || props.maxlength" class="retouch">
            <slot name="icon" />
            <span v-if="props.maxlength" class="len">
                <span>{{ modelValue?.length }}</span> / {{ maxlength }}
            </span>
        </span>
        <slot />
    </div>
</template>

<script setup lang="ts">
import { defineEmits, defineExpose, defineProps, ref } from 'vue'
import { textInputProps } from './text'
const props = defineProps(textInputProps)
const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'click'])
// const test = () => {
//   emit('focus');
// };
const textRef = ref(null)
const inputRef = ref(null)

const inputHandler = (ev: any) => {
    // debugger;
    emit('update:modelValue', ev.target.value)
    // nextTick(() => {
    //     if (ev.target.value !== props.modelValue.toString()) {
    //         ev.target.value = props.modelValue.toString()
    //     }
    // })
}

defineExpose({
    root: textRef,
    input: inputRef,
})
</script>
