<template>
	<div class="draw" v-if="info.id" @click="goDraw">
		<span class="time">{{countDowm}}</span>
	</div>
</template>
<script>
    import {getLiveDraw} from '@/plugins/API/apiDraw'
    import {mapGetters} from 'vuex'

	export default {
		data(){
            return {
                timer: null,
                info: {},
                nowDate: new Date().getTime()/1000,
            }
        },
        computed: {
            ...mapGetters({
                'type': 'type',
            	'userInfo': 'userInfo',
                'channelInfo': 'channelInfo'
            }),
            countDowm(){
                if(!this.info.id){
                    return '未开始';
                }
                if(this.info.endTime <= this.nowDate){
                    return '已结束'
                }else if(this.info.startTime >= this.nowDate){
                    let time = this.info.startTime - this.nowDate;
                    let minute = parseInt(time/60)>=10?parseInt(time/60):'0'+parseInt(time/60);
                    let second = parseInt(time%60)>=10?parseInt(time%60):'0'+parseInt(time%60)
                    return `${minute}:${second}`;
                }else{
                    return '进行中'
                }
            }
        },
        mounted() {
            this.$Bus.$on('bus-drawInfo', this._setInfo)
            this.timer = setInterval(() => {
                this.nowDate = new Date().getTime()/1000;
            },1000);
            this.getInfo();
        },
        methods: {
        	_setInfo(info){
        		this.info = info.id ? info : {};
        	},
            async getInfo(){
                const res = await getLiveDraw({
                    type: this.type,
                    channelId: this.channelInfo.id
                })
                if (res.code == 200 && res.errorCode == 0) {
                    this._setInfo(res.data);
                }
            },
        	goDraw(){
        		if(!this.userInfo.id){
                    this.$Bus.$emit('bus-showLogin', true);
                }else{
                    let id = this.info.id;
                    let uin = this.channelInfo.uin;
                    let channelId = this.channelInfo.id;
                    let type = this.type;
                    let backUrl = encodeURIComponent(window.location.href);
                    window.location.href = `/lottery/?id=${id}&uin=${uin}&stype=${type}&sid=${channelId}&backUrl=${backUrl}`;
                }
        	}
        },
        beforeDestroy(){
            this.$Bus.$off('bus-drawInfo', this._setInfo)
            clearInterval(this.timer)
            this.timer = null;
        },
	}
</script>
<style lang="less" scoped>
	.draw{
		position: relative;
	    margin-left: -4px;
	    margin-bottom: 5px;
	    width: 48px;
	    height: 48px;
	    background-color: #F55F5F;
	    border-radius: 100%;
	    background-size: 22px auto;
	    background-image: url(./img/draw.png);
	    background-repeat: no-repeat;
	    background-position: center 4px;
	    .time{
	        position: absolute;
	        left: 0;
	        bottom: 0;
	        width: 100%;
	        line-height: 20px;
	        text-align: center;
	        font-size: 10px;
	        color: #fff;
	        white-space: nowrap;
	    }
	}
</style>