<template>
    <div class="num">
        <i></i>
        <span>{{(watchNum+customWatchNum) | formatNum}}</span>
    </div>
</template>

<script>
    import {getWatchNum} from '@/plugins/API/apiAll'
    import {mapGetters} from 'vuex'
    export default {
        data(){
            return {
                customWatchNum: 0,
                watchNum: 0,
            }
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo'
            }),
        },
        mounted(){
            this.getNum();
            this.$Bus.$on('bus-customWatchNum', this.changeCustomWatchNum)
            this.$Bus.$on('bus-realWatchNum', this.changeWatchNum)
        },
        methods: {
            async getNum(){
                const res = await getWatchNum({
                    id: this.channelInfo.id,
                    uin: this.channelInfo.uin,
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.customWatchNum = parseInt(res.data.customWatchNum) || 0;
                    this.watchNum = parseInt(res.data.watchNum) || 0;
                }
            },
            changeCustomWatchNum(num){
                this.customWatchNum += num;
            },
            changeWatchNum(num){
                this.watchNum = num;
            },
        },
        beforeDestroy(){
            this.$Bus.$off('bus-customWatchNum', this.changeCustomWatchNum)
            this.$Bus.$off('bus-realWatchNum', this.changeWatchNum)
        },
    }
</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-watch-num.png") no-repeat center center;
            background-size: auto 100%;
        }
        span{
            vertical-align: middle;
            display: inline-block;
            font-size: 12px;
        }
    }
</style>