student-assessment/src/views/questionnaireCommit/QuestionnaireCommit.vue

<template>
    <div class="main_container">
        <div class="page_item top_header">
            <el-button style="margin-right: 92px;" class="button_default_background" @click="router.go(-1)">
                <el-icon class="img"><ArrowLeftBold /></el-icon>
                返回
            </el-button>

                <!-- 待完善 -->
                <!-- 如该任务勾选了所有单科统一模板后，则会出现"整卷填写”和“按题填写”的页面，默认按照整卷填写 -->
                <TabSearch tabType="box" 
                    :disabled="QuestionnaireModeDisabled"
                    :defaultTabKey="defaultQuestionnaireMode" :tabList="[
                    {
                        label:'整卷填写',
                        key:'full',
                    },
                    {
                        label:'按题填写',
                        key:'split',
                    }]" 
                    @tabChange="HandleQuestionnaireModeChange"
                />

                <div class="info_tip">
                    <span class="process_tip">总进度：{{ questionnaireProgress }}</span>
                    <span class="time_tip">
                        <img :src="redTimeIcon" alt="">
                        剩余时间：{{ deadlineCountDown?.day + '天' + deadlineCountDown?.hours + '时' + deadlineCountDown?.minutes + '分'  }}</span>
                </div>
        </div>

        <div class="page_jg_20"> </div>

        <div class="center_content">
            <!-- 左侧 教师问卷列表 -->
            <div class="page_item  left_teacher_nav">
                <div class="page_search">
                    <div class="search_content">
                        <div class="content_left">
                            <div class="grade_title" style="color: #000;">授课老师</div>
                        </div>
                    </div>
                </div>

                <ul class="teacher_list">
                    <li v-for="(teacher,index) in teacherList" :key="teacher.id" 
                        :class="['teacher_card',{active:currentActiveTeacherIndex === index},
                                {disabled:IsSubjectQuestionnaireUnFinish(teacher.evaluationStatus)}]" 
                        @click="IsSubjectQuestionnaireUnFinish(teacher.evaluationStatus) ? '' : HandleSubjectTeacherChange(index,teacher)">
                        <div class="teacher_tag" :style="{backgroundColor:subjectToColor(teacher.evaluationSubjectName)?.color}">
                            {{ teacher.evaluationSubjectName }}
                        </div>
                        <div class="info_text">
                            <div class="teacher_name">{{ teacher.teacherName }}</div>
                            <div class="status" 
                                :style="{color:fillOutStatusToColor(teacher.evaluationStatus)?.color}"
                            >{{ fillOutStatusToColor(teacher.evaluationStatus)?.label }}</div>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- 中间 问卷内容 -->
             <div  class="center_questionnaire">
                <!-- 问卷头部 -->
                <div class="questionnaire_head">
                    <h1 class="head_title">{{ questionaireMsg?.assessmentTitle }}</h1>
                    <p class="head_desc">{{ questionaireMsg?.assessmentIllustrate }}</p>
                </div>

                <!-- 整卷填写问卷内容 -->
                <template v-if="defaultQuestionnaireMode == 'full'">
                    <QuestionnaireQuestionList 
                        :allowEdit="!isCurrentQuestionnaireTaskFinish"
                        :questionaireData="questionaireMsg.questionData" 
                        v-model:questionListRef="questionListRef" 
                        @formListAnswerChange="HandleQuestionnaireFormChange"/>
                    <div class="operation">
                        <el-button :class="[isCurrentQuestionnaireTaskFinish ? 'is-disabled' :  'button_background']" 
                            @click="isCurrentQuestionnaireTaskFinish ? '' : HandleFinishReview()">评价完成</el-button>
                    </div>
                </template>


                <!-- 按题填写问卷内容 -->
                 <template v-if="defaultQuestionnaireMode == 'split'" >
                    <!-- 单选 0-->
                    <SingleSelectQuestionBatchFill
                        v-if="currentEditQuestion.questionType === 0" 
                        v-model:isFinishEdit="isQuestionEdit" 
                        :titleIndex="currentSelectedQuestionIndex" 
                        :titleMsg="currentEditQuestion" 
                        @questionAnswerChange="HandleQuestionAnswerChange"
                        :allowEdit="!isCurrentQuestionnaireTaskFinish"
                        :customTableColumns="questionTableColumns"
                        :defaultTableData="questionTableData"
                    />
                    <!-- 多选 1 -->
                    <BatchSelectQuestionBatchFill 
                        v-if="currentEditQuestion.questionType === 1"  
                        v-model:isFinishEdit="isQuestionEdit" 
                        :titleIndex="currentSelectedQuestionIndex" 
                        :titleMsg="currentEditQuestion" 
                        @questionAnswerChange="HandleQuestionAnswerChange"
                        :allowEdit="!isCurrentQuestionnaireTaskFinish"
                        :customTableColumns="questionTableColumns"
                        :defaultTableData="questionTableData"
                    />

                    <!-- 评分题 5-->
                     <template v-if="currentEditQuestion.questionType === 5" >
                        <!-- 数字评分  -->
                        <ScoreQuestionBatchFill     
                            v-if="currentEditQuestion.evaluationType === 0"
                            v-model:isFinishEdit="isQuestionEdit" 
                            :titleIndex="currentSelectedQuestionIndex" 
                            :titleMsg="currentEditQuestion"
                            @questionAnswerChange="HandleQuestionAnswerChange"
                            :allowEdit="!isCurrentQuestionnaireTaskFinish"
                        />

                        <!-- 星星评分 -->
                        <StarRationQuestionBatchFill 
                            v-if="currentEditQuestion.evaluationType === 1"
                            v-model:isFinishEdit="isQuestionEdit" 
                            :titleIndex="currentSelectedQuestionIndex" 
                            :titleMsg="currentEditQuestion"
                            :allowEdit="!isCurrentQuestionnaireTaskFinish"
                            @questionAnswerChange="HandleQuestionAnswerChange"
                        />
                     </template>

                     <!-- 问答题  2-->
                    <QuestionAndAnswerBatchFill
                        v-if="currentEditQuestion.questionType === 2"
                        v-model:isFinishEdit="isQuestionEdit" 
                        :titleIndex="currentSelectedQuestionIndex" 
                        :titleMsg="currentEditQuestion"
                        :allowEdit="!isCurrentQuestionnaireTaskFinish"
                        @questionAnswerChange="HandleQuestionAnswerChange"
                    />
                   

                    <!-- 下一题  能否点击 —— 只针对必填项   需要变量判断 ———— 待完善--- -->
                    <div class="operation">
                        <el-button :class="[isQuestionEdit ? 'button_background' : 'is-disabled']"  
                            @click="isQuestionEdit ? HandleFinishCurrentQuestion() : ''">
                            {{(currentSelectedQuestionIndex + 1) < questionaireMsg.questionData?.length ? '下一题' : '提交'}}
                        </el-button>
                    </div>
                </template>
             </div>
           
            <!-- 右侧 问卷题目列表  -->
            <div class="page_item right_title_nav">
                <div class="page_search">
                    <div class="search_content">
                        <div class="content_left">
                            <div class="grade_title">问卷目录</div>
                        </div>
                    </div>
                </div>
                <ul class="question_list_brief">
                    <li  v-for="(question,index) in questionaireMsg.questionData" :key="question.id">
                        <span @click="defaultQuestionnaireMode=='full' ? 
                                        ScrollToItem(question.id) : 
                                        (IsSplitQuestionnaireUnFinish(question.status) ? '' :  HandleChangeQuestion(index,question)) " 
                            :title="question.questionTitleName" 
                            class="one_line_ellipsis" 
                            :class="[{active:defaultQuestionnaireMode=='split' && currentSelectedQuestionIndex == index,
                                    disabled:defaultQuestionnaireMode=='split' && IsSplitQuestionnaireUnFinish(question.status)}]">
                            {{ index + 1 }}.{{ question.questionTitleName }}
                        </span>
                        <!-- <img v-if="defaultQuestionnaireMode=='split' && IsSplitQuestionnaireFinish(question.status)" :src="finishIcon" alt=""> -->
                        <img v-if="IsSplitQuestionnaireFinish(question.studentAnswerStatus)" :src="finishIcon" alt="">
                        <!-- question.studentAnswerStatus  学生答题是否完成   0 否  1 是-->
                    </li>
                </ul>
            </div>
        </div>
    </div>

</template>


<script setup lang="ts">
import { ref,onMounted, reactive, computed,watch } from 'vue';
import { useRouter } from 'vue-router';

import TabSearch from '@/baseComponents/TabSearch.vue';
import QuestionnaireQuestionList from '@/components/QuestionnaireQuestionList.vue';

import SingleSelectQuestionBatchFill from '@/components/singleSelectQuestionBatchFill/SingleSelectQuestionBatchFill.vue';
import ScoreQuestionBatchFill from '@/components/scoreQuestionBatchFill/ScoreQuestionBatchFill.vue';
import StarRationQuestionBatchFill from '@/components/starRationQuestionBatchFill/StarRationQuestionBatchFill.vue';
import QuestionAndAnswerBatchFill from '@/components/questionAndAnswerBatchFill/QuestionAndAnswerBatchFill.vue';
import BatchSelectQuestionBatchFill from '@/components/batchSelectQuestionBatchFill/BatchSelectQuestionBatchFill.vue';

import { subjectToColor,fillOutStatusToColor,
        IsSubjectQuestionnaireUnFinish,IsSplitQuestionnaireFinish,IsSplitQuestionnaireUnFinish
    } from '@/components/commonDictConvert';
import { useTimeCountDown } from '@/utils/dateTransform';
import {getExcelColumn} from '@/utils/numberConvertExcelColumn'

import { getEvaluationQuestionDataApi } from '@/api/questionnaireCommit'

import redTimeIcon from '@/assets/icon/red_time_icon.svg'
import finishIcon from '@/assets/studentQuestionnaire/select_icon.png'



interface TeacherItm {
    id: string|number
    evaluationClassName: string     //班级
    evaluationStatus: number   //评价状态  0-待评价  1-进行中  2-已评价
    subjectType: number      // 科目类型 0-班主任  1 科目（单科）
    teacherName: string      //教师名称
    evaluationSubjectName:string  //科目名称
}



const router = useRouter()


// 倒计时相关参数
const { 
        DestoryInterval,
        deadlineCountDown,
        StartCounDown
    } =  useTimeCountDown()


/**
 * 1. 左侧教师相关变量
 */
// 待评价教师列表
const teacherList = ref<TeacherItm[]>([])


/**
 * 2. 问卷整体数据
 */

//  当前问卷任务是否全部完成 ———— 以及问卷是否结束
const isCurrentQuestionnaireTaskFinish = ref(false) //true  false

// 问卷填写截止时间
// const deadlineTime = ref('2026-07-28 12:30:00')
const deadlineTime = computed(()=>{
    return questionaireMsg.value.deadlineTime
})
// 每个问卷的进度
const questionnaireProgress= computed(()=>{
    return questionaireMsg.value.progress
})


//  模拟所有教师的问卷数据（目前只有两个）
const mockTeacherQuestionnaireData = ref([
    // {
    //     "id": "661146080469061632",
    //     "createdAt": "2026-07-15 09:58",
    //     "schoolId": "10007",
    //     "teacherId": "510448965049651259",
    //     "teacherName": "李敏",
    //     "assessmentTitle": "大学生消费情况调查问卷-复制",
    //     "assessmentIllustrate": "您好！这次问卷只是针对中小学现状的调查，为心理教育提供依据。本调查问卷无记名，完全保密，请同学们必须如实填写，以利于调查问卷的有效性！谢谢合作！",
    //     "assessmentScore": "15.00",
    //     "assessmentSortCode": 104,
    //     "useStatus": 0,
    //     "questionCount": null,
    //     "fullScore": null,
    //     "questionData": [
    //         {
    //             "id": "663805618586464256",
    //             "createdAt": "2026-07-22 18:06:32",
    //             "updatedAt": "2026-07-22 18:06:32",
    //             "schoolId": "10007",
    //             "assessmentId": "661146080469061632",
    //             "questionClass": 0,
    //             "questionTitleName": "您的性别*",
    //             "questionType": 0,
    //             "questionAnswerType": 1,
    //             "questionSortRole": 0,
    //             "questionSortCode": 1,
    //             "questionScore": null,
    //             "evaluationType": 0,
    //             "answerData": [
    //                 {
    //                     "id": "663805618636795904",
    //                     "createdAt": "2026-07-22 18:06:32",
    //                     "updatedAt": "2026-07-22 18:06:32",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661146080469061632",
    //                     "questionId": "663805618586464256",
    //                     "questionClass": null,
    //                     "questionSortCode": 1,
    //                     "answerName": "男",
    //                     "answerScore": null
    //                 },
    //                 {
    //                     "id": "663805618645184512",
    //                     "createdAt": "2026-07-22 18:06:32",
    //                     "updatedAt": "2026-07-22 18:06:32",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661146080469061632",
    //                     "questionId": "663805618586464256",
    //                     "questionClass": null,
    //                     "questionSortCode": 2,
    //                     "answerName": "女",
    //                     "answerScore": null
    //                 }
    //             ],
    //             status:'done',
    //         },
    //         {
    //             "id": "663805618678738944",
    //             "createdAt": "2026-07-22 18:06:32",
    //             "updatedAt": "2026-07-22 18:06:32",
    //             "schoolId": "10007",
    //             "assessmentId": "661146080469061632",
    //             "questionClass": 0,
    //             "questionTitleName": "每月消消消消消消消消消消消消消消消消消消消消消费多******用于哪些方面*",
    //             "questionType": 1,
    //             "questionAnswerType": 1,
    //             "questionSortRole": 1,
    //             "questionSortCode": 2,
    //             "questionScore": null,
    //             "evaluationType": 0,
    //             "answerData": [
    //                 {
    //                     "id": "663805618703904768",
    //                     "createdAt": "2026-07-22 18:06:32",
    //                     "updatedAt": "2026-07-22 18:06:32",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661146080469061632",
    //                     "questionId": "663805618678738944",
    //                     "questionClass": null,
    //                     "questionSortCode": 1,
    //                     "answerName": "伙食",
    //                     "answerScore": null
    //                 },
    //                 {
    //                     "id": "663805618708099072",
    //                     "createdAt": "2026-07-22 18:06:32",
    //                     "updatedAt": "2026-07-22 18:06:32",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661146080469061632",
    //                     "questionId": "663805618678738944",
    //                     "questionClass": null,
    //                     "questionSortCode": 2,
    //                     "answerName": "购置衣物",
    //                     "answerScore": null
    //                 },
    //                 {
    //                     "id": "663805618708099073",
    //                     "createdAt": "2026-07-22 18:06:32",
    //                     "updatedAt": "2026-07-22 18:06:32",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661146080469061632",
    //                     "questionId": "663805618678738944",
    //                     "questionClass": null,
    //                     "questionSortCode": 3,
    //                     "answerName": "日常交际",
    //                     "answerScore": null
    //                 }
    //             ],
    //             status:'done',
    //         },
    //         {
    //             "id": "663805618745847808",
    //             "createdAt": "2026-07-22 18:06:32",
    //             "updatedAt": "2026-07-22 18:06:32",
    //             "schoolId": "10007",
    //             "assessmentId": "661146080469061632",
    //             "questionClass": 0,
    //             "questionTitleName": "你希望老师在哪里改进*",
    //             "questionType": 2,
    //             "questionAnswerType": 1,
    //             "questionSortRole": 0,
    //             "questionSortCode": 3,
    //             "questionScore": null,
    //             "evaluationType": 0,
    //             "answerData": [],
    //             status:'pending',
    //         },
    //         {
    //             "id": "663805618766819328",
    //             "createdAt": "2026-07-22 18:06:32",
    //             "updatedAt": "2026-07-22 18:06:32",
    //             "schoolId": "10007",
    //             "assessmentId": "661146080469061632",
    //             "questionClass": 1,
    //             "questionTitleName": "你对本次问卷调查的感受",
    //             "questionType": 5,
    //             "questionAnswerType": 1,
    //             "questionSortRole": 0,
    //             "questionSortCode": 4,
    //             "questionScore": "10.00",
    //             "evaluationType": 0,
    //             "answerData": [],
    //             status:'unfinish',
    //         },
    //         {
    //             "id": "663805618787790848",
    //             "createdAt": "2026-07-22 18:06:32",
    //             "updatedAt": "2026-07-22 18:06:32",
    //             "schoolId": "10007",
    //             "assessmentId": "661146080469061632",
    //             "questionClass": 1,
    //             "questionTitleName": "你对本次问卷调查的感受",
    //             "questionType": 5,
    //             "questionAnswerType": 1,
    //             "questionSortRole": 0,
    //             "questionSortCode": 5,
    //             "questionScore": "5.00",
    //             "evaluationType": 1,
    //             "answerData": [],
    //             status:'unfinish',
    //         }
    //     ]
    // },
    // {
    //     "id": "661148998005952512",
    //     "createdAt": "2026-07-15 10:10",
    //     "schoolId": "10007",
    //     "teacherId": "510448965049651259",
    //     "teacherName": "李敏",
    //     "assessmentTitle": "必填项传参测试",
    //     "assessmentIllustrate": "必填项传参测试",
    //     "assessmentScore": "0.00",
    //     "assessmentSortCode": 101,
    //     "useStatus": 1,
    //     "questionCount": null,
    //     "fullScore": null,
    //     "questionData": [
    //         {
    //             "id": "661213148149264384",
    //             "createdAt": "2026-07-15 14:24:59",
    //             "updatedAt": "2026-07-15 14:24:59",
    //             "schoolId": "10007",
    //             "assessmentId": "661148998005952512",
    //             "questionClass": 0,
    //             "questionTitleName": "项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出",
    //             "questionType": 1,
    //             "questionAnswerType": 1,
    //             "questionSortRole": 1,
    //             "questionSortCode": 1,
    //             "questionScore": null,
    //             "evaluationType": 0,
    //             "answerData": [
    //                 {
    //                     "id": "661213148170235904",
    //                     "createdAt": "2026-07-15 14:24:59",
    //                     "updatedAt": "2026-07-15 14:24:59",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661148998005952512",
    //                     "questionId": "661213148149264384",
    //                     "questionClass": null,
    //                     "questionSortCode": 1,
    //                     "answerName": "项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出",
    //                     "answerScore": null
    //                 },
    //                 {
    //                     "id": "661213148174430208",
    //                     "createdAt": "2026-07-15 14:24:59",
    //                     "updatedAt": "2026-07-15 14:24:59",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661148998005952512",
    //                     "questionId": "661213148149264384",
    //                     "questionClass": null,
    //                     "questionSortCode": 2,
    //                     "answerName": "项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出",
    //                     "answerScore": null
    //                 },
    //                 {
    //                     "id": "661213148178624512",
    //                     "createdAt": "2026-07-15 14:24:59",
    //                     "updatedAt": "2026-07-15 14:24:59",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661148998005952512",
    //                     "questionId": "661213148149264384",
    //                     "questionClass": null,
    //                     "questionSortCode": 3,
    //                     "answerName": "项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出",
    //                     "answerScore": null
    //                 },
    //                 {
    //                     "id": "661213148182818816",
    //                     "createdAt": "2026-07-15 14:24:59",
    //                     "updatedAt": "2026-07-15 14:24:59",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661148998005952512",
    //                     "questionId": "661213148149264384",
    //                     "questionClass": null,
    //                     "questionSortCode": 4,
    //                     "answerName": "项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出",
    //                     "answerScore": null
    //                 }
    //             ]
    //         },
    //         {
    //             "id": "661213148224761856",
    //             "createdAt": "2026-07-15 14:24:59",
    //             "updatedAt": "2026-07-15 14:24:59",
    //             "schoolId": "10007",
    //             "assessmentId": "661148998005952512",
    //             "questionClass": 0,
    //             "questionTitleName": "必填项测试1",
    //             "questionType": 0,
    //             "questionAnswerType": 1,
    //             "questionSortRole": 1,
    //             "questionSortCode": 2,
    //             "questionScore": null,
    //             "evaluationType": 0,
    //             "answerData": [
    //                 {
    //                     "id": "661213148249927680",
    //                     "createdAt": "2026-07-15 14:24:59",
    //                     "updatedAt": "2026-07-15 14:24:59",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661148998005952512",
    //                     "questionId": "661213148224761856",
    //                     "questionClass": null,
    //                     "questionSortCode": 1,
    //                     "answerName": "选项1",
    //                     "answerScore": null
    //                 },
    //                 {
    //                     "id": "661213148254121984",
    //                     "createdAt": "2026-07-15 14:24:59",
    //                     "updatedAt": "2026-07-15 14:24:59",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661148998005952512",
    //                     "questionId": "661213148224761856",
    //                     "questionClass": null,
    //                     "questionSortCode": 2,
    //                     "answerName": "选项2",
    //                     "answerScore": null
    //                 }
    //             ]
    //         },
    //         {
    //             "id": "661213148283482112",
    //             "createdAt": "2026-07-15 14:24:59",
    //             "updatedAt": "2026-07-15 14:24:59",
    //             "schoolId": "10007",
    //             "assessmentId": "661148998005952512",
    //             "questionClass": 0,
    //             "questionTitleName": "选项溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出测试",
    //             "questionType": 0,
    //             "questionAnswerType": 1,
    //             "questionSortRole": 0,
    //             "questionSortCode": 3,
    //             "questionScore": null,
    //             "evaluationType": 0,
    //             "answerData": [
    //                 {
    //                     "id": "661213148308647936",
    //                     "createdAt": "2026-07-15 14:24:59",
    //                     "updatedAt": "2026-07-15 14:24:59",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661148998005952512",
    //                     "questionId": "661213148283482112",
    //                     "questionClass": null,
    //                     "questionSortCode": 1,
    //                     "answerName": "选项溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试选项溢出测试选项溢出测试选项溢出测试",
    //                     "answerScore": null
    //                 },
    //                 {
    //                     "id": "661213148312842240",
    //                     "createdAt": "2026-07-15 14:24:59",
    //                     "updatedAt": "2026-07-15 14:24:59",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661148998005952512",
    //                     "questionId": "661213148283482112",
    //                     "questionClass": null,
    //                     "questionSortCode": 2,
    //                     "answerName": "选项溢出测试选项溢出测试选项溢溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试出测试选项溢出测试选项溢出测试",
    //                     "answerScore": null
    //                 },
    //                 {
    //                     "id": "661213148312842241",
    //                     "createdAt": "2026-07-15 14:24:59",
    //                     "updatedAt": "2026-07-15 14:24:59",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661148998005952512",
    //                     "questionId": "661213148283482112",
    //                     "questionClass": null,
    //                     "questionSortCode": 3,
    //                     "answerName": "选项溢出测试选项溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试溢出测试选项溢出测试选项溢出测试选项溢出测试",
    //                     "answerScore": null
    //                 },
    //                 {
    //                     "id": "661213148317036544",
    //                     "createdAt": "2026-07-15 14:24:59",
    //                     "updatedAt": "2026-07-15 14:24:59",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661148998005952512",
    //                     "questionId": "661213148283482112",
    //                     "questionClass": null,
    //                     "questionSortCode": 4,
    //                     "answerName": "4354",
    //                     "answerScore": null
    //                 },
    //                 {
    //                     "id": "661213148321230848",
    //                     "createdAt": "2026-07-15 14:24:59",
    //                     "updatedAt": "2026-07-15 14:24:59",
    //                     "schoolId": "10007",
    //                     "assessmentId": "661148998005952512",
    //                     "questionId": "661213148283482112",
    //                     "questionClass": null,
    //                     "questionSortCode": 5,
    //                     "answerName": "789",
    //                     "answerScore": null
    //                 }
    //             ]
    //         }
    //     ]
    // },
])

// 模拟问卷响应数据
const mockResData = computed(()=>mockTeacherQuestionnaireData.value?.[currentActiveTeacherIndex.value])

// 最终渲染的整体问卷数据
const questionaireMsg = computed(()=>{
    let addedQuestionList = mockResData.value?.questionData?.map(item=>{
        let options = item.answerData.map(opt=>{
            return{
                answerCode: opt.answerCode,
                content: opt.answerName,
                score: opt.answerScore,
                id: opt.answerId
            }
        })
        let extraConfig = []
        if(Number(item.questionAnswerType) === 1){
            extraConfig.push('required')
        }
        if(Number(item.questionSortRole) === 1){
            extraConfig.push('isHorizontal')
        }
        return {
            ...item,
            id:item.questionId,
            extraConfig,    // 是否必答 required, 是否横排 isHorizontal
            options,
            answer:undefined
        }
    })
    return{
        assessmentTitle:mockResData.value?.assessmentName,  //问卷标题
        assessmentIllustrate:mockResData.value?.assessmentIllustrate,  //问卷简介
        // 问卷试题列表
        questionData:addedQuestionList,
        progress:mockResData.value?.progress,
        deadlineTime:mockResData.value?.endDateTime,
    }
})


//  历史选择的问卷填写方式  
// //无 '' ,  full 整卷填写 , split  按题填写
const HistoryQuestionnaireFillMode = ref('')

// 默认的问卷填写模式
const defaultQuestionnaireMode = ref('full')  //  split  full
// 问卷填写模式是否允许修改
const QuestionnaireModeDisabled = ref(false)

// 问卷填写模式变更
const HandleQuestionnaireModeChange = (val)=>{
    console.log('当前选中的值',val)
    defaultQuestionnaireMode.value = val
}

// 监听从接口获取到的 历史问卷填写方式，变更当前页面的模式和模式的禁选状态
watch(()=>HistoryQuestionnaireFillMode.value,(newVal)=>{
    if(newVal){
        defaultQuestionnaireMode.value = newVal
        QuestionnaireModeDisabled.value = true
    }
})

/**
 * 3. 整卷填写相关变量 和操作
 */
// 问卷试题 dom
const questionListRef = ref()
// 当前选中的待评价科目教师
const currentActiveTeacherIndex = ref(0) 

// 整卷填写 教师问卷的答案
const fullQuestionnaireAnswer = ref({})

// 切换 评价的科目教师
const HandleSubjectTeacherChange = (index,teacher)=>{
    currentActiveTeacherIndex.value = index

    currentSelectedQuestionIndex.value = 0
}

// 问卷试题定位—— 滚动定位到试题中的某一题
const ScrollToItem = (id)=>{
    const targetElement = questionListRef.value.querySelector(`[id="${id}"]`);
    if (targetElement) {
        // 平滑滚动到目标元素，并使其居中显示
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
}
// 接收问卷表单填写信息的变更
const HandleQuestionnaireFormChange = (val)=>{
    fullQuestionnaireAnswer.value = val
}
// 问卷整卷提交
const HandleFinishReview = ()=>{
    fullQuestionnaireAnswer.value = {}
}


/**
 *  4. 按题填写相关变量 和操作
 */
const isQuestionEdit = ref(false)  // 当前试题是否已经编辑完成
const currentSelectedQuestionIndex = ref(0)  // 当前选中的试题索引

// 当前问卷题目的 教师评价答案列表
const singleQuestionAnswer = ref([])

// 当前编辑的试题
const currentEditQuestion = computed(()=>{
    return questionaireMsg.value?.questionData?.[currentSelectedQuestionIndex.value]
})


// 按题填写的表格数据渲染 _ 不同题目类型渲染不同的内容
const questionTableColumns = ref<any[]>([])  //按题填写的表列数据
const questionTableData = ref<any[]>([])   //按题填写的表行数据


watch(()=>currentEditQuestion.value?.questionType,(newVal)=>{
    console.log('teacherList',teacherList.value)
    console.log('questionaireMsg',questionaireMsg.value)
    switch(newVal){
        case 0:{    //单选
            let rowKeys = { }

            // 带答案的数据渲染 处理 ————
                // 待完善
                // —— 针对原始数据
                // 行循环 
                // 列循环


                // 列循环
                    // 行循环
                    
                // 20 份答卷
                  // 同一题目 
                      // 不同选项 
                      // 每个人的答案


            // 列循环
            // 表列（头）获取
            questionTableColumns.value =  currentEditQuestion.value?.options?.map((item,index)=>{
                rowKeys[item.id] = ''
                return {
                    name:item.id,
                    label:`${getExcelColumn(index)}. `+item.content,
                    width:'200',
                    fixed:'',
                    align:'left',
                    minWdth:'',
                    custom:true,
                }
            }) || []

            questionTableData.value =  teacherList.value.map(item=>{
                return {
                    teacher:item.teacherName,
                    ...rowKeys  //答案需要循环遍历
                }
            })

            console.log('准备渲染的表数据___',questionTableData.value)
        }    
        case 1:{    //多选
            let rowKeys = { }
            questionTableColumns.value =  currentEditQuestion.value?.options?.map((item,index)=>{
                rowKeys[item.id] = ''
                return {
                    name:item.id,
                    label:`${getExcelColumn(index)}. `+item.content,
                    width:'200',
                    fixed:'',
                    align:'left',
                    minWdth:'',
                    custom:true,
                }
            }) || []

            questionTableData.value =  teacherList.value.map(item=>{
                return {
                    teacher:item.teacherName,
                    ...rowKeys  //答案需要循环遍历
                }
            })
            console.log('准备渲染的表数据___',questionTableColumns.value, 'dfdfff',questionTableData.value)

            break
        }    
        case 5:{
            //评分题



            break
        }    
        case 2:{   //问答题 




            break
        }   
    }


},{immediate:true})


// 切换当前选中的试题索引
const HandleChangeQuestion = (index,question)=>{
    console.log('当前索引--',index)
    isQuestionEdit.value = false
    currentSelectedQuestionIndex.value = index

}
// 接收问卷试题答案的变更
const HandleQuestionAnswerChange = (val)=>{
    singleQuestionAnswer.value = val
}
// 当前题目 有关所有教师的评价数据提交
const HandleFinishCurrentQuestion = ()=>{
    console.log('当前题目的教师评价数据--',singleQuestionAnswer.value )
    if((currentSelectedQuestionIndex.value + 1) < questionaireMsg.value.questionData?.length){
        currentSelectedQuestionIndex.value += 1
    }
    singleQuestionAnswer.value = []
    isQuestionEdit.value = false
}

// 
// 处理页面的倒计时
const HandleTimeDeadline = ()=>{
    DestoryInterval()
    // 获取到剩余时间后，开始执行倒计时
    StartCounDown(deadlineTime.value,1000)
}

onMounted( async ()=>{
    // 从父级获取 待评价教师的数据列表
    let localTeacherList = sessionStorage.getItem('teacherList')
    if(localTeacherList){
        teacherList.value = JSON.parse(localTeacherList || '[]')
        let teacherIds = teacherList.value.map(item=>{
            return item.id
        })
        let res = await getEvaluationQuestionDataApi(teacherIds)
        if(res?.code == 200){
            mockTeacherQuestionnaireData.value = res?.data
        }

    }
    // HandleTimeDeadline()
})

</script>


<style lang="scss" scoped>
.main_container{
    > *{
        flex-shrink: 0;
    }
}

.top_header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:10px 20px;
    .info_tip{
        margin-right: 240px;
        margin-left: 10px;
        flex: 1 1;
        display: flex;
        justify-content: flex-end;
        gap:40px;
        align-items: center;

        font-size: 14px;
        line-height: 24px;
        .process_tip{
            color: #2E64FA;
        }
        .time_tip{
            display: flex;
            align-items: center;
            gap:4px;
            color:#f56C6c; 
        }
    }
    :deep(.button_default_background){
        padding:8px 10px;
        >span{
            gap:4px;
        }
    }
}

.center_content{
    display: flex;
    gap:20px;
    align-items: flex-start;

    height: calc(100% - 56px - 20px);
    overflow: auto;

    .left_teacher_nav{
        width: 160px;
        max-height: 100%;
        overflow: auto;

        .teacher_list{
            display: flex;
            flex-direction: column;
            gap:16px;
            margin-top: 16px;

            .teacher_card{
                display: flex;
                gap:8px;
                cursor: pointer;

                &.disabled{
                    cursor:not-allowed
                }

                &.active{
                    .status,
                    .teacher_name{
                        color:#2E64FA !important;
                    }
                    .teacher_name{
                        font-weight: 600;
                    }
                }

                .teacher_tag{
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    width: 44px;
                    height: 44px;
                    border-radius: 4px 4px 4px 4px;
                    font-weight: 600;
                    font-size: 12px;
                    color: #FFFFFF;
                }

                .info_text{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .teacher_name{
                        font-size: 14px;
                        color: #333333;
                    }
                    .status{
                        font-size: 12px;
                    }
                }
            }
        }
    }

    .right_title_nav{
        width: 240px;
        max-height: 100%;
        overflow: auto;
        padding:20px 10px;

        .question_list_brief{
            display: flex;
            flex-direction: column;
            font-size: 14px;
            li{
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap:8px;
                padding:10px 0;
                cursor: pointer;

                .disabled{
                    cursor: not-allowed;
                }
                .active{
                    color: #2E64FA;
                }
                img{
                    width:16px;
                    height:16px;
                }
            }
        }
    }

    .center_questionnaire {
        flex: 1 1;
        display: flex;
        flex-direction: column;

        border-radius: 10px;
        background-color: white;
        overflow: auto;
        height: 100%;
        padding:20px 0 116px 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;
            }
        }

        .operation{
            flex: 1 1;
            display: flex;
            align-items: flex-end;
            justify-content: center;

            .el-button{
                margin-top: 60px;
                width: 160px;
                height: 48px;
            }
        }
    }
}

</style>