<template>
  <div class="mock-countdown">
    <Header></Header>
    <section class="section">
      <div class="container">
        <div class="section__header">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/person-center/my-mock' }"
              >我的模考</el-breadcrumb-item
            >
            <el-breadcrumb-item>模考</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="title">距离{{ mockName }}开考还有</div>
        <div class="countdown">
          <div class="box">{{ getDuring("minutes") }}</div>
          <span class="pin">:</span>
          <div class="box">{{ getDuring("seconds") }}</div>
        </div>

        <el-button
          class="btn"
          :disabled="!(nowTime > start && nowTime < end)"
          @click="examBank()"
          type="primary"
          >开始考试</el-button
        >
      </div>
    </section>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer/index";
import Header from "@/components/header/index";
import ToolBar from "@/components/toolbar/index";
import { mapGetters } from "vuex";
export default {
  components: {
    Footer,
    Header,
    ToolBar,
  },
  data() {
    return {
      state: 1,
      start: 0,
      timer: null,
      timeText: "",
      nowTime: 0,
      timeLimit: 0,
      examId: 0,
      end: 0,
      eachExamId: 0,
      subscribeId: 0,
      mockName: "",
      examEndTime: 0,
    };
  },
  computed: {},
  mounted() {
    this.mockName = this.$route.query.mockName;
    this.subscribeId = this.$route.query.subscribeId;
    this.eachExamId = this.$route.query.eachExamId;
    this.examId = this.$route.query.examId;
    this.timeLimit = +this.$route.query.limit || 0;
    this.start = +this.$route.query.start;
    this.examEndTime = this.$route.query.examEndTime;
    this.end = this.timeLimit * 60 + this.start;
    this.timer = setInterval(() => {
      this.timeText = this.getDuring();
    }, 1000);
  },
  methods: {
    getDuring(type) {
      this.nowTime = +this.$tools.timest();
      let during = this.start - this.nowTime;
      if (during <= 0) {
        if (type == "minutes") {
          return "00";
        }

        if (type == "seconds") {
          return "00";
        }
        return "00:00";
      }

      let minutes =
        parseInt(during / 60) >= 10
          ? "0" + parseInt(during / 60)
          : parseInt(during / 60);
      let seconds = during % 60 >= 10 ? during % 60 : "0" + (during % 60);

      if (type == "minutes") {
        return minutes;
      }

      if (type == "seconds") {
        return seconds;
      }
      return minutes + ":" + seconds;
    },
    canTest() {},
    examBank() {
      if (this.nowTime > this.start && this.nowTime < this.end) {
        this.$router.replace({
          path: "/mock-exam",
          query: {
            examId: this.examId,
            eachExamId: this.eachExamId,
            subscribeId: this.subscribeId,
            examEndTime: this.examEndTime,
            examStartTime: this.start,
          },
        });
      } else {
        this.$message.warning("不在考试时间");
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.mock-countdown {
  .section {
    &__header {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }
    .title {
      margin-top: 80px;
      text-align: center;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }

    .countdown {
      margin: 15px auto 0;
      width: 663px;
      height: 253px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      background: rgb(247, 249, 252);
      display: flex;
      align-items: center;
      justify-content: center;

      .box {
        margin: 0 70px;
        width: 171px;
        height: 151px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 96px;
        color: #3f8dfd;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        background: #fff;
        border-radius: 10px;
      }

      .pin {
        font-size: 96px;
        color: #3f8dfd;
      }
    }

    .btn {
      display: block;
      margin: 40px auto 100px;
      width: 300px;
      height: 40px;
      border-radius: 20px;
      padding: 0;
      text-align: center;
      line-height: 40px;
    }
  }
}
</style>
