<template>
  <div class="wrapper">
      <div>
            <div class="bg-box">
                <img style="width:100%;height:100%" src="@/assets/BG.png" alt="">
            </div>
            <ticket></ticket>
            <div class="nav">
                <img src="@/assets/gongxi.png" alt="">
            </div>
            <div v-if="boxList.length==1">
                <div v-for="(item,index) in boxList" class="all" :key="index">
                    <div class="zhan-box">
                        <img class="zhanshi" src="@/assets/panzi.png" alt="">
                        <div class="goods-box">
                            <img class="goods" :src="item.img_1" alt="">
                        </div>
                    </div>
                    <div class="retrieve1" v-if="item.is_retrieve == 1">
                            <div class="h1">已拥有</div>
                            <div class="h2">将返还贴纸</div>
                            <div class="num">{{item.retrieve_paster}}</div>
                        </div>
                    <div class="goods-name">{{item.name}}</div>
                    <div class="new-box-1-0" v-if="item.level =='SSR'">
                        <img class="new" src="@/assets/SSR.png" alt="">
                    </div>
                    <div class="new-box-1-1" v-else-if="item.level =='SR'">
                        <img class="new" src="@/assets/SR.png" alt="">
                    </div>
                    <div class="new-box-1-2" v-else-if="item.level =='N'">
                        <img class="new" src="@/assets/N.png" alt="">
                    </div>
                    <div class="new-box-1-2" v-else-if="item.level =='R'">
                        <img class="new" src="@/assets/R.png" alt="">
                    </div>
                </div>
            </div>
            <div class="zhan-box1" v-else>
                <div v-for="(item,index) in boxList" class="all" :key="index">
                    <img class="zhanshi" :src="item.img_1" alt="">
                    <div class="retrieve" v-if="item.is_retrieve == 1">
                        <div class="h1">已拥有</div>
                        <div class="h2">将返还贴纸</div>
                        <div class="num">{{item.retrieve_paster}}</div>
                    </div>
                    <div class="goods-name1">{{item.name}}</div>    
                    <div class="new-box" v-if="item.level =='SSR'">
                        <img class="new" src="@/assets/SSR.png" alt="">
                    </div>
                    <div class="new-box1" v-else-if="item.level =='SR'">
                        <img class="new" src="@/assets/SR.png" alt="">
                    </div>
                    <div class="new-box2" v-else-if="item.level =='N'">
                        <img class="new" src="@/assets/N.png" alt="">
                    </div>
                    <div class="new-box2" v-else-if="item.level =='R'">
                        <img class="new" src="@/assets/R.png" alt="">
                    </div>
                </div>
            </div>

            <div class="btn-box">
                <div class="left-box" @click="goOpen(1)">
                    <img src="@/assets/left-btn.png" alt="">
                    <span>再开<br />1个礼盒</span>
                </div>
                <div class="right-box" @click="goOpen(5)">
                    <img src="@/assets/right-btn.png" alt="">
                    <span>再开<br />5个礼盒</span>
                </div>
            </div>
            <div class="long-box" @click="goRoom">
                <img src="@/assets/long-btn.png" alt="">
                <span>去试衣间</span>
            </div>
      </div>

      <van-popup v-model="newShow" class="new-pop">
        <div class="content">
            换装教程
            <div class="new-img">
                <img src="" alt="">
            </div>
        </div>
        <div class="new-clone"><img src="@/assets/new-clone.png" alt="" @click="newClone()"></div>
      </van-popup>

      <van-popup v-model="conversionStatus" class="duihuan-pop">
        <div class="duihuan-title">
            <div>消耗礼券 {{num}}张</div> 
            <p>兑换后礼券 {{(saveLogoStatus.coupon - num)<0 ? 0 : saveLogoStatus.coupon - num}}</p>
        </div>
        
        <div class="duihuan-btn-box">
            <p class="btn-quxiao" @click="conversionQuxiao">取消</p>
            <p class="btn-queding-box" @click="conversionOk">
                <img class="btn-queding" src="@/assets/right-btn.png" alt="">
                <span class="btn-queding-text">确定</span>
            </p>
        </div>
    </van-popup>
    <!-- <div v-if="drawStatus" @click="drawStatus=false">
        <draw></draw>
    </div> -->
  </div>
</template>

<script>
import ticket from '@/components/ticket.vue'
import overlay from '@/components/Overlay.vue'
import draw from '@/components/draw.vue'

export default {
   components: {
       overlay,
       ticket,
       draw
   },
   inject:['reload'],
   props: {},
   data() {
       return {
           num:1,
           show:false,
           newShow:false,
           boxList:[],
           conversionStatus:false,
           saveLogoStatus:{},
           drawStatus:true,
       };
   },
   watch: {
   },
   computed: {},
   methods: {
      getOpen(){
          let data = {
              num:this.num
          }
        //   this.drawStatus= true
          this.$api.postBoxOpenAPI(data).then(res => {
                if(res.data.errno == 10000){
                    this.boxList = res.data.data
                    localStorage.setItem('boxList',JSON.stringify(this.boxList))
                    this.$api.getUserinfoAPI().then(res => {
                        if(res.data.errno == 10000){
                            localStorage.setItem('userinfo',JSON.stringify(res.data.data))
                            this.saveLogoStatus = res.data.data
                            this.reload();
                        }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)
                    })
                }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)
              return
          })
      },
       goOpen(num){
           this.saveLogoStatus = window.localStorage.getItem('userinfo') ? JSON.parse(window.localStorage.getItem('userinfo')) : {}
           this.num = num
           this.conversionStatus = true
       },
       conversionQuxiao(){
           this.conversionStatus = false
       },
       conversionOk(){
            this.getOpen()
            this.conversionStatus = false
       },
       showClose(val){
           this.show = val
       },
       pop(){
           this.show = true
       },
       newPop(){
           this.newShow = true
       },
       newClone(){
           this.newShow = false
       },
       goRoom(){
           this.$router.push({
                path:'/fittingRoom',
            })
       },
   },
   created() {
   },
   mounted() {
        this.saveLogoStatus = window.localStorage.getItem('userinfo') ? JSON.parse(window.localStorage.getItem('userinfo')) : {}
        this.boxList = window.localStorage.getItem('boxList') ?  JSON.parse(window.localStorage.getItem('boxList')) : []
        this.num = this.boxList.length
   }
};
</script>
<style scoped lang="scss">
.wrapper{
    width: 750px;
    position: relative;
    .bg-box{
        position: absolute;
        height: 100vh;
        width: 100vw;
    }
    .nav{
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 169px;
        img{
            display: block;
            margin: 0 auto;
            width: 627px;
            left: 0;
        }
    }
    .retrieve1 {
        position: relative;
        background: #9E93FF;
        opacity: 0.8;
        border-radius: 50%;
        width: 540px;
        height: 540px;
        margin: 0 auto;
        top: 276px;
        left: 0;
        text-align: center;
        color: #000000;
        z-index: 3;
        .h1 {
            font-size: 60px;
            font-weight: 550;
            height: 70px;
            letter-spacing: 2px;
            padding-top: 170px;
        }
        .h2 {
            font-size: 56px;
            font-weight: 500;
            height: 66px;
            letter-spacing: 2px;
        }
        .num {
            font-size: 60px;
            font-weight: 400;
            height: 60px;
            letter-spacing: 2px;
            font-family: DIN Black;
        }
        
    }
    .zhan-box{
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 276px;
        
        .goods-box{
          position: absolute;
          width: 100%;
          bottom: 57px;
          .goods{
            display: block;
            margin: 0 auto;
            width: 534px;
            height: auto;
          }
        }
        .zhanshi{
            width: 540px;
            display: block;
            margin: 0 auto;
        }
    }
    .new-box-1-0{
        right: 124px;
        position: absolute;
        z-index: 1;
        top: 726px;
        .new{
            width: 249px;
        }
    }
    .new-box-1-1{
        z-index: 2;
        right: 165px;
        position: absolute;
        top: 726px;
        .new{
            width: 167px;
        }
    }
    .new-box-1-2{
        right: 206px;
        position: absolute;
        z-index: 3;
        top: 726px;
        .new{
            width: 85px;
        }
    }
    .zhan-box1{
        position: relative;
        z-index: 1;
        top: 340px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 580px;
        margin: 0 auto;
        .all:first-child{
            margin-left: 0;
        }
        .all{
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: #000000;
            border: 1px solid #FFFFFF;
            margin: 0 5px 50px;
            position: relative;
            .retrieve {
                position: absolute;
                background: #9E93FF;
                opacity: 0.8;
                border-radius: 50%;
                width: 183px;
                height: 183px;
                top: -1px;
                left: -2px;
                text-align: center;
                color: #000000;
                .h1 {
                    font-size: 40px;
                    font-weight: 550;
                    height: 45px;
                    letter-spacing: 2px;
                    margin-top: 30px;
                }
                .h2 {
                    font-size: 24px;
                    font-weight: 500;
                    height: 28px;
                    letter-spacing: 2px;
                }
                .num {
                    font-size: 40px;
                    font-weight: 400;
                    height: 29px;
                    letter-spacing: 2px;
                    font-family: DIN Black;
                }
                
            }
        }
        .zhanshi{
            margin: 8px;
            border-radius: 50%;
            display: block;
            width: 164px;
            height: 164px;
        }
        .goods-name1{
            font-size: 24px;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
            padding-top: 10px;
            letter-spacing: 2px;
        }
        .new-box{
            right: 124px;
            position: absolute;
            z-index: 1;
            left: 80px;
            bottom: 0px;
            .new{
                width: 100px;
                height: 31px;
            }
        }
        .new-box1{
            z-index: 2;
            right: 165px;
            position: absolute;
            left: 110px;
            bottom: 0px;
            .new{
                width: 68px;
                height: 31px;
            }
        }
        .new-box2{
            position: absolute;
            z-index: 3;
            bottom: 0px;
            left: 125px;
            .new{
                width: 34px;
                height: 31px;
            }
        }
    }
    .goods-name{
        position: absolute;
        top: 830px;
        z-index: 1;
        font-size: 36px;
        font-weight: 500;
        color: #FFFFFF;
        width: 100%;
        text-align: center;
        letter-spacing: 2px;
    }
    .btn-box{
        position: absolute;
        display: flex;
        justify-content: space-between;
        margin: 0 66px;
        width: 618px;
        top: 923px;
        .left-box{
            width: 300px;
            img{
                margin: 0 auto;
                display: block;
                width: 300px;
            }
            span{
                width: 300px;
                position: absolute;
                text-align: center;
                top: 30px;
                font-size: 36px;
                font-weight: 800;
                color: #FFFFFF;
                letter-spacing: 2px;
                line-height: 40px;
            }
        }
        .right-box{
            width: 300px;
            img{
                margin: 0 auto;
                display: block;
                width: 300px;
            }
            span{
                width: 300px;
                position: absolute;
                text-align: center;
                top: 30px;
                font-size: 36px;
                font-weight: 800;
                color: #000000;
                letter-spacing: 2px;
                line-height: 40px;
            }
        }
    }
    .long-box{
        position: absolute;
        z-index: 1;
        display: flex;
        justify-content: space-around;
        width: 100%;
        top: 1114px;
        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;
            letter-spacing: 2px;
        }
    }
    .new-pop{
        width: 640px;
        border-radius: 70px;
        text-align: center;
        background: rgba(0,0,0,.7);
        .content{
            padding-top: 50px;
            padding-bottom: 39px;
            width: 640px;
            background: #FFFFFF;
            border-radius: 70px;
            font-size: 40px;
            font-weight: 800;
            color: #000000;
            .new-img{
                height: 660px;
                overflow: auto;
                margin: 39px auto;
                img{
                    width: 552px;
                    height: 660px;
                    background: #BFBFBF;
                }
            }
        }
        .new-clone{
            img{
                width: 66px;
                height: 136px;
            }
        }
    }
    .duihuan-pop{
            width: 600px;
            height: 400px;
            background: #FFFFFF;
            border-radius: 70px;
            text-align: center;
            .duihuan-title{
                div{
                    margin-top: 99px;
                    font-size: 40px;
                    font-weight: 800;
                    color: #000000;
                    line-height: 60px;
                    letter-spacing: 2px;
                }
                p{
                    font-size: 30px;
                    font-weight: 500;
                    color: #000000;
                    line-height: 30px;
                    margin-bottom: 65px;
                    letter-spacing: 2px;
                }
            }
            .duihuan-btn-box{
                // margin-top: 65px;
                height: 56px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding:0 70px;
                .btn-quxiao{
                    width: 220px;
                    height: 100px;
                    background: #000000;
                    border-radius: 50px;
                    text-align: center;
                    font-size: 36px;
                    font-weight: 800;
                    color: #FFFFFF;
                    line-height: 100px;
                }
                .btn-queding-box{
                    // position: relative;
                    width: 220px;
                    height: 100px;
                    border-radius: 50px;
                    .btn-queding{
                        // position: absolute;
                        width: 220px;
                        height: 100px;
                    }
                    .btn-queding-text{
                        right: 140px;
                        text-align: center;
                        position: absolute;
                        font-size: 36px;
                        font-weight: 800;
                        // color: #FFFFFF;
                        line-height: 100px;
                        z-index: 1;
                    }
                }
                
            }
            
        }
}
</style>