<template>
  <div class="wrapper">
      <div class="bg-box">
        <img style="width:100%;height:100%" src="@/assets/BG.png" alt="">
      </div>
      <div class="nav">
          <img src="@/assets/tietieren.png" alt="">
      </div>
      <div class="zhan-box">
          <img class="zhanshi" src="@/assets/zhanshitai.png" alt="">
          <div class="curr_attire_img-box">
            <img class="curr_attire_img" :src="active.activeImg" alt="">
          </div>
      </div>
      <div class="btn-box">
          <div class="right-box" @click="goOpen()">
              <img src="@/assets/btn4.png" alt="">
              <div class="right-text-box">
                <span>上传</span>
              </div>
          </div>
          <div class="left-box" @click="goRoom()">
              <img src="@/assets/btn4-1.png" alt="">
              <div class="left-text-box">
                <span>分享我的贴贴人</span>
              </div>
          </div>
      </div>
        <van-popup v-model="newShow" class="new-pop">
            <div class="content">
                <div class="new-img">
                    <div class="content2">
                        <p>
                            {{userinfo.configs.upload_ok_msg}}
                        </p>
                        <div class="go-text">现在就去直播间看看</div>
                        <div  class="list-all">
                            <div v-for="(item,index) in list" :key="index" class="list-box" @click="href(item.url)">
                                <img :src="item.img" alt="">
                                <div>{{item.name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="new-clone">
                <img src="@/assets/new-clone.png" alt="" @click="newClone()">
            </div>
        </van-popup>
  </div>
</template>

<script>
import overlay from '@/components/Overlay.vue'
export default {
   components: {
       overlay
   },
   props: {},
   data() {
       return {
           show:false,
           newShow:false,
           list:[],
           active:{},
           userinfo:{},
       };
   },
   watch: {
   },
   computed: {},
   methods: {
       goRoom(){
           this.$router.push({
                path:'/share',
                // query: {activeImg:this.active.activeImg}
            })
       },
       href(url) {
           window.open(url,'_blank');
       },
       newClone(){
           this.newShow = false
       },
       goOpen(){
            this.$api.postUploadAPI().then(res => {
                if(res.data.errno == 10000){
                    this.newShow = true
                    this.list = res.data.data
                }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)
            })
       },
       showClose(val){
           this.show = val
       },
       pop(){
           this.show = true
       },
   },
   created() {
       this.userinfo = localStorage.getItem("userinfo") ? JSON.parse(localStorage.getItem("userinfo")) : {}
   },
   mounted() {
       this.active = localStorage.getItem('active') ? JSON.parse(localStorage.getItem('active')) : {}
       console.log(this.active)
   }
};
</script>
<style scoped lang="scss">
.wrapper{
    width: 750px;
    height: 100%;
    position: relative;
    .bg-box{
        position: fixed;
        width: 750px;
        height: 100%;
    }

    .title{
        margin-top: 20px;
        position: absolute;
        z-index: 1;
        display: flex;
        justify-content: space-around;
        padding-left: 51px;
        .left-quan{
            width: 310px;
            height: 72px;
            background: #000000;
            border: 1px solid #FFFFFF;
            border-radius: 36px;
            margin-right: 28px;
            display: flex;
            align-items: center;
            .left-name{
                font-size: 24px;
                
                font-weight: 500;
                color: #FFFFFF;
                text-align: right;
                margin-right: 15px;
                width: 78px;
            }
            .left-num{
                width: 132px;
                font-size: 40px;
                font-weight: 400;
                color: #FFFFFF;
                margin-right: 14px;
            }
            .quan{
                width: 72px;
                height: 72px;
            }
        }
        .right-zhi{
            width: 310px;
            height: 72px;
            background: #000000;
            border: 1px solid #FFFFFF;
            border-radius: 36px;
            display: flex;
            align-items: center;
            .right-name{
                font-size: 24px;
                
                font-weight: 500;
                color: #FFFFFF;
                margin-left: 31px;
                margin-right: 15px;
            }
            .right-num{
                font-size: 40px;
                font-weight: 400;
                color: #FFFFFF;
                margin-right: 14px;
            }
        }
    }
    .nav{
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 53px;
        img{
            display: block;
            margin: 0 auto;
            width: 627px;
            left: 0;
        }
    }
    .zhan-box{
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 172px;
        .zhanshi{
            width: 688px;
            display: block;
            margin: 0 auto;
        }
        .curr_attire_img-box{
            position: absolute;
            // bottom: 200px;
            top: 0;
            width: 100%;
            .curr_attire_img{
                margin: 0 auto;
                display: block;
                width: 620px;
                height: auto;
                border-radius: 50%;
            }
        }
        .new-box{
            top: 440px;
            right: 8px;
            position: absolute;
            display: flex;
            .new{
                width: 185px;
            }
            .text{
                position: absolute;
                left: 57px;
                top: 41px;
                font-size: 36px;
                
                font-weight: 800;
                color: #FFFFFF;
            }
            
        }
        
    }
    .btn-box{
        position: absolute;
        z-index: 9;
        width: 100%;
        top: 887px;
        .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;
                }
            }
        }
    }
    .long-box{
        position: absolute;
        z-index: 1;
        display: flex;
        justify-content: space-around;
        width: 100%;
        top: 1227px;
        img{
            width: 460px;
            display: block;
            margin: 0 auto;
        }
        span{
            position: absolute;
            display: block;
            margin: 23px auto;
            text-align: center;
            font-size: 36px;
            
            font-weight: 800;
            color: #FFFFFF;
        }
    }
    .new-pop{
        width: 640px;
        border-radius: 70px;
        text-align: center;
        background: rgba(0,0,0,.7);
        .content{
            padding-top: 69px;
            padding-bottom: 65px;
            width: 640px;
            background: #FFFFFF;
            border-radius: 70px;
            font-size: 40px;
            
            font-weight: 800;
            color: #000000;
            .new-img{
                overflow: auto;
                margin: 0 auto;
                .content2{
                    padding: 0 80px;
                }
                .go-text{
                    font-size: 30px;
                    
                    font-weight: 800;
                    color: #000000;
                    margin: 0 auto;
                }
                .list-all{
                    margin: 19px auto;
                    width: 370px;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    .list-box{
                        width: 170px;
                        img{
                            width: 170px;
                        }
                        div{
                            padding: 0;
                            text-align: center;
                            font-size: 24px;
                            
                            font-weight: 500;
                            color: #000000;
                            margin-bottom: 22px;
                        }
                    }
                }
                
            }
        }
        .new-clone{
            img{
                width: 66px;
                height: 136px;
            }
        }
    }
}
</style>