<template>
  <div class="header-back">
    <m-nav-bar :transparent="true" title="模拟考试" />
    <div class="user-data">
      <m-user-avatar />
      <m-user-name />
    </div>
  </div>
  <div class="content">
    <div class="title">考试说明</div>
    <div class="class">
      <span>考试科目</span>
      <span>{{ query.name }}</span>
    </div>
    <div class="class">
      <span>考试题库</span>
      <span>{{ query.vehicle }}{{ query.cert }}</span>
    </div>
    <div class="class">
      <span>考试时间</span>
      <span>100题,45分钟</span>
    </div>
    <div class="class">
      <span>合格标准</span>
      <span>90分及格</span>
    </div>
    <div class="remind">
      答题后不可修改，累计错题扣分导致分数不及格时，系统自动交卷，考试不通过。
    </div>
    <m-button
      class="start"
      width="266px"
      height="40px"
      text="开始考试"
      @click="gotoNextPage"
    />
  </div>
</template>

<script lang="ts">
import { useRoute } from "vue-router";
</script>

<script lang="ts" setup>
import { defineEmits } from "vue";
const emits = defineEmits(["next"]);
const gotoNextPage = () => void emits("next");
const { query } = useRoute();
</script>

<style scoped lang="scss">
.header-back {
  width: 375px;
  padding-bottom: 82px;
  background: linear-gradient(180deg, #498ef5 0%, #4da8e6 100%);
  border-radius: 0px 0px 82px 82px;
  .header {
    position: relative;
    font-size: 15px;
    padding: 15px;
    color: #ffffff;
    .title {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .user-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    justify-content: space-between;
    height: 80px;
    color: #ffffff;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 400;
  }
}

.content {
  width: 345px;
  background: #ffffff;
  box-shadow: 0px 0px 8px rgba(124, 129, 136, 0.2);
  border-radius: 10px;
  position: relative;
  left: 50%;
  top: -52px;
  transform: translateX(-50%);
  padding: 38px 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #0a1a33;
    margin-bottom: 5px;
  }
  .class {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    width: 170px;
    margin-top: 13px;
    span {
      &:nth-of-type(1) {
        color: #8a9099;
      }
      &:nth-of-type(2) {
        color: #5c6066;
      }
    }
  }
  .remind {
    width: 315px;
    background: rgba(255, 77, 83, 0.1);
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 19px;
    color: #ff4d53;
    padding: 8px 12px;
    box-sizing: border-box;
    margin-top: 24px;
  }
  .start {
    color: #ffffff;
    margin-top: 30px;
    background: #498ef5;
  }
}
</style>
