<template>
  <view>
    <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>{{ query.subject == "1" ? 100 : 50 }}题,45分钟</span>
      </div>
      <div class="class">
        <span>合格标准</span>
        <span>90分及格</span>
      </div>
      <div class="class">
        <span>学员姓名</span>
        <span>
          <input
            v-model="realName"
            class="class-input"
            placeholder="选填"
            confirm-type="send"
            type="text"
          />
        </span>
      </div>
      <div class="remind">
        答题后不可修改，累计错题扣分导致分数不及格时，系统自动交卷，考试不通过。
      </div>
      <view class="start" @click="gotoNextPage">
        <m-button class="start" width="532rpx" height="80rpx" text="开始考试" />
      </view>
    </div>
  </view>
</template>

<script>
import api from "@/api/index";
import utils from "@/utils/index";
export default {
  data() {
    return {
      query: {},
    };
  },
  onLoad(query) {
    this.query = query;
  },
  computed: {
    realName() {
      return this.$store.state.user.userInfo.realName;
    },
  },
  methods: {
    goMockExam(e) {},
    gotoNextPage(e) {
      let query = Object.assign({},this.query)
      query.title = "模拟考试"
      uni.navigateTo({
        url: "/otherPages/mockExam/index?" + utils.mapToUrlQuery(query),
      });
      api.user
        .studentUserRealname({
          realName: this.realName,
        })
        .then((res) => {});
    },
  },
};
</script>

<style scoped lang="scss">
.header-back {
  width: 750rpx;
  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;
  }
}
.class-input {
  width: 200rpx;
  border: none;
  background: #e2e2e2;
  border-radius: 30rpx;
  padding-left: 16rpx;
}
.content {
  width: 690rpx;
  background: #ffffff;
  box-shadow: 0px 0px 8rpx rgba(124, 129, 136, 0.2);
  border-radius: 10rpx;
  position: relative;
  left: 50%;
  top: -52rpx;
  transform: translateX(-50%);
  padding: 38rpx 15rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #0a1a33;
    margin-bottom: 10rpx;
  }
  .class {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    width: 340rpx;
    margin-top: 26rpx;

    span {
      &:nth-of-type(1) {
        color: #8a9099;
      }
      &:nth-of-type(2) {
        color: #5c6066;
      }
    }
  }
  .remind {
    width: 630rpx;
    background: rgba(255, 77, 83, 0.1);
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 38rpx;
    color: #ff4d53;
    padding: 16rpx 24rpx;
    box-sizing: border-box;
    margin-top: 48rpx;
  }
  .start {
    color: #ffffff;
    margin-top: 30px;
    background: #498ef5;
    border-radius: 40rpx;
    overflow: hidden;
  }
}
</style>
