<template>
  <div>
    <router-view></router-view>
    <div class="time" id="time">{{ time }}</div>
    <div class="date" id="date">{{ date }}</div>
  </div>
</template>

<script>
import {AppMain} from './components'

let getDateIntervalFun = null
export default {
  name: 'BoardIndex',
  components: {
    AppMain,
  },
  data() {
    return {
      time: '1',
      date: '1'
    }
  },
  created() {
    const getDate = () => {
      let date = new Date()
      let YYYY = date.getFullYear()
      let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
      let dd = (date.getDate() + 1).toString().length === 1 ? ('0' + (date.getDate() + 1)) : (date.getDate() + 1)
      let HH = (date.getHours() + 1).toString().length === 1 ? ('0' + (date.getHours() + 1)) : (date.getHours() + 1)
      let mm = (date.getMinutes() + 1).toString().length === 1 ? ('0' + (date.getMinutes() + 1)) : (date.getMinutes() + 1)
      let ss = (date.getSeconds() + 1).toString().length === 1 ? ('0' + (date.getSeconds() + 1)) : (date.getSeconds() + 1)
      this.date = `${YYYY} - ${MM} - ${dd}`
      this.time = `${HH} : ${mm} : ${ss}`
    }
    getDateIntervalFun = setInterval(getDate,1000)
  },
  beforeDestroy() {
    getDateIntervalFun = null
  }
}
</script>
<style scoped>
.time, .date {
  position: absolute;
  font-size: 0.8vw;
  color: #fcfcfc;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.time {
  top: 3.2%;
  left: 85.8%;
}

.date {
  top: 3.2%;
  left: 94.1%;
}
</style>
