<template>
  <div class="wrapper">
      <img class="bg-box" style="width:100%;" src="@/assets/bg-img.png" alt="">
      <div class="bg-title-box">
            <img class="bg-title" src="@/assets/login-title.png" alt="">
      </div>
      <img class="bg-zz" src="@/assets/zz.png" alt="">
      <div class="bg-bottom">
            <img class="bg-btn" style="width:61.33%;" src="@/assets/bg-btn.png" alt="">
            <div class="bg-btn-box">
                <span class="btn-text" @click="logo()">B站账号登陆</span>
            </div>
      </div>
      <overlay :show="show" @showClose="showClose"></overlay>
      
  </div>
</template>

<script>
import overlay from '@/components/Overlay.vue'
export default {
   components: {
       overlay
   },
   props: {},
   data() {
       return {
           show:false,
       };
   },
   watch: {
       $route() {
           console.log("login watch", this.$route.query.code)
       }
   },
   computed: {},
   methods: {
       logo(){
           // 登录跳转
           window.location.href = "https://passport.bilibili.com/register/pc_oauth2.html#/?client_id=5a2ac6f149df41d5&return_url=https%3A%2F%2Fnebulabeat.com&response_type=code&state="+Math.random().toString(36).slice(-6);
        },
       showClose(val){
           this.show = val
       },
       pop(){
           this.show = true
       }
   },
   created() {
       console.log("login created")
       // 判断是否登录
       let saveLogoStatus = window.localStorage.getItem('userinfo') ? JSON.parse(window.localStorage.getItem('userinfo')) : {}
        if(JSON.stringify(saveLogoStatus) != '{}') {
            if(saveLogoStatus.status==1){
                this.$router.push({
                    path:'/verification',
                })
                return
            }else if(saveLogoStatus.status==2){
                this.$router.push({
                    path:'/home',
                })
                return
            }
        }
       //
       console.log("created", this.$route.query.code)
        if(this.$route.query.code) {
            let data = {
                "code": this.$route.query.code
            }
            this.$api.getLoginAPI(data).then(res => {
                localStorage.setItem('userinfo',JSON.stringify(res.data.data))
                console.log(res.data)   
                if(res.data.errno == 10000){
                     //测试先注释
                    if(res.data.data.status==1){
                        this.$router.push({
                            path:'/verification',
                        })
                    }else{
                        
                        this.$router.push({
                            path:'/home',
                        })
                    }
                }else if(res.data.errno == 20000){
                    this.$toast('登录已失效,请重新登录！')
                    localStorage.removeItem('userinfo')
                    this.$router.push(
                        {path: '/'},
                    )
                }else{
                    this.$toast(res.data.errmsg)
                }
                
            }).catch(err => {
                return
            })
        } 
   },
   mounted() {
       console.log("login mounted")
   }
};
</script>
<style scoped lang="scss">
.wrapper{
    width: 750px;
    height: 100%;
    position: fixed;
    .bg-box{
        position: absolute;
    }
    .bg-title-box{
        position: fixed;
        top: 120px;
        z-index: 9;
        width: 100%;
        .bg-title{
            display: block;
            margin: 0 auto;
            width: 561px;
            height: 83px;
        }
    }
    .bg-zz{
        position: absolute;
        margin-left: 188px;
        z-index: 9;
        margin-top: -80px;
        width: 272px;

    }
    .bg-bottom{
        position: fixed;
        top: 1099px;
        z-index: 9;
        .bg-btn{
            display: block;
            margin: 0 auto;
        }
        .bg-btn-box{
            position: absolute;
            top: 0;
            width: 100%;
            margin: 0 auto;
            .btn-text{
                width:406px;
                height: 140px;
                border-radius: 60px;
                display: block;
                margin: 0 auto;
                line-height: 140px;
                text-align: center;
                font-size: 40px;
                font-weight: 800;
                color: #000000;
            }
        }
    }
}
</style>
