<template>
    <div ref="textRef" class="input textarea" :class="{ suffix: $slots.icon || maxlength, disabled, right }">
        {{ modelValue }}
        <textarea
            ref="inputRef"
            class="ui-text"
            :value="modelValue"
            :placeholder="props.placeholder"
            :readonly="readonly"
            :maxlength="props.maxlength"
            v-bind="other"
            @input="inputHandler"
            @click="emit('click')"
            @focus="emit('focus')"
            @blur="emit('blur')"
        />
        <span class="replace" />
        <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>
    </div>
</template>

<script setup lang="ts">
import { defineEmits, defineExpose, defineProps, nextTick, ref } from 'vue'
import { textareaProps } from './textarea'
const props = defineProps(textareaProps)

console.log(props)
const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'click'])
const textRef = ref(null)
const inputRef = ref(null)

const inputHandler = ev => {
    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>
