<!-- 完整问卷 -->
<template>
    <div class="questionnaire">
        <!-- 问卷头部 -->
        <div class="questionnaire_head">
            <h1 class="head_title">{{ questionaireMsg?.assessmentTitle }}</h1>
            <p class="head_desc">{{ questionaireMsg?.assessmentIllustrate }}</p>
        </div>
        <QuestionnaireQuestionList 
            :questionaireData="questionaireMsg.questionData" 
            v-model:questionListRef="questionListRef" 
            @formListAnswerChange="HandleFormListAnswerChange"/>
    </div>
</template>   



<script setup lang="ts">
import QuestionnaireQuestionList from '@/components/QuestionnaireQuestionList.vue';
const props = defineProps({
    questionaireMsg:{
        type:Object,
        required:true
    }

})
const emit = defineEmits(['questionnaireAnswerChange'])
const questionListRef = defineModel('questionListRef')



const HandleFormListAnswerChange = (val)=>{
    emit('questionnaireAnswerChange',val)
}

</script>


<style lang="scss" scoped>
.questionnaire{
    padding:20px 0;
    /* --- 头部样式 --- */
    .questionnaire_head {
        text-align: center;
        margin-bottom: 30px;

        .head_title {
            font-size: 24px;
            line-height: 34px;
            font-weight: bold;
            color: #000;
            margin-bottom: 10px;
        }

        .head_desc {
            font-size: 14px;
            color: #999999;
            line-height: 1.6;
            margin: 0;
            padding:0 60px;
        }
    }
}


</style>