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

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>