<template>
  <div class="page">
    <div class="head">
      <div class="text_left">
        <input class="btn" type="button" value="返回上级" v-if="$route.fullPath !== '/index'" @click="goIndex">
        <span>{{ currentDate }}</span>
        <span>{{ currentTime }}</span>
        <span>{{ currentWeek }}</span>
      </div>
      <div class="text_right">
        <span>刷新时间：{{ countDown }}s</span>
      </div>
    </div>
    <router-view style="height: 90%" v-if="isRouterAlive" :countDown="countDown"></router-view>
  </div>
</template>

<script>
import axios from "axios";
import {prefixZero} from "../utils/numUtil";
window.axios = axios
window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')
require('materialize-css')
export default {
  name: 'app',
  data() {
    return {
      countDown: 10,
      currentDate: null,
      currentTime: null,
      currentWeek: null,
      isRouterAlive: true,
      countDownTimer: null,
      week: ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'],
    }
  },
  methods: {
    goIndex() {
      this.$router.push({path: '/'})
    },
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
    setCurrentDateTime(){
      let now = new Date();
      this.currentDate = now.getFullYear() + "-" + prefixZero(now.getMonth()+1,2) + "-" + prefixZero(now.getDate(),2);
      this.currentTime = prefixZero(now.getHours(),2) + ":" + prefixZero(now.getMinutes(),2) + ":" + prefixZero(now.getSeconds(),2);
      this.currentWeek = this.week[now.getDay()];
    },
  },
  mounted() {
    // 倒计时器
    this.countDownTimer = setInterval(() => {
      this.countDown--
      if (this.countDown <= 0) {
        this.countDown = 10;
      }
      this.setCurrentDateTime();
    }, 1000)
  },
  beforeDestroy() {
    // 倒计时器
    if (this.countDownTimer) {
      clearInterval(this.countDownTimer)
    }
  }
}
</script>

<style>
@import "../../../node_modules/materialize-css/bin/materialize.css";

#app {
}

@media only screen and (max-width: 992px) {
  header, main, footer {
    padding-left: 0;
  }
}
.btn{
  height: 70%;
  margin: 0.5%;
  border: none;
  font-size: 12px;
  font-weight: bold;
  border-radius: 25px;
  padding: 0 10px;
  line-height: 100%;
  color: #00c8d6;
  background-color: #1234a1;
  margin: auto;
}
.btn:hover{
  color: #1234a1 !important;
  background-color: #00c8d6 !important;
}
</style>
