<template>
  <section class="stack">
    <h2>EliInput (campo)</h2>

    <div class="grid">
      <EliInput v-model="nome" label="Nome" placeholder="Digite seu nome" />
      <EliInput v-model="telefone" type="telefone" label="Telefone" />
      <EliInput v-model="documento" type="cpfCnpj" label="CPF / CNPJ" />

      <EliInput v-model="idade" type="numericoInteiro" label="Idade" />
      <EliInput v-model="valor" type="numericoMoeda" label="Valor" />
      <EliInput v-model="cep" type="cep" label="CEP" placeholder="00000-000" />

      <EliInput
        v-model="estado"
        type="select"
        label="Estado"
        multiple
        :options="[
          { label: 'São Paulo', value: 'SP' },
          { label: 'Rio de Janeiro', value: 'RJ' },
        ]"
      />

      <EliInput
        v-model="cor"
        type="radio"
        label="Cor favorita"
        :options="[
          { label: 'Azul', value: 'azul' },
          { label: 'Verde', value: 'verde' },
        ]"
      />

      <EliInput
        v-model="habilidades"
        type="checkbox"
        label="Habilidades"
        :options="[
          { label: 'Vue', value: 'vue' },
          { label: 'React', value: 'react' },
        ]"
      />
    </div>

    <pre class="debug">{{ debug }}</pre>
  </section>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from "vue";
import { EliInput } from "@/componentes/campo";

type Cor = "azul" | "verde" | null;
type Habilidade = "vue" | "react";

export default defineComponent({
  name: "CampoPlayground",
  components: { EliInput },
  setup() {
    const nome = ref("");
    const telefone = ref("");
    const documento = ref("");
    const idade = ref("");
    const valor = ref("");
    const cep = ref("");
    const estado = ref<string[]>([]);
    const cor = ref<Cor>(null);
    const habilidades = ref<Habilidade[]>([]);

    const debug = computed(() =>
      JSON.stringify(
        {
          nome: nome.value,
          telefone: telefone.value,
          documento: documento.value,
          idade: idade.value,
          valor: valor.value,
          cep: cep.value,
          estado: estado.value,
          cor: cor.value,
          habilidades: habilidades.value,
        },
        null,
        2
      )
    );

    return {
      nome,
      telefone,
      documento,
      idade,
      valor,
      cep,
      estado,
      cor,
      habilidades,
      debug,
    };
  },
});
</script>

<style scoped>
.stack {
  display: grid;
  gap: 16px;
}

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.debug {
  padding: 12px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  overflow: auto;
}
</style>
