<script setup lang="ts">
import { useRoute } from 'vue-router'

import kong from '@/assets/kong.png'

const route = useRoute()
const examId = Number(route.query.id || 0)
const pid = Number(route.query.pid || 0)

function handleClick() {
  uni.navigateTo({
    url: `/pages/knowledge/exam/result?id=${examId}&pid=${pid}`,
  })
}
</script>

<template>
  <view class="submit-success">
    <view class="success-icon">
      <view class="icon-circle">
        <image style="width: 100%; height: 100%;" :src="kong" alt="loading" />
        <!-- <text class="icon-check">✓</text> -->
      </view>
    </view>
    <view class="success-title">
      正在批改......
    </view>
    <view class="success-message">
      请稍后在【我的考试-已考试】中查看成绩。
    </view>
    <view class="success-button">
      <view class="button" @click="handleClick">
        查看我的考试
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.submit-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 40rpx;

  .success-icon {
    margin-bottom: 64rpx;
    .icon-circle {
      width: 500rpx;
      height: 300rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .success-title {
    font-size: 36rpx;
    font-weight: 500;
    color: #31373d;
    margin-bottom: 32rpx;
  }

  .success-message {
    font-size: 28rpx;
    color: #86909c;
    text-align: center;
    margin-bottom: 80rpx;
    line-height: 1.5;
  }

  .success-button {
    width: 100%;
    max-width: 400rpx;

    .button {
      width: 100%;
      height: 88rpx;
      border: 1px solid #d4d6d9;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      color: #31373d;
      background-color: #ffffff;
      transition: all 0.3s ease;

      &:active {
        background-color: #f5f5f5;
      }
    }
  }
}
</style>
