61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<template>
|
|
<div
|
|
class="flex flex-col justify-center items-start space-y-4 rounded-2xl px-4 sm:px-10 py-12 w-full max-w-2xl h-fit"
|
|
:class="{
|
|
'bg-surface text-white': data.id !== 'P1-F4-1' && data.id !== 'P1-F4-2',
|
|
'bg-[#82DBDF] text-surface': data.id === 'P1-F4-1' || data.id === 'P1-F4-2',
|
|
}">
|
|
<h1 class="text-3xl font-bold">
|
|
{{ data.title[langcode]}}
|
|
</h1>
|
|
<p class="text-sm" v-html="data.subtitle[langcode]"></p>
|
|
<button-CTA
|
|
color="accent"
|
|
class="ml-auto"
|
|
@click="$emit('next')"
|
|
>
|
|
{{ data.button[langcode] }}
|
|
</button-CTA>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
currentIndex: { type: Number, default: 0 },
|
|
total: { type: Number, default: 1 }
|
|
},
|
|
emits: ["next", "previous"],
|
|
data() {
|
|
return {
|
|
feedbackText: ""
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['langcode'])
|
|
},
|
|
mounted() {
|
|
this.generateFeedbackText();
|
|
},
|
|
methods: {
|
|
generateFeedbackText() {
|
|
const results = JSON.parse(localStorage.getItem('results'));
|
|
if (!results) {
|
|
this.feedbackText = "No hay resultados disponibles.";
|
|
return;
|
|
}
|
|
|
|
// Buscar el resultado correspondiente al bloque actual buscando en el array results donde algun objeto tenga el mismo sectionId que this.data.sectionId
|
|
const blockId = this.data.section.id;
|
|
const blockResult = results.find(r => r.sectionId === blockId);
|
|
this.feedbackText = blockResult ? blockResult.result : "No hay feedback disponible para este bloque.";
|
|
}
|
|
}
|
|
}
|
|
</script>
|