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

<script>

let getDateIntervalFun = null
export default {
  name: 'BoardIndex',
  data() {
    return {
      time: '',
      date: ''
    }
  },
  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().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
      let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
      let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
      let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
      this.date = `${YYYY} - ${MM} - ${dd}`
      this.time = `${HH} : ${mm} : ${ss}`
    }
    getDate()
    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>
