<template>
    <div v-if="channelInfo.liveStatus == 0 && channelInfo.countdownStatus == 1 && channelInfo.liveBegin > nowDate">
        <div class="count-dowm-box">
            <div class="box">
                <div class="title">{{channelInfo.countdownWords}}</div>
                <div class="down">
                    倒计时
                    <span>{{countDowmInfo.day}}</span>天
                    <span>{{countDowmInfo.hour}}</span>时
                    <span>{{countDowmInfo.minute}}</span>分
                    <span>{{countDowmInfo.second}}</span>秒
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        data(){
            return {
                timer: null,
                nowDate: new Date().getTime()/1000,
            }
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo'
            }),
            countDowmInfo(){
                let time = 0;
                if(this.nowDate){
                    time = this.channelInfo.liveBegin - this.nowDate;
                }
                time = time <= 0 ? 0 : time;
                return {
                    day: parseInt(time/24/60/60),
                    hour: parseInt(time/60/60%24)>=10?parseInt(time/60/60%24):'0'+parseInt(time/60/60%24),
                    minute: parseInt(time/60%60)>=10?parseInt(time/60%60):'0'+parseInt(time/60%60),
                    second: parseInt(time%60)>=10?parseInt(time%60):'0'+parseInt(time%60)
                };
            }
        },
        mounted() {
            this.timer = setInterval(() => {
                this.nowDate = new Date().getTime()/1000;
                if(this.channelInfo.liveBegin <= this.nowDate){
                    clearInterval(this.timer)
                }
            },1000);
        },
        beforeDestroy(){
            clearInterval(this.timer)
            this.timer = null;
        },
    }
</script>

<style lang="less" scoped>
    .count-dowm-box{
        padding: 0 10px;
        width: 100%;
        line-height: 40px;
        font-size: 14px;
        background-color: rgba(0,0,0,0.4);
        color: #fff;

        .box{
            display: flex;

            .title{
                flex: 1;
                padding-right: 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .dowm{
                flex: 0 0 170px;
                width: 170px;
                text-align: right;
            }
        }
    }
</style>