<template>
    <ul>
        <li class="back" v-if="showBack" @click="_backPlay">
            <i></i>
        </li>
        <li id="barrage-skin" class="barrage" :class="{'z-active': showBarrage}" v-if="barrageInfo.status == 1" @click="_setBarrage">
            <i>弹</i>
        </li>
    </ul>
</template>

<script>
    import UserAgent from '@/plugins/UserAgent/index'
    import { mapGetters, mapMutations } from 'vuex'

    export default {
        props: {
            mps: {},
        },
        data(){
            return {
                showBarrage: true
            }
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo',
                'playerInfo': 'playerInfo',
            }),
            barrageInfo(){
                return this.channelInfo.barrageInfo
            },
            showBack(){
                if(this.playerInfo.playUrl != this.playerInfo.saveUrl){
                    return true
                }else{
                    return false;
                }
            }
        },
        mounted(){
            this.$Bus.$on('bus-sendBarrage', this._sendBarrage)
        },
        methods: {
            ...mapMutations({
                'set_playerInfo': 'set_playerInfo'
            }),
            _backPlay(){
                let info = JSON.parse(JSON.stringify(this.playerInfo));
                info.playUrl = info.saveUrl;
                info.cameraId = ''
                this.set_playerInfo(info)
            },
            _setBarrage(){
                this.showBarrage = !this.showBarrage;
            },
            _sendBarrage(str){
                let makeColor = function(){
                    let colorArray = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
                    let color = '';
                    for(let i =0;i<6;i++){
                        color += colorArray[Math.floor(Math.random()*16)];
                    }
                    return color;
                }
                if(this.mps && str){
                    if(this.showBarrage && this.barrageInfo.status == 1){
                        let color = this.barrageInfo.fontColor || 'FFFFFF';
                        let size = this.barrageInfo.fontSize || 2;
                        let speed = this.barrageInfo.speed || 2;

                        color = color == "random" ? makeColor() : color;
                        str= str.replace(/(#)[\u4e00-\u9fa5A-Za-z0-9\.]+(#)/ig,'');

                        if(UserAgent.isMobile()){
                            size = size == 1 ? 12 : size == 2 ? 16 : size == 3 ? 22 : 16;
                            speed = speed == 1 ? 50 : speed == 2 ? 30 : speed == 3 ? 10 : 30;
                            this.mps.sendbarrage2(str, size, '#'+color, '', speed, '微软雅黑');
                        }else{
                            size = size == 1 ? 16 : size == 2 ? 20 : size == 3 ? 32 : 20;
                            speed = speed == 1 ? 100 : speed == 2 ? 50 : speed == 3 ? 20 : 50;
                            this.mps.sendbarrage2(str, size, '#'+color, speed, '', '微软雅黑');
                        }

                    }
                }
            },
        },
        beforeDestroy(){
            this.$Bus.$off('bus-sendBarrage', this._sendBarrage)
        },
    }
</script>

<style lang="less" scoped>
    ul{
        width: 100%;
        li{
            margin-bottom: 5px;
            width: 50px;
            height: 50px;
            padding: 5px;
            text-align: center;
            font-size: 25px;
            i{
                display: inline-block;
                width: 40px;
                height: 40px;
                line-height: 40px;
                border-radius: 50%;
                background: rgba(0, 0, 0, 0.5);
            }
            &.back{
                i{
                    background: url("./img/icon-back.png") no-repeat center center;
                    background-size: 100% 100%;
                }
            }
            &.barrage{
                font-size: 20px;
                i{
                    font-style: normal;
                }
                &.z-active{
                    color: #008DF6;
                }
            }
        }
    }
</style>