<template>
    <div class="num">
        <i></i>
        <span>{{num > 0 ? num : 0 | formatNum}}</span>
    </div>
</template>

<script>
    import {getChatCount} from '@/plugins/API/apiAll'
    import {mapGetters} from 'vuex'
    export default {
        data(){
            return {
                num: 0
            }
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo'
            }),
        },
        mounted(){
            this.$Bus.$on('bus-chatNum', this.changeNum)
            this.getNum();
        },
        methods: {
            async getNum(){
                const res = await getChatCount({
                    id: this.channelInfo.id,
                    uin: this.channelInfo.uin,
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.num = res.data || 0;
                }
            },
            changeNum(num){
                this.num += num;
            },
        },
        beforeDestroy(){
            this.$Bus.$off('bus-chatNum', this.changeNum)
        },
    }
</script>
<style lang="less" scoped>
    .num{
        display: inline-block;
        margin-left: 5px;
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
        border-radius: 20px;
        font-size: 0;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;

        i{
            vertical-align: middle;
            display: inline-block;
            margin-right: 2px;
            width: 12px;
            height: 12px;
            background: url("./img/icon-chat-num.png") no-repeat center center;
            background-size: auto 100%;
        }
        span{
            vertical-align: middle;
            display: inline-block;
            font-size: 12px;
        }
    }
</style>