import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import dayjs from 'dayjs'
import { formateLeftTime } from '@/utils/tools'
import './index.scss'

export default class TimeTicker extends Component {

    state = {
      tips: '',
    }

    tk = undefined

    componentWillMount() {
      this.tk = setInterval(() => {
        const now = dayjs()
        const start = dayjs(this.props.startTime || now)
        const end = dayjs(this.props.endTime || now)

        const tm = end.diff(start)
        const translate = this.props.translate || (x => formateLeftTime(x, 'min'))

        if (tm >= 0) {
          this.setState({
            tips: translate(tm)
          })
        }

      }, this.props.interval || 1000)
    }

    componentWillUnmount() {
      if (this.tk) {
        clearInterval(this.tk)
      }
    }

    render() {
        return (
            <View className="timeticker">
                <Text></Text>
                <Text>{tips}</Text>
            </View>
        )
    }
}
