<template>
    <div
        class="nus_counttime"
        v-if="timeList"
        @click="_onClick"
        @tap="_onTap">
        <slot :data="timeData">
            <span
                class="nu_time-item">
                {{timeList[0]}}
            </span>
            <span class="nu_split">:</span>
            <span
                class="nu_time-item">
                {{timeList[1]}}
            </span>
            <span class="nu_split">:</span>
            <span
                class="nu_time-item">
                {{timeList[2]}}
            </span>
        </slot>
    </div>
</template>
<script>
import { CountDown } from 'nimble-lib';
import WidgetTmp from '../_comm/WidgetTmp';
export default {
    extends: WidgetTmp,
    name: 'NuCounttime',
    props: {
        /**
         * 结束时间
         */
        endTime: {
            type: String,
            default: ''
        },
        /**
         * 当前时间
         */
        currentTime: {
            type: String,
            default: ''
        },
        timeCount: {
            type: Number,
            default: 0
        },
        /**
         * 格式化的类型
         */
        formatType: {
            type: String,
            default: 'h'
        }
    },
    data() {
        return {
            timeData: ''
        };
    },
    watch: {
        timeCount () {
            this._initCom();
        },
        currentTime() {
            this._initCom();
        },
        endTime() {
            this._initCom();
        }
    },
    computed: {
        timeList() {
            let res;
            let _time = this.timeData;
            if (_time && typeof _time === 'string') {
                res = _time.split(':');
            } else {
                res = ['00', '00', '00'];
            }
            return res;
        }
    },
    mounted() {
        this._initCom();
    },
    methods: {
        /**
         * 初始化时间
         */
        _initCom() {
            let _that = this;
            if (!_that.endTime && !_that.timeCount) {
                return;
            }
            _that.countDown && _that.countDown.stop();
            let _startTime = (_that.currentTime && _that.currentTime.replace(/-/g, '/')) || Date.now();
            let _endTime = _that.endTime.replace(/-/g, '/');
            _that.countDown = CountDown({
                startTime: _startTime,
                endTime: _endTime,
                timeCount: _that.timeCount || 0,
                formatType: _that.formatType,
                callback(data) {
                    if (!data || typeof data !== 'string') {
                        _that.$emit('countEnd', {
                            startTime: _startTime,
                            endTime: _endTime,
                            formatType: _that.formatType,
                            data: data
                        });
                    }
                    _that.timeData = data;
                }
            });
        }
    }
};
</script>
<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_counttime{
    display: inline-block;
    height: 18px;
    line-height: 19px;
    font-size: $nucounttime-fontsize;
    color:$nucounttime-split-color;
    .nu_split,.nu_time-item{
        display: block;
        float: left;
    }
    .nu_split{
        margin: 0 4px;
    }
    .nu_time-item {
        height: 100%;
        line-height: inherit;
        padding: 0 4px;
        border-radius: 3px;
        color:$nucounttime-item-color;
        background-color: $nucounttime-item-bg-color;
    }
}
</style>
