asistente/components/SliceQuestion.vue

<template>
  <div class="space-y-3">
    <div class=" bg-surface text-white rounded-2xl px-8 py-4 border-b-5 border-[#8444BD]">
      <h2 class="text-sm ">{{ data.section.title[langcode] }}</h2>
    </div>
    <form @submit.prevent="handleSubmit" class="bg-surface text-white rounded-2xl px-4 sm:px-10 py-12">
      <div class="flex flex-col gap-4 ">
        <!-- Cabecera de sección -->
        <!-- <div class="flex gap-2">
          <img src="../public/icono-bravioo.svg" alt="logo-bravio" class="h-6 w-6 object-cover" />
          <div class="flex flex-col gap-1">
            <h2 class="text-xl font-semibold">{{ data.section.title[langcode] }}</h2>
            <p v-if="data.section.description[langcode]" class="text-muted text-xs">
              {{ data.section.description[langcode] }}
            </p>
          </div>
        </div> -->
        
        <!-- Título de pregunta -->
        <div v-if="data.question" class="flex gap-2">
          <img src="../public/icono-bravioo.svg" alt="logo-bravio" class="h-6 w-6 object-cover" />
          <h3 class="text-base font-semibold">{{ data.question.title[langcode] }}</h3>
        </div>
        <p v-if="data.question.description[langcode]" class="text-muted text-xs">
          {{ data.question.description[langcode] }}
        </p>
      </div>

      <!-- Render dinámico de inputs -->
      <div class="space-y-4 mt-4">
        <div
          v-for="(input, idx) in data.inputs"
          :key="idx"
          class="flex flex-col gap-2"
        >
          <!-- <label class="font-medium text-sm">{{ input.label[langcode] }}</label> -->

          <component
            :is="resolveComponent(input.type)"
            :key="data.id + '-' + input.label[langcode] + '-' + idx"
            v-bind="input"
            :required="input.required || false"
            @input-value="updateValue($event)"
          />
        </div>
      </div>

      <!-- Botones navegación -->
      <div class="flex justify-end gap-4 mt-6">
        <!-- <button-CTA color="transparent" @click="$emit('previous')">Atrás</button-CTA> -->
        <button-CTA
          color="accent"
          :disabled="!isValid"
          @click="$emit('next', values)"
        >
          Continuar
        </button-CTA>
      </div>
    </form>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
import InputText from "@/components/InputText.vue"
import InputEmail from "@/components/InputEmail.vue"
import InputTextarea from "@/components/InputTextarea.vue"
import SelectMenu from "@/components/SelectMenu.vue"
import InputCheckbox from "@/components/InputCheckbox.vue"
import InputRadio from "@/components/InputRadio.vue"
import InputAttach from "@/components/InputAttach.vue"
import InputTelephone from "@/components/InputTelephone.vue"
import InputUrl from "@/components/InputUrl.vue"
import RangeInputs from "@/components/RangeInputs.vue"

export default {
  components: {
    InputText,
    InputEmail,
    InputTextarea,
    SelectMenu,
    InputCheckbox,
    InputRadio,
    InputAttach,
    InputTelephone,
    InputUrl,
    RangeInputs
  },

  props: {
    data: { type: Object, required: true },
    currentIndex: { type: Number, default: 0 },
    total: { type: Number, default: 1 }
  },

  emits: ["next", "previous", "answer"],

  data() {
    return {
      values: {}, // aquí se guardan los valores de todos los inputs
    }
  },

  computed: {
    ...mapGetters(["langcode"]),
    isValid() {
      const totalInputs = this.data.inputs.length
      //console.log("totalInputs -----------", totalInputs, this.values)
      if (totalInputs === 1) {
        // Si solo hay un input, comprobar que values solo tiene un valor
        const isNotEmpty = this.values !== null &&
          typeof this.values === "object" &&
          !Array.isArray(this.values) &&
          Object.keys(this.values).length > 0
        //console.log("isValid 1 Input -----------", isNotEmpty)
        return isNotEmpty
      } else if (totalInputs > 1) {
        // Si hay múltiples inputs, comprobar que values existen dentro de data.inputs
        const filled = Object.values(this.values).length
        //console.log("isValid Varios Inputs -----------", { totalInputs, filled })
        return filled === totalInputs
      }
      return false
    },
  },

  methods: {
    resolveComponent(type) {
      switch (type) {
        case "text": return "InputText"
        case "email": return "InputEmail"
        case "textarea": return "InputTextarea"
        case "select": return "SelectMenu"
        case "checkbox": return "InputCheckbox"
        case "radio": return "InputRadio"
        case "file": return "InputAttach"
        case "telephone": return "InputTelephone"
        case "url": return "InputUrl"
        case "range": return "RangeInputs"
        default: return "InputText"
      }
    },

    updateValue(value) {
      //console.log("updateValue recibido →", value)
      // Si el valor es un objeto pero no tiene id, lo mergeamos directamente
      if (value && typeof value === "object") {
        this.values = { ...this.values, ...value }
      } 
      // Si es un valor simple, lo guardamos en una key genérica o incremental
      else if (typeof value !== "object") {
        // Lo agregamos al objeto values con una key genérica
        const key = Object.keys(this.values).length + 1
        this.values = { ...this.values, [key]: value }
      }

      //console.log("updateValue →", this.values)
    },

    handleSubmit() {
      this.$emit("answer", {
        id: this.data.id,
        value: this.values
      })
      this.$emit("next", this.values)
      this.values = {} // resetear valores después de enviar
    }
  }
}
</script>