<template>
    <div class="main_container">
        <div class="questionnaire_list">
            <div class="questionnaire_card">
                <div class="title">{{ questionnaire.evaluationName }}</div>
                <div class="time_group">
                    <span class="time">开始时间：{{ questionnaire.evaluationStartDatetime }}</span>
                    <span class="time">结束时间：{{ questionnaire.evaluationEndDatetime }}</span>
                </div>
                <div class="operation">
                    <el-button class="button_border" @click="GoEnter(questionnaire)">进入</el-button>
                </div>
            </div>
        </div>
        <SubjectAndClassChooseDialog 
            v-if="formVisible"
            v-model:formVisible="formVisible"
            @confirm="ConfirmFormDialog"
        ></SubjectAndClassChooseDialog>
    </div>
</template>   

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

import { useRouter } from 'vue-router';
import SubjectAndClassChooseDialog from '@/components/subjectAndClassChooseDialog/SubjectAndClassChooseDialog.vue';

const router = useRouter()

interface QuestionnaireData {
    id:string
    evaluationName:string   //任务名称
    evaluationStartDatetime:string  //任务开始时间
    evaluationEndDatetime:string   //任务结束时间
}
// 问卷列表
const questionnaire = ref<QuestionnaireData|{}>({})


// 处理进入问卷逻辑
const GoEnter = (row)=>{
    console.log(row.id)
    if(row.showSelectSubject){
        // 需要调用弹窗接口
        OpenFormDialog()
    }else{
        router.push('/main/selfQuestionnaireProcess')
    }
}


// 选择科目/班级弹窗
const formVisible = ref(false)
const OpenFormDialog = ()=>{
    formVisible.value = true
}
// 表单提交后的后续逻辑
const ConfirmFormDialog = ()=>{
    router.push('/main/selfQuestionnaireProcess')
}

onMounted(()=>{
    let userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
    questionnaire.value = userInfo.evaluationBO
})
</script>



<style lang="scss" scoped>
.main_container{
    background-color: #ffffff !important;
    .questionnaire_list{
        // border:solid red 1px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .questionnaire_card{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 320px;
            height:400px;
            padding:40px;
            background-image: url('@/assets/studentQuestionnaire/questionnaire_bg.png');
            background-repeat: no-repeat;
            background-size: 100% 100%; 

            .title{
                font-weight: 600;
                font-size: 20px;
                color: #FFFFFF;
                margin-bottom: 20px;
            }

            .time_group{
                display: flex;
                flex-direction: column;
                gap:10px;

                font-weight: 400;
                font-size: 14px;
                color: rgba(255,255,255,0.8);
            }

            .operation{
                flex: 1 1 ;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                .button_border{ 
                    :deep(>span){
                        display: flex;
                        align-items: center;
                    }
                    width: 100%;
                    height: 52px;

                    font-weight: 600;
                    font-size: 18px;
                    color: #2E64FA;
                    line-height: 22px;
                }
            }
        }
    }
}

</style>