<template>
  <div class="wrapper">
      <div class="bg-box">
        <img style="width:100%;height:100%" src="@/assets/BG.png" alt="">
      </div>
      <ticket></ticket>

      <div class="nav">
          <img src="@/assets/box.png" alt="">
      </div>
      <div class="zhan-box">
          <div class="new-box">
            <img class="new" src="@/assets/baohan.png" alt="">
            <span class="text" @click="newPop()">包含<br />礼物</span>
          </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(2)">
              <img src="@/assets/right-btn.png" alt="">
              <span>打开<br />5个礼盒</span>
          </div>
      </div>
      <van-popup v-model="newShow" class="new-pop">
        <div class="content">
            {{tabStatus ? '可能出现的礼物' : '概率公示'}}
            <div class="new-img">
                <div v-if="tabStatus" class="content1">
                    <div v-for="(item,index) in boxList" :key="index" class="list">
                        <div class="top1">
                            <div class="cir">
                                <img class="img-pop" :src="item.img_1" alt="">
                            </div>
                            <img v-if="item.level=='R'" class="R" src="@/assets/R.png" alt="">
                            <img v-if="item.level=='SR'" class="SR" src="@/assets/SR.png" alt="">
                            <img v-if="item.level=='SSR'" class="SSR" src="@/assets/SSR.png" alt="">
                            <img v-if="item.level=='N'" class="N" src="@/assets/N.png" alt="">
                        </div>
                        <div class="top2">{{item.name}}</div>
                    </div>
                </div>
                <div v-else class="content2">
                    <div>
                        <div>当前奖池包含礼盒概率</div>    
                        <div>※基础说明※</div> 
                        <div>【SSR】 {{percent_data.levelPercent.SSR}} 【SR】{{percent_data.levelPercent.SR}}【R】{{percent_data.levelPercent.R}} 【N】{{percent_data.levelPercent.N}}</div>    
                        <div style="margin-top:10px">※保底说明※</div>
                        <div>连续开【{{percent_data.hitCnt}}】个礼盒，必出一款SSR</div>
                        <div style="margin-top:10px">※详细说明※</div>
                        <div style="margin-top:5px">
                            <table width="100%" border="1" cellpadding="5" v-for="(item,index) in percent_data.levels" :key="index" cellspacing="0" align="center">
                                <tr class="tr-1"><th colspan="2">{{item.level_name}} 级别概率：{{item.percent}}</th></tr>
                                <tr><td>物品名</td> <td>当前级别下概率</td></tr>
                                <tr v-for="(v,idx) in item.relations" :key="idx">  <td style="width:100px">{{v.name}}</td> <td>1/{{item.relations.length}}</td></tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="new-clone">
            <img src="@/assets/new-clone.png" alt="" @click="newClone()">
            <span @click="tab">概率公示</span>
        </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>
</template>

<script>
import ticket from '@/components/ticket.vue'
import overlay from '@/components/Overlay.vue'
export default {
   components: {
       overlay,
       ticket,
   },
   props: {},
   data() {
       return {
           show:false,
           newShow:false,
           tabStatus:true,
           conversionStatus:false,
           num:0,
           saveLogoStatus:{},
           boxList:[]
       };
   },
   watch: {
   },
   computed: {},
   methods: {
       getBoxList(){
            this.$api.getBoxGiftsAPI().then(res => {
                if(res.data.errno == 10000){
                    this.boxList = res.data.data
                    this.percent_data = res.data.percent_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)
            })
       },
       logo(){
            this.$router.push({
                path:'/home',
            })
       },
       showClose(val){
           this.show = val
       },
       pop(){
           this.show = true
       },
       newPop(){
           this.newShow = true
       },
       newClone(){
           this.newShow = false
       },
       tab(){
           this.tabStatus = !this.tabStatus
       },
       conversionQuxiao(){
           this.conversionStatus = false
       },
       goOpen(type){
           this.conversionStatus = true
           if(type==1){
                this.num = 1
           }else{
                this.num = 5
           }
       },
       conversionOk(){
            this.getOpen()
       },
        getOpen(num){
            let data = {
                num:this.num
            }
            this.$api.postBoxOpenAPI(data).then(res => {
                if(res.data.errno == 10000){
                        this.boxList = res.data.data
                        this.$api.getUserinfoAPI().then(res => {
                            if(res.data.errno == 10000){
                                localStorage.setItem('userinfo',JSON.stringify(res.data.data))
                                localStorage.setItem('boxList',JSON.stringify(this.boxList))
                                this.saveLogoStatus = res.data.data
                                this.$router.push({
                                    path:'/giftBoxFive',
                                    // query: {boxList:JSON.stringify(this.boxList)}
                                })
                            }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)
            })
        },
   },
   created() {},
   mounted() {
    this.saveLogoStatus = window.localStorage.getItem('userinfo') ? JSON.parse(window.localStorage.getItem('userinfo')) : {}
    this.getBoxList()
   }
};
</script>
<style scoped lang="scss">
.wrapper{
    width: 750px;
    height: 100%;
    position: fixed;
    .bg-box{
        height: 100%;
        width: 100%;
        position: absolute;
    }
    .nav{
        position: absolute;
        z-index: 1;
        top: 103px;
        background-image: url("../assets/xuanchuan.png");
        width: 660px;
        height: 802px;
        left: 45px;
        background-size: cover;
        img{
            display: block;
            margin: 52px auto 0;
            width: 560px;
            height: 700px;
            border-radius: 15px;
        }
    }
    .zhan-box{
        position: absolute;
        z-index: 1;
        width: 100%;
        top: 627px;
        .zhanshi{
            width: 688px;
            display: block;
            margin: 0 auto;
        }
        .new-box{
            right: 41px;
            position: absolute;
            display: flex;
            .new{
                width: 185px;
                height: 185px;
            }
            .text{
                position: absolute;
                left: 57px;
                top: 47px;
                font-size: 36px;
                font-weight: 800;
                color: #FFFFFF;
                letter-spacing: 4px;
                line-height: 43px;
            }
            
        }
        
    }
    .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;
            }
        }
    }
    .new-pop{
        width: 640px;
        border-radius: 70px;
        text-align: center;
        background: rgba(0,0,0,.7);
        .content{
            padding-top: 45px;
            padding-bottom: 40px;
            width: 640px;
            background: #FFFFFF;
            border-radius: 70px;
            font-size: 40px;
            font-weight: 800;
            color: #000000;
            .new-img{
                height: 660px;
                overflow: auto;
                margin: 25px auto 0px;
                padding:0 38px;
                .content1{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    .list {
                        margin:0;
                        position: relative;
                        .top1 {
                            width: 180px;
                            height: 180px;
                            background: #FFFFFF;
                            border: 1px solid #EEEEEE;
                            border-radius: 50%;
                            .cir {
                                width: 164px;
                                height: 164px;
                                background: #EEEEEE;
                                border-radius: 50%; 
                                margin: 8px;
                                .img-pop {
                                    position: absolute;
                                    width: 162px;
                                    height: 162px;
                                    top: 0;
                                    left: 9px;
                                }
                            }
                            .R{
                                position: absolute;
                                right: 20px;
                                top: 142px;
                                width: 34px;
                            }
                            .N{
                                position: absolute;
                                right: 20px;
                                top: 142px;
                                width: 34px;
                            }
                            .SR{
                                position: absolute;
                                right: 10px;
                                top: 142px;
                                width: 67px;
                            }
                            .SSR{
                                position: absolute;
                                top: 142px;
                                right: 10px;
                                width: 100px;
                            }
                        }
                        .top2 {
                            display: block;
                            text-align: center;
                            font-size: 24px;
                            font-weight: 500;
                            color: #000000;
                            padding-bottom: 9px; 
                            margin-top: 10px;   
                        }
                    }
                    
                    // div:nth-child(3n+3){
                    //     margin: 0 !important;
                    // }
                }
                .content1:after {
                        content: "";
                        width: 180px;
                        height: 0px;
                        visibility: hidden;
                    }
                .content2{
                    text-align: left;
                    height: 800px;
                    font-size: 24px;
                    font-weight: 500;
                    color: #000000;
                    line-height: 36px;
                    table{
                        tr{
                            text-align: center;
                        }
                        border: 1px solid #000000;
                        .tr-1{
                            text-align: center;
                            background: #000000;
                            color: #FFFFFF;
                            th{
                                height: 60px;
                            }
                        }
                    }
                }
            }
        }
        .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;
            }
        }
    }
    .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>