<template>
  <div class="wrapper">
      <div class="box">
            <div class="code-box">
                <div class="code">
                    <span class="code-num">{{code}}</span>
                    <span 
                        class="code-btn1"
                        plain
                        round
                        :data-clipboard-text="code"
                        @click="copyFn"
                        id="copy_title">复制
                    </span>
                </div>
                <div class="code-btn" @click="refresh(1)"><img src="@/assets/sx.png" alt=""><div class="code-btn-text">刷新</div></div>
            </div>
            <div class="code-time">有效时间 <span style="color:#FF229F">{{min}}</span>分<span style="color:#FF229F">{{sec}}</span>秒</div>
            <div class="code-text">在有效时间内，在Nebula-Beat直播间通过弹幕发送验证码，返回本页面即可完成绑定，获得新人礼包！</div>
            <div class="btn-box">
                <div class="right-box" @click="goOpen()">
                    <img src="@/assets/btn3-1.png" alt="">
                    <div class="right-text-box">
                        <span>前往直播间</span>
                    </div>
                </div>
                <div class="left-box" @click="goIssue()">
                    <img src="@/assets/btn3.png" alt="">
                    <div class="left-text-box">
                        <span>常见问题</span>
                    </div>
                </div>
            </div>
      </div>
        <van-popup v-model="newShow" class="new-pop">
            <div class="content">
                常见问题
                <div class="new-img">
                    <div class="content2">
                        <div class="box1" v-html="userinfo.configs.faq">
                        </div>
                    </div>
                </div>
            </div>
            <div class="new-clone">
                <img src="@/assets/new-clone.png" alt="" @click="newClone()">
            </div>
        </van-popup>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
   inject:['reload'],
   props: {},
   data() {
       return {
           code:'',
           min:'',
           sec:'',
           m:10,
           s:0,
           creatInterval:'',
           newShow:false,
           timer:'',
           userinfo: {}
       };
   },
   watch: {
       
   },
   computed: {},
   methods: {
       goOpen(){
           clearInterval(this.timer)
           this.timer = window.setInterval(() => {
                setTimeout(() => {
                    this.dosomething() 
                }, 1)
            }, 2000);
            window.open('https://live.bilibili.com/h5/23225527','_blank');
       },
        newClone(){
           this.newShow = false
        },
       goIssue(){
           this.newShow = true
       },
        dosomething(){
            this.$api.getUserinfoAPI().then(res => {
                    if(res.data.errno == 10000){
                        if(res.data.data.status==2){
                            localStorage.setItem('userinfo',JSON.stringify(res.data.data))
                            this.userinfo = res.data.data
                            clearInterval(this.timer)
                            this.$toast.success('恭喜完成绑定，送上新人礼包【礼券5张】')
                            this.$router.push(
                                {path: '/home'}
                            )
                        }
                    }else if(res.data.errno == 20000){
                        this.$toast.fail('登录已失效,请重新登录！')
                        localStorage.removeItem('userinfo')
                        this.$router.push(
                            {path: '/'},
                        )
                    }else{
                        this.$toast.fail(res.data.errmsg)
                    }
            }).catch(err => {
                console.log(err)
            })
        },
       getUserInfo(){
            this.$api.getUserinfoAPI().then(res => {
                console.log(res)
                if(res.data.errno == 10000){
                    localStorage.setItem('userinfo',JSON.stringify(res.data.data))
                    this.userinfo = res.data.data
                    if(res.data.data.status==2){
                        this.$router.push(
                            {path: '/home'},
                        );
                    } else {
                        this.refresh()
                    }
                    // this.refresh()
                }else if(res.data.errno == 20000){
                    this.$toast.fail('登录已失效,请重新登录！')
                    localStorage.removeItem('userinfo')
                    this.$router.push(
                        {path: '/'},
                    )
                }else{
                    this.$toast.fail(res.data.errmsg)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //倒计时
        countdown () {
                if(String(this.m).length==1){
                    this.min = '0'+this.m
                }
                if(String(this.s).length==1){
                    this.sec = '0'+this.s
                }
                if( this.m >= 0 ){
                    if( this.s > 0 ){
                        this.s--;
                    }else if( this.s == 0 ){
                        this.m--;
                        this.s = 59;
                    }
                }
                this.min = this.m
                this.sec = this.s
                if(this.m==0 && this.s==0){
                    clearInterval(this.creatInterval);
                }
        },

       refresh(){
            this.$api.geRefreshAPI().then(res => {
                if(res.data.errno == 10000){
                    this.code = res.data.data.code
                    this.status = true
                    this.m = 10
                    this.s = 0
                    this.min = ''
                    this.sec = ''
                    let that = this
                    clearInterval(this.creatInterval);
                    this.creatInterval = setInterval(function(){ 
                        that.countdown()
                    },1000);
                }else if(res.data.errno == 20000){
                    this.$toast.fail('登录已失效,请重新登录！')
                    localStorage.removeItem('userinfo')
                    this.$router.push(
                        {path: '/'},
                    )
                }else{
                    this.$toast.fail(res.data.errmsg)
                }
            }).catch(err => {
                console.log(err)
            })
       },
        copyFn() {
            var clipboard = new Clipboard("#copy_title");
            clipboard.on("success", (e) => {
                this.$toast.success("复制成功");
                clipboard.destroy();
            });
            clipboard.on("error", (e) => {
                this.$toast.fail("该浏览器不支持复制")
                clipboard.destroy();//清除缓存
            });
        },

   },
   created() {
   },
   beforeDestroy() {
       clearInterval(this.timer)
    },
    mounted(){
        this.getUserInfo()
    },
    activated() {
    },
};
</script>
<style>
    .van-field__control{
        text-align: center !important;
    }
</style>
<style scoped lang="scss">
.wrapper{
    width: 750px;
    position:fixed;
    height:calc(100% + 55px);
    min-width: 750px;
    .box{
        display: block;
        background: url('../assets/bg2.png');
        background-repeat: no-repeat;
        background-size:100%;
        width: 100%;
        height:calc(100%);
        padding-top: 530px;
        .code-box{
            display: flex;
            width: 475px;
            margin: 0 auto;
            .code{
                display: flex;
                width: 400px;
                height: 80px;
                background: #FFFFFF;
                border-radius: 40px;
                .code-num{
                    width: 232px;
                    text-align: center;
                    display: inline-block;
                    line-height: 80px;
                    font-size: 30px;
                    
                    font-weight: 800;
                    color: #000000;
                }
                .code-btn1{
                    text-align: center;
                    line-height: 80px;
                    display: inline-block;
                    width: 162px;
                    height: 82px;
                    background: #000000;
                    border: 2px solid #FFFFFF;
                    border-radius: 40px;
                    font-size: 30px;
                    
                    font-weight: 800;
                    color: #FFFFFF;
                }
            }
            .code-btn{
                margin-left: 25px;
                img{
                    width: 49px;
                    height: 50px;
                    display: block;
                }
                .code-btn-text{
                    padding-top: 2px;
                    font-size: 24px;
                    
                    font-weight: 800;
                    color: #FFFFFF;
                }
            }
        }
    }
    .code-time{
        padding-top: 27px;
        text-align: center;
        font-size: 24px;
        
        font-weight: 500;
        color: #FFFFFF;
        display: block;
    }
    .code-text{
        padding-top: 118px;
        margin: 0 auto;
        width: 508px;
        height: 102px;
        font-size: 30px;
        padding-bottom: 48px;
        font-weight: 500;
        color: #FFFFFF;
    }
    .btn-box{
        position: relative;
        z-index: 9;
        width: 100%;
        // top: 928px;
        .left-box{
            margin-top: 30px;
            img{
                margin: 0 auto;
                display: block;
                width: 460px;
            }
            .left-text-box{
                position: absolute;
                width: 100%;
                top: 168px;
                span{
                    display: block;
                    margin: 0 auto;
                    text-align: center;
                    top: 43px;
                    line-height: 140px;
                    font-size: 36px;
                    
                    font-weight: 800;
                    color: #FFFFFF;
                }
            }
        }
        .right-box{
            img{
                margin: 0 auto;
                display: block;
                width: 460px;
            }
            .right-text-box{
                position: absolute;
                width: 100%;
                top: 0;
                span{
                    display: block;
                    margin: 0 auto;
                    text-align: center;
                    top: 43px;
                    line-height: 140px;
                    font-size: 36px;
                    
                    font-weight: 800;
                    color: #000000;
                }
            }
        }
    }
    .new-pop{
        width: 640px;
        border-radius: 70px;
        text-align: center;
        background: rgba(0,0,0,.7);
        .content{
            padding-top: 50px;
            width: 640px;
            background: #FFFFFF;
            border-radius: 70px;
            font-size: 40px;
            
            font-weight: 800;
            color: #000000;
            .new-img{
                height: 660px;
                overflow: auto;
                margin: 0 auto;
                padding:39px 46px;
                .content1{
                    display: flex;
                    flex-wrap: wrap;
                    div{
                        margin:0 12px;
                        img{
                            width: 164px;
                            height: 164px;
                            border-radius: 50%;
                        }
                        span{
                            display: block;
                            text-align: center;
                            font-size: 24px;
                            
                            font-weight: 500;
                            color: #000000;
                            padding-bottom: 9px;
                        }
                    }
                    div:nth-child(3n+3){
                        margin: 0 !important;
                    }
                }
                .content2{
                    .box1{
                       font-size: 24px;
                        
                        font-weight: 500;
                        color: #000000;
                        line-height: 36px;
                        text-align: left;
                    }
                }

                
            }
        }
        .new-clone{
            img{
                width: 66px;
                height: 136px;
            }
            span{
                width: 142px;
                height: 52px;
                line-height: 52px;
                border: 2px solid #FFFFFF;
                border-radius: 25px;
                position: absolute;
                margin-top: 21px;
                right: 0;
                font-size: 24px;
                
                font-weight: 800;
                color: #FFFFFF;
            }
        }
    }
}
</style>
