<template>
  <div class="main_container hide_scrollbar">
    <img  class="banner-card" :src="studentEntryIcon" alt="评价系统图标" />
    <!-- 底部操作区域 -->
    <div class="action-area">
      <div class="input-group">
        <div class="label">请输入评价码：</div>
        <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/appImg/app_entry_bg.png';
import { ElMessage } from 'element-plus';
import { reviewCodeLoginApi } from '@/api/studentEntry';


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

// 处理进入逻辑
const handleEnter = async() => {
  if (!evaluationCode.value) {
    ElMessage({
      message: '请输入评价码',
      type: 'warning',
      customClass:'app_el_message',
    })
    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('/app/questionnaireTaskListPage')
  }
};
</script>

<style lang="scss" scoped>
.main_container {
    padding:0 0 calc(10 * var(--app-rpx)) !important;  //窄屏幕浏览器访问-添加10rpx底部，防止按钮被浏览器工具栏遮盖（button距底部共90rpx） 
    background-color: #ffffff !important;
    > *{
        flex-shrink: 0;
    }

    .banner-card{
      width: 100%;
      height:calc(280 * var(--app-rpx)) ;
    }
        
    /* 操作区域样式 */
    .action-area {
      position: relative;
      top:calc(-40 * var(--app-rpx));
      width: 100%;
      border-radius: 20px 20px 0 0;
      background-color: white;
      padding:calc(80 * var(--app-rpx)) calc(24 * var(--app-rpx)) calc(40 * var(--app-rpx));

      overflow: auto;

      display: flex;
      flex-direction: column;
      gap: calc(80 * var(--app-rpx));
       
        .input-group {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap:calc(16 * var(--app-rpx));
            .label {
                font-size: calc(16 * var(--app-rpx));
                color: #000000;
                white-space: nowrap;
            }
            .code-input {
                :deep(.el-input__wrapper) {
                    border-radius:calc(8 * var(--app-rpx));
                    height: calc(48 * var(--app-rpx));
                    font-size: calc(16 * var(--app-rpx));
                }
            }
        }
        .button-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
            .button_background {
                width: 100%;
                height: calc(48 * var(--app-rpx));
                font-size: calc(16 * var(--app-rpx));
                border-radius:calc(8 * var(--app-rpx));
            }
        }
    }
}
</style>