<template>
  <view>
    <div class="result-box" v-if="score >= 90">
      <img class="img" :src="hege" />
      <span class="text">恭喜你,测试通过~</span>
      <div class="fraction-box">
        <span class="fraction">{{ score }}</span
        >分
      </div>
      <span class="hint">（满分:100；合格:90）</span>
      <span class="time">用时：{{ useTime }}</span>
      <span class="evaluation"
        >天赋异禀、骨骼惊奇，想来是百年难得一见的考试奇才。</span
      >
    </div>
    <div class="result-box" v-else>
      <img class="img" :src="buhege" />
      <span class="text">抱歉,测试未通过~</span>
      <div class="fraction-box">
        <span class="fraction">{{ subject == 1 ? score : score * 2 }}</span
        >分
      </div>
      <span class="hint">（满分:100；合格:90）</span>
      <span class="time">用时：{{ useTime }}</span>
      <span class="evaluation"
        >学车之路，任重而道远！路漫漫其修远兮，吾将上下而求索。</span
      >
    </div>
    <div class="btn-box">
      <m-button
        width="180rpx"
        height="60rpx"
        @click="goWrongPreview"
        class="btn1"
        text="错题重做"
      />
      <m-button
        width="180rpx"
        height="60rpx"
        @click="againTest"
        class="btn2"
        text="重新测试"
      />
    </div>
  </view>
</template>

<script>
import hege from "./hege.png";
import buhege from "./buhege.png";
export default {
  data() {
    return {
      hege,
      buhege,
      score: 0,
      useTime: "",
      subject: 1,
      query: {},
    };
  },
  onLoad(query) {
    this.score = query.score;
    this.useTime = query.useTime;
    this.subject = query.subject;
  },
};
//提交考试成绩
// createTestScores({
// 	type: query.vehicle as string,
// 	kskm: query.name as string,
// 	score: props.userTestData.testScores,
// });
</script>

<style lang="scss" scoped>
.result-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 30rpx;
  .img {
    width: 246px;
    height: 216px;
  }
  .text {
    margin-top: 23px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #5c6066;
    line-height: 23px;
  }
  .fraction-box {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #8a9099;
    line-height: 23px;
    margin-top: 30px;
    .fraction {
      font-size: 60px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ff4d53;
    }
  }
  .hint {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #8a9099;
    line-height: 23px;
  }
  .time {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #498ef5;
    line-height: 23px;
  }
  .evaluation {
    margin-top: 30px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #5c6066;
    line-height: 23px;
  }
}
.btn-box {
  margin: 45px auto;
  width: 230px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 23px;
  .btn1 {
    background-color: #498ef5;
  }
  .btn2 {
    background-color: #01c18d;
  }
}
</style>
