<template>
  <div class="main_container">
    <!-- 顶部 Banner 区域 -->
    <img  class="banner-card" :src="studentEntryIcon" alt="评价系统图标" />

    <!-- 底部操作区域 -->
    <div class="action-area">
      <div class="input-group">
        <span class="label">评价码：</span>
        <el-input
          v-model="evaluationCode"
          placeholder="请输入评价码"
          size="large"
          clearable
          class="code-input"
        ></el-input>
      </div>

      <div class="button-wrapper">
        <el-button class="button_background" @click="handleEnter"> 进入</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import studentEntryIcon from '@/assets/studentQuestionnaire/entry_logo.png';
import { ElMessage } from 'element-plus';
import { reviewCodeLoginApi } from '@/api/studentEntry';

const router = useRouter()
const evaluationCode = ref(''); //评价码

// 处理进入逻辑
const handleEnter =  async() => {
  if (!evaluationCode.value) {
    ElMessage.warning('请输入评价码')
    return;
  }
  let res = await reviewCodeLoginApi(evaluationCode.value)
  if(res?.code == 200){
    localStorage.setItem('userInfo', JSON.stringify(res.data))
    localStorage.setItem('token', res.data.tokenValue)
    router.push('/main/questionnaireTaskListPage')
  }
};
</script>

<style lang="scss" scoped>
.main_container {
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:40px;
    height: 100%;
    background-color: #ffffff !important;
    padding-top: 40px !important;
    > *{
        flex-shrink: 0;
    }
    .banner-card {
        width: 800px;
        height: 360px;
        border-radius: 10px;
    }
        
    /* 操作区域样式 */
    .action-area {
        overflow: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 80px;
       
        .input-group {
            display: flex;
            align-items: center;
            width: 100%;
            gap:10px;

            .label {
                font-weight: 400;
                font-size: 16px;
                color: #000000;
                font-size: 16px;
                white-space: nowrap;
            }

            .code-input {
                :deep(.el-input__wrapper) {
                    width: 640px;
                    height: 64px;
                    font-size: 16px;
                    .el-input__inner::placeholder{
                        font-size: 16px;
                    }
                }
            }
        }
        .button-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
            .button_background {
                width: 240px;
                height: 64px;
                font-size: 18px;
            }
        }
    }
}
</style>