<template>
    <div class="main_container hide_scrollbar">
        <!-- 顶部筛选与统计区域 -->
        <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>
                <div class="content_right">
                    <el-button v-if="isShowSelectSubject" :class="[isCurrentQuestionnaireTaskFinish ? 'is-disabled' : 'button_border']" 
                        @click="isCurrentQuestionnaireTaskFinish ? '' : GoToElectiveSubject()" >更改科目班级</el-button>
                </div>
            </div>
        </div>

        <!-- 教师卡片列表区域 -->
        <ul class="teacher_list">
            <li  v-for="(item) in teacherList" 
                :key="item.id"  
                class="teacher_card" @click="HandleQuestoinnaireOpen(item)">
                <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>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
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 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
}) 

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

// 跳转到选科页面
const GoToElectiveSubject = ()=>{
    router.push('/app/questionnaireElectiveSubject')
}

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

// 查看已完成的问卷 信息
const HandleQuestoinnaireOpen = (teacher)=>{
    // 如果评卷结束了，可以随意查看
    // evaluationStatus  0-待评价  1-进行中  2-已评价
    if(isQuestionnaireEnd.value || teacher.evaluationStatus === 2){
        // 跳转到问卷评价页
        sessionStorage.setItem('currentEditTeacherQuestionnaire',JSON.stringify({
            id:teacher.id,
            subjectName:teacher.evaluationSubjectName,
            teacherName:teacher.teacherName
        }))
        router.push('/app/questionnaireCommit')
    }
}

onMounted( 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
    }
})
</script>

<style lang="scss" scoped>

.main_container {
    display: flex;
    flex-direction: column;
    background-color: #ffffff !important;
    
    padding:calc(16 * var(--app-rpx)) 
            calc(12 * var(--app-rpx))  
            // calc(90 * var(--app-rpx)) !important;
            calc((90 + 44 + 84 + 10) * var(--app-rpx)) !important; /* 为底部按钮留出空间 */

    
    .search_content{
        .content_right{
            height: auto;
            :deep(.button_border){
                width: calc(88 * var(--app-rpx));
                height: calc(36 * var(--app-rpx)) !important;
                font-size: calc(12 * var(--app-rpx));
                border-radius: calc(4 * var(--app-rpx));
            }
        }
    }

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

        
    /* 教师列表网格布局 */
    .teacher_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(10* var(--app-rpx));
        margin-top: calc(16 * var(--app-rpx));

        .teacher_card {
            display: flex;
            flex-direction: column;
            height: calc(110 * var(--app-rpx));
            border: calc(1 * var(--app-rpx)) solid #EBEEF5;
            border-radius:  calc(10 * var(--app-rpx)) ;
            cursor: pointer;

            .card_header {
                display: flex;
                align-items: center;
                gap:calc(8 * var(--app-rpx));
                padding:calc(14 * var(--app-rpx)) ;
                background: #F8FAFE;
                border-radius:  calc(10 * var(--app-rpx))  calc(10 * var(--app-rpx)) 0px 0px;
                border-bottom: calc(1 * var(--app-rpx)) solid #EBEEF5;

                > *{
                    flex-shrink: 0;
                }
                .subject_tag {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width:  calc(40 * var(--app-rpx));
                    height: calc(40 * var(--app-rpx));
                    border-radius:calc(4 * var(--app-rpx));
                    font-weight: 600;
                    font-size: calc(12 * var(--app-rpx));
                    color: #FFFFFF;
                    text-align: center;
                }
                .info_text {
                    height: calc(40 * var(--app-rpx));
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    color: #333333;
                    .teacher_name {
                        font-weight: 600;
                        font-size: calc(16 * var(--app-rpx));
                    }
                    .class_name {
                        font-size: calc(12 * var(--app-rpx));
                    }
                }
            }
            .card_footer {
                flex: 1 1;
                display: flex;
                justify-content: center;
                align-items: center;
                .status_text {
                    font-weight: 600;
                    font-size:  calc(14 * var(--app-rpx)) ;
                }
            }
        }
    }

    /* 底部区域 */
    .bottom_action {
        position: fixed;
        bottom:0;
        left: 0;
        width: 100%;
        padding-bottom: calc(10 * var(--app-rpx)) ;
        background-color: white;

    
        //   position：relative 时 距离上部间距
        // margin-top: calc(84 * var(--app-rpx)) ;
        // margin-bottom:  calc(10 * var(--app-rpx)) ;


        flex: 1 1;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        .button_background{
            width:calc(100vw - 40 * var(--app-rpx));
            height: calc(44 * var(--app-rpx));
            font-size:  calc(16 * var(--app-rpx));
            border-radius: calc(4 * var(--app-rpx));
            font-weight: 600;
        }
    }
}
</style>