<template>
    <div class="auth">
        <div class="watch-pay" v-if="isWatchPay" @click="goAuth">
            <img src="./img/pay.png" alt="">
            <span>免费试看 {{expire | formatTime('mm:ss')}}</span>
        </div>
    </div>
</template>

<script>
    import {getPayWatchInfo} from '@/plugins/API/apiAuth'
    import {mapGetters, mapMutations} from 'vuex'

    export default {
        data(){
            return {
                timet: null,
                isWatchPay: false,
                expire: 0,
            }
        },
        computed: {
            ...mapGetters({
                'channelInfo': 'channelInfo',
                'jumpUrls': 'jumpUrls'
            }),
        },
        mounted(){
            if(this.channelInfo.needPay == 1){
                this.get_Info()
            }
        },
        methods: {
            //获取多机位
            async get_Info(){
                const res = await getPayWatchInfo({
                    channelId: this.channelInfo.id,
                    uin: this.channelInfo.uin
                })
                if(res.code == 200 && res.errorCode == 0){
                    if(res.data.isCanPlay == 0){
                        this.goAuth();
                    }else{
                        if(res.data.type != 2){
                            this.isWatchPay =  true;
                            this.expire = res.data.expire;
                            if(this.expire > 0){
                                this.setTimer()
                            }
                        }
                    }
                }else{
                    if(res.errorMessage){
                        this.$layer.msg(res.errorMessage);
                    }
                }
            },
            goAuth(){
                window.location.replace(this.jumpUrls.auth_pay)
            },
            setTimer(){
                this.clearTimer();
                this.timer = setInterval(() => {
                    this.expire--
                    if(this.expire <= 0){
                        this.clearTimer();
                        this.goAuth();
                    }
                },1000)
            },
            clearTimer(){
                clearInterval(this.timer)
                this.timer = null;
            }
        },
        beforeDestroy(){
            this.clearTimer();
        },
    }
</script>

<style lang="less" scoped>
    .watch-pay{
        display: inline-block;
        height: 35px;
        line-height: 35px;
        padding: 0 19px 0 7px;
        position: absolute;
        bottom: 60px;
        left: 9px;
        z-index: 110;
        background-color: rgba(0,141,246,0.5);
        border-radius: 10px;
        font-size: 0;
        img{
            vertical-align: middle;
            display: inline-block;
            margin-right: 5px;
            width: 16px;
            height: 16px;
        }
        span{
            vertical-align: middle;
            display: inline-block;
            font-size: 14px;
            color: #fff;
        }
    }
</style>
