<template>
  <div style="display:inline-block;">
    <span v-if="showTimeString">{{ timeString }}</span>
    <div class="vux-clocker-tpl">
      <slot />
    </div>
  </div>
</template>

<script>
// const Clocker = require('./clocker')
import Clocker from './clocker.js'
export default {
  props: {
    sTime: [String, Number],
    time: [String, Number],
    format: {
      type: String,
      default: '%D 天 %H 小时 %M 分 %S 秒'
    }
  },
  data () {
    return {
      showTimeString: true,
      timeString: '',
      slotString: '',
      cacheSlotString: ''
    }
  },
  watch: {
    time () {
      if (this.clocker) {
        this.clocker.remove()
      }
      this.render()
    }
  },
  mounted () {
    this.slot = this.$el.querySelector('.vux-clocker-tpl')
    this.slotString = this.slot.innerHTML
    if (this.slotString !== '') {
      this.showTimeString = false
    }
    this.render()
  },
  beforeDestroy () {
    if (this.clocker) {
      this.clocker.remove()
    }
    this.clocker = null
  },
  methods: {
    render () {
      if (!this.time) return
      this.clocker = new Clocker(this.time, {
        sTime: this.sTime
      })
        .on('tick', event => {
          this.update(event)
          this.$emit('on-tick', event)
        })
        .on('finish', () => {
          this.timeString = '00:00:00'
          this.$emit('on-finish')
        })
        .start()
    },
    update (event) {
      if (this.showTimeString) {
        this.timeString = event.strftime(this.format)
      } else {
        let string = event.strftime(this.slotString)
        if (string !== this.cacheSlotString) {
          this.slot.innerHTML = this.cacheSlotString = string
        }
      }
    }
  }
}
</script>
