<template>
    <div class="main_container">
        <!-- 顶部筛选与统计区域 -->
        <div class="page_search">
            <div class="search_content">
                <div class="content_left stats_container">
                    <div class="stat-item">
                        <span class="stat-num blue">{{teacherCount}}</span>
                        <span class="stat-label">评价教师</span>
                    </div>
                    <div class="stat-divider"></div>
                    <div class="stat-item">
                        <span class="stat-num green">{{evaluationOverCount}}</span>
                        <span class="stat-label">已评科目</span>
                    </div>
                    <div class="stat-divider"></div>
                    <div class="stat-item">
                        <span class="stat-num red">{{evaluationNotOverCount}}</span>
                        <span class="stat-label">待评科目</span>
                    </div>
                    <div class="stat-divider"></div>
                    <div class="stat-item">
                        <span class="stat-num black">{{remainTime}}</span>
                        <span class="stat-label">剩余时间</span>
                    </div>
                    <div class="stat-divider"></div>
                    <div class="stat-item">
                        <span class="stat-num black">{{deadlineTime}}</span>
                        <span class="stat-label">截止时间</span>
                    </div>
                </div>
                <div class="content_right">
                    <el-button v-if="isShowSelectSubject" 
                        :class="[isCurrentQuestionnaireTaskFinish ? 'is-disabled' : 'button_border']" 
                        @click="isCurrentQuestionnaireTaskFinish ? '' : OpenFormDialog()" 
                    >更改科目班级</el-button>
                </div>
            </div>
        </div>

        <!-- 教师卡片列表区域 -->
        <ul class="teacher_list">
            <li  v-for="(item) in teacherList" 
                :key="item.id"  
                class="teacher_card">
                <div class="card_header">
                    <div class="subject_tag" :style="{ backgroundColor: subjectToColor(item.evaluationSubjectName)?.color }">
                        {{ item.evaluationSubjectName }}
                    </div>
                    <div class="info_text">
                        <div class="teacher_name">教师：{{ item.teacherName }}</div>
                        <div class="class_name">班级：{{ item.evaluationClassName }}</div>
                    </div>
                </div>
                <div class="card_footer">
                    <span class="status_text" :style="{color:fillOutStatusToColor(item.evaluationStatus)?.color}" >
                        {{ fillOutStatusToColor(item.evaluationStatus)?.statusName }}
                    </span>
                </div>
            </li>
        </ul>

        <!-- 底部操作区域 -->
        <div class="bottom_action">
            <!-- 开始评价按钮 -->
            <el-button 
                :class="[teacherList.length > 0 ? 'button_background' : 'is-disabled']" 
                @click="teacherList.length > 0 ?  GoToFillOutQuestionnaire() : ''">开始评价</el-button>
        </div>

        <SubjectAndClassChooseDialog 
            v-if="formVisible"
            v-model:formVisible="formVisible" 
            @confirm="HandleElectiveSubjectConfirm"
        />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import SubjectAndClassChooseDialog from '@/components/subjectAndClassChooseDialog/SubjectAndClassChooseDialog.vue';
import { subjectToColor,fillOutStatusToColor } from '@/components/commonDictConvert';
import {getEvaluationProcessMsgApi} from '@/api/selfQuestionnaireProcess'

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


const router = useRouter()

// 基础信息数据
const teacherCount = ref()            // 评价教师数量
const evaluationOverCount = ref()   // 已评科目数量
const evaluationNotOverCount = ref()  //待评科目数量
const deadlineTime = ref()      //评价截止时间
const remainTime = ref()      //剩余时间
// 教师列表数据
const teacherList = ref<TeacherItm[]>([]);

// 当前问卷是否有选科
const isShowSelectSubject = computed(()=>{
    let userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
    return userInfo?.evaluationBO?.showSelectSubject
})


// 打开更改科目班级弹窗
const formVisible = ref(false)
const OpenFormDialog = ()=>{
    formVisible.value = true
}
// 选科变更成功后的后续操作
const HandleElectiveSubjectConfirm = async ()=>{
    await GetEvaluationProcessMsg()
}

// 跳转到填写问卷页
const GoToFillOutQuestionnaire = ()=>{
    router.push('/main/questionnaireCommit')
}

// 获取评价进度列表数据
const GetEvaluationProcessMsg = async ()=>{
    let res = await getEvaluationProcessMsgApi()
    if(res?.code == 200){
        teacherCount.value = res.data.teacherCount
        evaluationOverCount.value = res.data.evaluationOverCount
        evaluationNotOverCount.value = res.data.evaluationNotOverCount
        deadlineTime.value = res.data.endDateTime
        remainTime.value = res.data.endTime
        teacherList.value = res.data.dataList
    }
}


// 问卷是否结束
const isQuestionnaireEnd = computed(()=>{
    let timestamp = new Date(deadlineTime.value).getTime()
    let currentTimestamp = new Date().getTime()
    let sectionTime = timestamp - currentTimestamp
    if(sectionTime > 0){
        return false
    }else{
        return true
    }
})

//  当前问卷任务是否全部完成 ———— 以及问卷是否结束
const isCurrentQuestionnaireTaskFinish = computed(()=>{
    // 判断教师列表是否全部完成
    let allTaskFinish = teacherList.value?.length > 0 
                            ? !(teacherList.value.find(teacher=>{
                                return (teacher.evaluationStatus === 0 || teacher.evaluationStatus === 1)
                            })) 
                            : false
    return allTaskFinish || isQuestionnaireEnd.value
}) 


onMounted( async()=>{
    await GetEvaluationProcessMsg()
})
</script>

<style lang="scss" scoped>
.main_container {
    background-color: #ffffff !important;
    padding:24px 40px 80px !important;

    /* 覆盖外部样式的一些特定调整 */
    .stats_container {
        gap: 24px !important;
        align-items: center;
        .stat-item {
            display: flex;
            flex-direction: column;
            gap:4px;
            line-height: 1.5;
            
            .stat-num {
                font-weight: 600;
                font-size: 16px;
                &.blue { color: #2E64FA; }
                &.green { color: #2BC644; }
                &.red { color: #F56C6C }
                &.black { color: #333; }
            }
            
            .stat-label {
                font-weight: 400;
                font-size: 12px;
                color: #999999;
            }
        }
        .stat-divider {
            width: 1px;
            height: 32px;
            background-color: #F3F3F3;
        }
    }

        
    /* 教师列表网格布局 */
    .teacher_list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 20px;
        margin: 40px 0;

        .teacher_card {
            display: flex;
            flex-direction: column;
            height: 150px;
            border: 1px solid #EBEEF5;
            border-radius: 10px;
            cursor: pointer;

            .card_header {
                display: flex;
                align-items: center;
                gap:10px;

                padding: 16px;
                background: #F8FAFE;
                border-radius: 10px 10px 0px 0px;
                border-bottom: 1px solid #EBEEF5;

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

                    width: 60px;
                    height: 60px;
                    border-radius: 8px;
                    font-weight: 600;
                    font-size: 16px;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 22px;
                }

                .info_text {
                    height: 60px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .teacher_name {
                        font-weight: 600;
                        font-size: 16px;
                        color: #333333;
                    }
                    .class_name {
                        font-size: 14px;
                        color: #333333;
                    }
                }
            }

            .card_footer {
                flex: 1 1;
                display: flex;
                justify-content: center;
                align-items: center;
                .status_text {
                    font-weight: 600;
                    font-size: 16px;
                }
            }
        }
    }

    /* 底部区域 */
    .bottom_action {
        flex: 1 1;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        .button_background{
            width: 240px;
            height: 64px;
            font-size: 18px;
            font-weight: 600;
        }
    }
}
</style>