<template>
  <view class="container">
    <image @click="backView" :src="backButton" class="backButton" />
    <view style="background: #f4f3ef">
      <view class="header-text-left">Sub of a Driver Training System</view>
      <view class="headerImg"
        ><image mode="aspectFit" :src="subjectImg"
      /></view>
      <view class="header-text-right">Sub of a Driver Training System</view>
      <view style="background: #fff; width: 100%; overflow: hidden" class="">
        <view class="content">
          <view class="box1">
            <view class="info">考试须知：</view>
            <view>1.遵守考场纪律，服从监考人员指挥。</view>
            <view>2.进入考场、手机关机。禁止抽烟，禁止吃零食。</view>
            <view>3.未经工作人员允许，考生禁止随意出入考场。</view>
            <view>4.考场内禁止大声题哗，禁止随意走动。</view>
            <view>5.考试中认真答题，不准交头接耳。</view>
            <view>6.考试中不准冒名顶替，不准弄虚作假。</view>
            <view>7.注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。</view>
            <view>8.爱护公物及考试设备。</view>
          </view>
          <view class="box2">
            <view class="info">驾考理论考试01号考台：</view>
            <view style="color: #ba2f35" class="box2-id">
              身份证号：123456789101112131415161718
            </view>
            <view class="box2-space1"></view>
            <view class="box2-name" style="color: #ba2f35">
              考生姓名：{{ nickName || "张三" }}
            </view>
            <view class="pl124 exam-container">
              <view
                @click="
                  () => {
                    goExam();
                  }
                "
                class="exam-button"
              >
                开始考试
              </view>
            </view>
            <view class="mt14" style="color: #ba2f35">
              点击"确认"按钮开始考试
            </view>
            <view class="box2-tip" style="color: #666769">
              操作提示：每题考试答案确认后，点击【下一题】，电脑立即判定所选答案，如选择错误，系统将提示正确答案，提示后不允许修改答案。
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import backButton from "@/assets/img/backButton.png";
import utils from '@/utils/index'
// import { getCurrentPage } from '../../../dist/build/mp-weixin/wxcomponents/vant/common/utils';
export default {
  data() {
    let subject1Img =
      "https://ndata.zzxcx.net/wxapp/static/imgs/%E7%A7%91%E7%9B%AE%E4%B8%80.png";
    let subject4Img =
      "https://ndata.zzxcx.net/wxapp/static/imgs/%E7%A7%91%E7%9B%AE%E5%9B%9B.png";
    return {
      subject1Img,
      subject4Img,
      subjectImg: subject1Img,
      backButton,
      nickName:"",
      headImage:"",
      query: {
        username: "",
        headimg: "",
      },
    };
  },
  onLoad(option) {
    //username=%E5%BC%A0%E5%AE%87%E5%86%9B&subject=1&type=liceCar&headimg=https%3A%2F%2Fthirdwx.qlogo.cn%2Fmmopen%2Fvi_32%2FQ0j4TwGTfTL42T648KSueEiaibrIt0jgEmgBUlRvbu1ES3VnKoBicK4GOnuYK8oeSLL0V0gmeGaWwONo78oPpvzUQ%2F132
    this.query = option;
    this.query.subject == 4
      ? (this.subjectImg = this.subject4Img)
      : (this.subjectImg = this.subject1Img);
    // this.query.username = decodeURIComponent(option.username);
    // this.query.headimg = decodeURIComponent(option.headimg);
    this.nickName = uni.getStorageSync('userInfo').nickName
    this.headImage = uni.getStorageSync('userInfo').headImage
  },
  methods: {
    backView(){
      uni.navigateBack()

    },
    goExam() {
      let page = getCurrentPages()[0];
      let query = {
        ...this.query,
  
      }
      let params = page.$page.fullPath.split("?")[1];
      uni.navigateTo({
        url: "/pages/mockExam/test?" + utils.mapToUrlQuery(query),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.font11 {
  font-size: 11rpx;
}
.mt14 {
  margin-top: 14rpx;
}
.pl138 {
  padding-left: 138rpx;
}
.pl124 {
  padding-left: 124rpx;
}
.pl24 {
  padding-left: 24rpx;
}
.exam-container {
  margin-top: 18px;
  .exam-button {
    width: 106rpx;
    height: 27rpx;
    background: #fff;
    opacity: 1;
    line-height: 27rpx;
    color: #38393b;
    text-align: center;
    border-radius: 4rpx;
    font-size: 16rpx;
    border: 1rpx solid #a1a2a4;
    border-radius: 0;
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  .backButton {
    position: absolute;
    top: 28rpx;
    left: 13rpx;
    width: 22rpx;
    height: 22rpx;
  }
}
.header {
  width: 100%;
  height: 21.8vh;
  background: linear-gradient(180deg, #498ef5 0%, #4da8e6 100%);
  font-size: 26px;
  line-height: 21.8vh;
  color: white;
}
.header-text-left {
  color: #a9a9a1;
  text-align: left;
  height: 13rpx;
  line-height: 13rpx;
  font-size: 8rpx;
}
.header-text-right {
  color: #a9a9a1;
  text-align: right;
  height: 13rpx;
  font-size: 8rpx;
  border-bottom: 1rpx solid #d8d7d3;
  padding-right: 15rpx;
}
.headerImg {
  width: 100%;
  height: auto;

  > img {
    width: 100%;
    height: auto;
  }
  image {
    width: 100%;
    height: 53rpx;
  }
}
.mt15 {
  margin-top: 15rpx;
}
.content {
  width: 723rpx;
  height: 67vh;
  padding: 0 0;
  margin: 0 auto;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #eae9e5;
  background: #f5f6f8;
  .box1 {
    width: 50%;
    height: 100%;
    padding-top: 15rpx;
    padding-left: 20rpx;
    color: #3d3c38;
    border-right: 1rpx solid #eae9e5;
    box-sizing: border-box;
    font-size: 11rpx;
    line-height: 16rpx;
    .info {
      font-size: 14rpx;
      margin-bottom: 7rpx;
      font-weight: 700;
      font-size: 14rpx;
    }
    div {
      text-align: left;
      font-size: 13rpx;
      margin-bottom: 4rpx;
    }
  }
  .box2 {
    width: 50%;
    height: 100%;
    text-align: left;
    padding-top: 18rpx;
    padding-left: 17rpx;
    font-size: 13rpx;
    box-sizing: border-box;
    .box2-space1 {
      height: 5px;
    }
    .box2-id {
      font-weight: 700;
      font-size: 13rpx;
    }
    .box2-name {
      font-weight: 700;
      font-size: 13rpx;
    }
    .box2-tip {
      margin-top: 7rpx;
      font-size: 11rpx;
    }
    .info {
      margin-bottom: 7rpx;
      font-size: 14rpx;
      font-weight: 700;
    }
  }
}
</style>