import {  defineComponent, onBeforeUnmount, onMounted, reactive } from 'vue'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import 'loaders.css/loaders.min.css'
import runtime, { START_LIVE_TIME } from '../../components/live-broadcast/runtime'
import styles from './chronography.module.less'

dayjs.extend(duration)

export default defineComponent({
  setup() {
    const data = reactive({
      duration: ''
    })
    const starttimestr = sessionStorage.getItem(START_LIVE_TIME)
    const starttime = Number(starttimestr)
    let timer: NodeJS.Timer | null = null
    onMounted(() => {
      timer = setInterval(() => {
        const nowtime = dayjs().valueOf()
        if (starttime && nowtime - starttime) {
          data.duration = dayjs.duration((nowtime - starttime)).format('HH:mm:ss')
        }
      })
    })
    onBeforeUnmount(() => {
      if (timer) {
        clearInterval(timer)
      }
    })
    return () => runtime.videoStatus === 'liveing' && starttime ? (
      <div class={styles.time}>
        <div class={styles.status}>
          <div class="line-scale-pulse-out">
            <div></div>
            <div></div>
            <div></div>
          </div>
          <span>直播中</span>
        </div>
        <span class={styles.text}>{data.duration}</span>
      </div>
    ) : null
  }
})