<template>
	<div class="vote" v-if="info.id" @click="goVote"></div>
</template>
<script>
    import {getInfoByInclude} from '@/plugins/API/apiVote'
    import {mapGetters} from 'vuex'

	export default {
		data(){
            return {
                info: {},
            }
        },
        computed: {
            ...mapGetters({
                'type': 'type',
            	'userInfo': 'userInfo',
                'channelInfo': 'channelInfo'
            }),
        },
        mounted() {
            this.$Bus.$on('bus-voteInfo', this._setInfo)
            this.getInfo();
        },
        methods: {
        	_setInfo(info){
        		this.info = info.id ? info : {};
        	},
            async getInfo(){
                const res = await getInfoByInclude({
                    include_id: this.channelInfo.id,
                    type: this.type
                })
                if (res.code == 200 && res.errorCode == 0) {
                    this._setInfo(res.data);
                }
            },
        	goVote(){
        		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 = `/vote/?id=${id}&uin=${uin}`;
                }
        	}
        },
        beforeDestroy(){
            this.$Bus.$off('bus-voteInfo', this._setInfo)
        },
	}
</script>
<style lang="less" scoped>
	.vote{
        position: relative;
        margin-bottom: 5px;
        height: 40px;
        background-size: 100% auto;
        background-image: url(./img/vote.png);
        background-repeat: no-repeat;
        background-position: 0 0;
	}
</style>