<template>
    <div class="encrypt" v-if="encrypt">
        <div class="box">
            <div class="title">{{channelInfo.tips || '欢迎观看直播'}}</div>
            <input class="pass" type="text" name="password" v-model="password" placeholder="请输入密码">
            <button type="button" class="sub" @click="_sub">立即登录</button>
        </div>
    </div>
</template>
<script>
    import {checkPassword} from '@/plugins/API/apiAll'
    import {mapGetters} from 'vuex'

    export default {
        data(){
            return {
                encrypt: false,
                password: '',
            }
        },
        computed: {
            ...mapGetters({
                'type': 'type',
                'channelInfo': 'channelInfo'
            })
        },
        mounted(){
            this.get_encrypt();
        },
        methods: {
            async get_encrypt(){
                if(this.channelInfo.needPassword == 1){
                    let passToken = this.$cookie.get(`token-${this.type}-${this.channelInfo.id}`) || '';
                    if(passToken){
                        const res = await checkPassword({
                            id: this.channelInfo.id,
                            passToken: passToken,
                        })
                        if(res.code == 200 && res.errorCode == 0){
                            this.encrypt = false;
                        }else{
                            this.encrypt = true;
                        }
                    }else{
                        this.encrypt = true;
                    }
                }
            },
            async _sub(){
                const res = await checkPassword({
                    id: this.channelInfo.id,
                    password: this.password,
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.$cookie.set(`token-${this.type}-${this.channelInfo.id}`, res.data, {expires: 10});
                    this.encrypt = false;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .encrypt{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2000;
        width: 100%;
        height: 100%;
        background: url("./img/encrypt.jpg") no-repeat center center;
        background-size: cover;

        .box{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            max-width: 300px;
            transform: translate(-50%, -50%);

            .title, .pass, .sub{
                display: block;
                margin: auto;
            }
            .title{
                margin-bottom: 80px;
                font-size: 30px;
                color: #fff;
                text-align: center;
            }
            .pass{
                margin-bottom: 20px;
                width: 100%;
                max-width: 300px;
                height: 50px;
                background-color: transparent;
                border: 1px solid #C9EDEC;
                color: #FFFFFF;
                text-align: center;
                font-size: 16px;
                border-radius: 50px;
                outline:none;

                &::-webkit-input-placeholder{
                     color: #BAE0E0;
                 }
            }
            .sub{
                width: 100%;
                max-width: 300px;
                height: 50px;
                background-color: #FFFFFF;
                border: 1px solid #FFFFFF;
                color: #1FB5AD;
                text-align: center;
                font-size: 16px;
                border-radius: 50px;
                outline: none;
            }
        }
    }
</style>
