<template>
<div class="xp-clock">
  <div class="xp-clock__date" :style="dateStyle">{{ showDate }}</div>
  <div class="xp-clock__time" :style="timeStyle">{{ showTime }}</div>
</div>
</template>

<script>
export default {
  name: 'XpClock',

  data() {
    return {
      timer: null,
      showDate: null,
      showTime: null,
      y: null,
      m: null,
      d: null,
      h: null,
      mm: null,
      s: null
    }
  },

  props: {
    dateStyle: {
      type: Object,
      default: () => {}
    },
    timeStyle: {
      type: Object,
      default: () => {}
    }
  },

  methods: {
    getParams() {
      let date = new Date()
      this.y = date.getFullYear()
      this.m = date.getMonth() + 1
      this.d = date.getDate()
      this.h = date.getHours()
      this.mm = date.getMinutes()
      this.s = date.getSeconds()
      this.h = this.h < 10 ? `0${this.h}` : this.h
      this.mm = this.mm < 10 ? `0${this.mm}` : this.mm
      this.s = this.s < 10 ? `0${this.s}` : this.s
      this.showDate = `${this.y}年${this.m}月${this.d}日`
      this.showTime = `${this.h}:${this.mm}:${this.s}`
    }
  },

  created () {
    this.getParams()
    this.timer = setInterval(this.getParams, 1000)
  }
}
</script>
