<template>
  <div class="container zd-row flexcol alignend">
    <div class="date-wraper">{{hours}}:{{minutes}}:{{seconds}}</div>
    <div class="time-wraper">{{date}}</div>
  </div>
</template>

<script>
export default {
  name: 'jxTime',
  data () {
    return {
      timer: null,
      time: '',
      hours: '',
      minutes: '',
      seconds: '',
      date: '',
      week: ''
    }
  },
  mounted () {
    this.updateTime()
    // this.timer = window.setInterval(this.updateTime, 1000)
  },
  methods: {
    updateTime () {
      let cd = new Date()
      let year = cd.getFullYear()
      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let myddy = new Date().getDay()
      let week = weekday[myddy]
      this.time = `${hh}:${mm}:${ss}`
      this.hours = `${hh}`
      this.minutes = `${mm}`
      this.seconds = `${ss}`
      this.date = `${year} - ${month} - ${date}`
      // if (this.$i18n.locale === 'en-us') {
      //   let enMonth = ''
      //   switch (month) {
      //     case 1:
      //       enMonth = 'Jan.'
      //       break
      //     case 2:
      //       enMonth = 'Feb.'
      //       break
      //     case 3:
      //       enMonth = 'Mar.'
      //       break
      //     case 4:
      //       enMonth = 'Apr.'
      //       break
      //     case 5:
      //       enMonth = 'May'
      //       break
      //     case 6:
      //       enMonth = 'Jun.'
      //       break
      //     case 7:
      //       enMonth = 'Jul.'
      //       break
      //     case 8:
      //       enMonth = 'Aug.'
      //       break
      //     case 9:
      //       enMonth = 'Sep.'
      //       break
      //     case 10:
      //       enMonth = 'Oct.'
      //       break
      //     case 11:
      //       enMonth = 'Nov.'
      //       break
      //     case 12:
      //       enMonth = 'Dec.'
      //       break
      //   }
      //   this.date = `${date}th ${enMonth}, ${year}`
      // }
      this.week = `${week}`
    }
  },
  beforeDestroy () {
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.timer)
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.date-wraper
  _font(.25rem, .25rem, #e1e9f4,,right)
  font-family SourceHanSansCN-Regular
.time-wraper
  _font(.16rem, .16rem, #e1e9f4,,right)
  font-family SourceHanSansCN-Regular
  margin-top .1rem
</style>
