<!-- 问卷的 试题列表 -->
<template>
    <ul class="question_list" ref="questionListRef">
        <li
            :id="item.id"
            v-for="(item, index) in questionaireData"
            :key="item.id"
            class="question_card">
            <!-- 题目行 -->
            <QuestionTitleComponent :titleIndex="index" :titleMsg="item"/>
            <!-- 题目内容区域 -->
            <div class="question_body">
                <QuestionTypeShow 
                    deviceType="app"
                    :allowEdit="allowEdit"
                    :isHorizontal="item.extraConfig.includes('isHorizontal')"
                    :questionType="Number(item.questionType)"
                    :questionSubOptions="item.options"
                    :evaluationType="Number(item.questionAnswerClass)"
                    :questionScore="Number(item.questionScore)"
                    @formChange="(val)=>HandleFormChange(val,item)"
                    :defaultQuestionVal="item.answer"
                ></QuestionTypeShow>
            </div>
        </li>
    </ul>
</template>


<script setup lang="ts">
import {ref} from 'vue'

import QuestionTypeShow from '@/components/QuestionTypeShow.vue';
import QuestionTitleComponent from './QuestionTitleComponent.vue';

interface QuestionOpt {
    content: string,  //选项名称
    score: Number|String,   //选项分数
    id: string
}

interface QuestionMsg {
    id:string,
    extraConfig:string[],    // 是否必答 required, 是否横排 isHorizontal
    options:QuestionOpt[],   //单选、多选的选项配置
    answer:string | [] | undefined | null,     //问题答案
    questionTitleName:string,   //问题名称
    questionType:number,    //问题类型 单选 0   评分单选 3  多选 1  评分题 5  问答题  2
    questionAnswerType:number,    // 是否必答，0-否，1-是
    questionSortRole:number,   // 0-竖排，1-横排
    questionScore:string,  //问题满分
    questionAnswerClass?:string,  // 评分题 的 分值展示形式  0数字式 1星星式
    answerData?:[],    //同options
}

const props = defineProps({
    questionaireData:{
        type:Object as ()=>QuestionMsg[],
        required:true
    }, 
    allowEdit:{    //是否允许编辑
        type:Boolean,
        default:true
    }
})

const emit = defineEmits(['formListAnswerChange'])

const questionListRef = defineModel('questionListRef')

const formQuestionAnswerList = ref<Record<string, any>>({})
const HandleFormChange = (val:any,questionItm:QuestionMsg)=>{
    const {questionType,id:keyId,questionScore, } = questionItm
    // 最终返回的表单项的数据结构
    switch(Number(questionType)){
        case 0:   //单选
            formQuestionAnswerList.value[keyId] = {
                questionId: keyId,
                answerCode: val,
                studentAnswer: "",
                studentQuestionScore: '',
                studentAnswerScore: ''
            }
            break;
        case 1:   //多选
            formQuestionAnswerList.value[keyId] = {
                questionId: keyId,
                answerCode: val.join('|'),
                studentAnswer: "",
                studentQuestionScore: '',
                studentAnswerScore: ''
            }
            break;
        case 2:   //问答
            formQuestionAnswerList.value[keyId] = {
                questionId: keyId,
                answerCode: '',
                studentAnswer: val,
                studentQuestionScore: '',
                studentAnswerScore: ''
            }
            break;
        case 3:   //评分单选
            formQuestionAnswerList.value[keyId] = {
                questionId: keyId,
                answerCode: val,
                studentAnswer: '',
                studentQuestionScore: '',
                studentAnswerScore: '',
                answerScore:questionItm.options.find(opt=>{
                    return opt.questionSortCode == val
                })?.score,
            }
            break;
        case 5:   //评分题
            formQuestionAnswerList.value[keyId] = {
                questionId: keyId,
                answerCode: '',
                studentAnswer: '',
                studentQuestionScore: questionScore,
                studentAnswerScore: val
            }
            break;
    }
    emit('formListAnswerChange',formQuestionAnswerList.value)
}
</script>



<style lang="scss" scoped>

 .question_list{
    display: flex;
    flex-direction: column;
    gap:calc(32 * var(--app-rpx));

    /* --- 题目卡片样式 --- */
    .question_card {
        :deep(.question_header){
            font-size:calc(16 * var(--app-rpx));
            margin-bottom:calc(16 * var(--app-rpx));
            .q_title {
                &.required_mark {
                    padding-right:calc(6 * var(--app-rpx));
                    &::after{
                        width: calc(5 * var(--app-rpx));
                        margin-left: calc(2 * var(--app-rpx));
                        font-size: calc(16 * var(--app-rpx));
                    }
                }
            }
            .q_type_tag {
                font-size:calc(16 * var(--app-rpx));
                margin-left: calc(8 * var(--app-rpx));
            }
        }

        .question_body{
            :deep(.el-checkbox-group),
            :deep(.el-radio-group){
                gap: calc(5 * var(--app-rpx)) calc(15 * var(--app-rpx));
            }

            :deep(.el-checkbox-group.vertical),
            :deep(.el-radio-group.vertical){
                gap:calc(5 * var(--app-rpx));
            }

            :deep(.el-checkbox-group),
            :deep(.el-radio-group){
                .el-radio,
                .el-checkbox{
                    .el-radio__input,
                    .el-checkbox__input{
                        height:calc(22 * var(--app-rpx));
                        .el-radio__inner,
                        .el-checkbox__inner{
                            width: calc(14 * var(--app-rpx));
                            height: calc(14 * var(--app-rpx));
                        }
                        .el-radio__inner::after{
                            width:calc(4 * var(--app-rpx));
                            height:calc(4 * var(--app-rpx));
                        }
                        .el-checkbox__inner::after{
                            height:calc(7 * var(--app-rpx));
                            left:calc(4 * var(--app-rpx));
                            top:calc(1 * var(--app-rpx));
                            width:calc(3 * var(--app-rpx));
                            border-width: calc(1 * var(--app-rpx));;
                        }
                    }
                    .el-radio__label,
                    .el-checkbox__label{
                        line-height:calc(22 * var(--app-rpx));
                        font-size: calc(16 * var(--app-rpx));
                    }
                }
            }

            :deep(.el-textarea){
                font-size:calc(16 * var(--app-rpx));
            }

            :deep(.num_list_score){
                gap:calc(16 * var(--app-rpx));
                font-size:calc(16 * var(--app-rpx));
                li{
                    border-radius:calc(4 * var(--app-rpx));
                    border: calc(1 * var(--app-rpx)) solid #CCCCCC;
                    width: calc(54 * var(--app-rpx));
                    height:calc(32 * var(--app-rpx));

                }
            }
        }
    }
}
</style>