<template>
  <v-textarea
    v-model="localValue"
    :label="opcoes?.rotulo"
    :placeholder="opcoes?.placeholder"
    :rows="opcoes?.linhas ?? 4"
    :counter="opcoes?.limiteCaracteres"
    :maxlength="opcoes?.limiteCaracteres"
    :clearable="Boolean(opcoes?.limpavel)"
    :error="Boolean(opcoes?.erro)"
    :error-messages="opcoes?.mensagensErro"
    :hint="opcoes?.dica"
    :persistent-hint="Boolean(opcoes?.dicaPersistente)"
    :density="opcoes?.densidade ?? 'comfortable'"
    :variant="opcoes?.variante ?? 'outlined'"
    auto-grow
    v-bind="attrs"
    @focus="() => emit('focus')"
    @blur="() => emit('blur')"
  />
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from "vue";
import { VTextarea } from "vuetify/components";
import type { PadroesEntradas } from "./tiposEntradas";

type EntradaParagrafo = PadroesEntradas["paragrafo"];

export default defineComponent({
  name: "EliEntradaParagrafo",
  components: { VTextarea },
  inheritAttrs: false,
  props: {
    value: {
      type: [String, null] as unknown as PropType<EntradaParagrafo["value"]>,
      default: undefined,
    },
    opcoes: {
      type: Object as PropType<EntradaParagrafo["opcoes"]>,
      required: true,
    },
  },
  emits: {
    "update:value": (_v: EntradaParagrafo["value"]) => true,
    input: (_v: EntradaParagrafo["value"]) => true,
    change: (_v: EntradaParagrafo["value"]) => true,
    focus: () => true,
    blur: () => true,
  },
  setup(props, { attrs, emit }) {
    const localValue = computed<EntradaParagrafo["value"]>({
      get: () => props.value,
      set: (v) => {
        emit("update:value", v);
        emit("input", v);
        emit("change", v);
      },
    });

    return { attrs, emit, localValue, opcoes: props.opcoes };
  },
});
</script>

<style scoped></style>