NSG_PORTAL_V2/components/article/immerse/Survey.vue

<script setup lang="ts">
import { useSurveyStore } from "~/stores/survey";
import type { Survey } from "~/server/models/survey";

const props = defineProps<{ dataId?: string }>();

const store = reactive({
  survey: useSurveyStore(),
});

const { currentSurvey } = storeToRefs(store.survey);

const survey = reactive<Survey>({});

async function loadData() {
  await store.survey.fetchById(Number(props.dataId));

  assignData();
}

function assignData() {
  Object.assign(survey, currentSurvey.value);
}

onBeforeMount(async () => {
  await loadData();
});

const dataSurvey = {
        "articles": null,
        "questionGeneral": [
            {
                "answers": [
                    {
                        "id": 85,
                        "siteId": 1,
                        "surveyId": 10,
                        "questionId": 84,
                        "title": "Không",
                        "thumbnail": "",
                        "description": "",
                        "type": 1,
                        "isCorrect": false,
                        "order": 2,
                        "status": 6,
                        "createdBy": 3,
                        "createdOn": "2024-06-04T17:13:45.794056",
                        "updatedBy": null,
                        "updatedOn": null
                    },
                    {
                        "id": 84,
                        "siteId": 1,
                        "surveyId": 10,
                        "questionId": 84,
                        "title": "Có",
                        "thumbnail": "",
                        "description": "",
                        "type": 1,
                        "isCorrect": true,
                        "order": 1,
                        "status": 6,
                        "createdBy": 3,
                        "createdOn": "2024-06-04T17:13:45.794056",
                        "updatedBy": null,
                        "updatedOn": null
                    }
                ],
                "responses": null,
                "id": 84,
                "siteId": 1,
                "surveyId": 10,
                "title": "Bạn có chọn xe công nghệ để di chuyển trong giờ cao điểm không?",
                "thumbnail": "",
                "description": "",
                "type": 0,
                "order": 3,
                "status": 6,
                "createdBy": 3,
                "createdOn": "2024-06-04T17:13:45.794056",
                "updatedBy": null,
                "updatedOn": null
            },
            {
                "answers": [
                    {
                        "id": 83,
                        "siteId": 1,
                        "surveyId": 10,
                        "questionId": 83,
                        "title": "Xe bus",
                        "thumbnail": "",
                        "description": "",
                        "type": 1,
                        "isCorrect": false,
                        "order": 3,
                        "status": 6,
                        "createdBy": 3,
                        "createdOn": "2024-06-04T17:13:45.794056",
                        "updatedBy": null,
                        "updatedOn": null
                    },
                    {
                        "id": 82,
                        "siteId": 1,
                        "surveyId": 10,
                        "questionId": 83,
                        "title": "Xe đạp",
                        "thumbnail": "",
                        "description": "",
                        "type": 1,
                        "isCorrect": false,
                        "order": 2,
                        "status": 6,
                        "createdBy": 3,
                        "createdOn": "2024-06-04T17:13:45.794056",
                        "updatedBy": null,
                        "updatedOn": null
                    },
                    {
                        "id": 81,
                        "siteId": 1,
                        "surveyId": 10,
                        "questionId": 83,
                        "title": "Xe máy",
                        "thumbnail": "",
                        "description": "",
                        "type": 1,
                        "isCorrect": true,
                        "order": 1,
                        "status": 6,
                        "createdBy": 3,
                        "createdOn": "2024-06-04T17:13:45.794056",
                        "updatedBy": null,
                        "updatedOn": null
                    }
                ],
                "responses": null,
                "id": 83,
                "siteId": 1,
                "surveyId": 10,
                "title": "Bạn thường di chuyển bằng phương tiện gì?",
                "thumbnail": "",
                "description": "",
                "type": 1,
                "order": 2,
                "status": 6,
                "createdBy": 3,
                "createdOn": "2024-06-04T17:13:45.794056",
                "updatedBy": null,
                "updatedOn": null
            },
            {
                "answers": [
                    {
                        "id": 80,
                        "siteId": 1,
                        "surveyId": 10,
                        "questionId": 82,
                        "title": "21 lần trở lên",
                        "thumbnail": "",
                        "description": "",
                        "type": 1,
                        "isCorrect": false,
                        "order": 3,
                        "status": 6,
                        "createdBy": 3,
                        "createdOn": "2024-06-04T17:13:45.794056",
                        "updatedBy": null,
                        "updatedOn": null
                    },
                    {
                        "id": 79,
                        "siteId": 1,
                        "surveyId": 10,
                        "questionId": 82,
                        "title": "14 - 21 lần",
                        "thumbnail": "",
                        "description": "",
                        "type": 1,
                        "isCorrect": false,
                        "order": 0,
                        "status": 6,
                        "createdBy": 3,
                        "createdOn": "2024-06-04T17:13:45.794056",
                        "updatedBy": null,
                        "updatedOn": null
                    },
                    {
                        "id": 78,
                        "siteId": 1,
                        "surveyId": 10,
                        "questionId": 82,
                        "title": "7 lần",
                        "thumbnail": "",
                        "description": "",
                        "type": 1,
                        "isCorrect": true,
                        "order": 1,
                        "status": 6,
                        "createdBy": 3,
                        "createdOn": "2024-06-04T17:13:45.794056",
                        "updatedBy": null,
                        "updatedOn": null
                    }
                ],
                "responses": null,
                "id": 82,
                "siteId": 1,
                "surveyId": 10,
                "title": "Mỗi tuần bạn di chuyển với tần suất bao nhiêu lần?",
                "thumbnail": "",
                "description": "Mỗi tuần bạn di chuyển với tần suất bao nhiêu lần?",
                "type": 1,
                "order": 1,
                "status": 6,
                "createdBy": 3,
                "createdOn": "2024-06-04T17:13:45.794056",
                "updatedBy": null,
                "updatedOn": null
            }
        ],
        "responses": null,
        "id": 10,
        "siteId": 1,
        "title": "Thói quen di chuyển trong giờ cao điểm",
        "code": "thoi-quen-di-chuyen-trong-gio-cao-diem",
        "type": 0,
        "startTime": "2024-06-04T17:18:00",
        "endTime": "2024-06-20T00:00:00",
        "settings": {
            "participantType": 3,
            "resultPublication": 2
        },
        "features": "Feature",
        "taxonomy": "Biên tập",
        "keywords": "thoiquendichuyen;giocaodiem",
        "thumbnail": "https://resource.vpress.vn/resources/1/private/13cee27a2bd93915479f049378cffdd3/thoiquendichuyentronggiocaodiem-20240604100659862.png",
        "description": "Thói quen di chuyển trong giờ cao điểm",
        "order": 1,
        "status": 6,
        "createdBy": 3,
        "createdOn": "2024-06-04T17:13:45.653177",
        "updatedBy": null,
        "updatedOn": null
    };


const selectSurveyAnswer = ref<any>([])

dataSurvey.questionGeneral.forEach((question) => {
    switch (question.type) {
        case 0: 
            selectSurveyAnswer.value.push([])
            break;
        case 1: 
            selectSurveyAnswer.value.push(0)
            break;
        case 2: 
            selectSurveyAnswer.value.push([])
            break;
        
    }
})

async function submitSend() {

}
</script>

<template>

<div class="inline-block px-4 py-2 !text-black-500">
    <h5 class="underline decoration-gray-500 font-bold mb-2">Khảo sát: {{ dataSurvey?.title }}</h5>
    <ul class="px-3">
        <li v-for="(question, questionIndex) in dataSurvey.questionGeneral" :key="questionIndex" class="mb-2">
            <h5 class="text-#000 font-raleway font-italic text-16px font-500 leading-140% mb-2">{{ `${questionIndex + 1}. ${question.title}` }}</h5>

            <!-- <ul>
                <li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">
                    <input :id="`answer-survey-${questionIndex}-${answerIndex}`" :type="question.type === 1 ? 'radio' : 'checkbox'" :value="answerIndex" v-model="selectSurveyAnswer[questionIndex]">
                    <label :for="`answer-survey-${questionIndex}-${answerIndex}`" class="font-semibold">{{ answer.title }}</label>
                </li>
                
            </ul> -->

            <ul>
        <template v-if="question.type === 1">
          <li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">
            <input :id="`answer-survey-${questionIndex}-${answerIndex}`" type="radio" :value="answerIndex" class="peer opacity-0"  v-model="selectSurveyAnswer[questionIndex]" />
            <label :for="`answer-survey-${questionIndex}-${answerIndex}`" class="font-raleway text-16px relative  text-#000 font-400 leading-140% pl-16px before:content-[''] before:inline-block before:w-14px before:h-14px before:rounded-50% before:border-1 before:absolute before:left--3 before:top-10px before:border-1px before:border-#000 before:translate-y--50%   after:absolute after:left--10px after:top-10px after:translate-y--50% after:border-#000 after:content-[''] after:inline-block after:w-10px after:h-10px after:rounded-full peer-checked:after:bg-primary peer-checked:before:border-primary ">{{ answer.title }}</label>
          </li>
        </template>
        <template v-else>
          <li v-for="(answer, answerIndex) in question.answers" :key="answerIndex" class="flex items-center gap-1 py-1">
            <input :id="`answer-survey-${questionIndex}-${answerIndex}`" type="checkbox" :value="answerIndex" class="peer opacity-0"  v-model="selectSurveyAnswer[questionIndex]" />
            <label :for="`answer-survey-${questionIndex}-${answerIndex}`" class="font-raleway text-16px relative  text-#000 font-400 leading-140% pl-16px before:content-[''] before:inline-block before:w-14px before:h-14px before:rounded-2px before:border-1 before:absolute before:left--3 before:top-10px before:border-1px before:border-#000 before:translate-y--50%   after:absolute after:left--10px after:top-6px after:translate-y--50% after:border-#000 after:content-['✔'] after:text-12px after:text-transparent after:inline-block after:w-14px after:h-14px  peer-checked:after:text-white peer-checked:before:border-primary peer-checked:before:bg-primary ">{{ answer.title }}</label>
          </li>
        </template>
        </ul>
        </li>
    </ul>

    <div class="flex justify-center">
    <button @click="submitSend" class="mx-auto px-5 py-10px rounded-6px bg-primary text-#fff font-raleway text-14px font-400">Gửi câu trả lời</button>
    </div>
    <!-- <button @click="submitSend" class="bg-primary-500 text-white py-1 px-3 rounded-4px cursor-pointer hover:bg-primary-600 float-right">Gửi câu trả lời</button> -->
  </div>
</template>

<style lang="scss" scoped>
:root {
  --before-width: 0%;
}

</style>