<template>
  <div class="wrapper">
      <ticket></ticket>
      <div class="box">
          <div class="btn1-box">
            <img class="btn1" src="@/assets/btn1.png" alt="">
            <div class="btn-text-box" @click="exchangeLB()">
                <span class="btn-text">兑换礼包</span>
            </div>
          </div>
          <div class="btn2-box">
            <img class="btn1" src="@/assets/btn1.png" alt="">
                <div class="btn-text-box" @click="exchangeTZ()">
                    <span class="btn-text">贴纸商店</span>
                </div>
          </div>
          <div class="btn3-box">
            <img class="btn1" src="@/assets/btn1-1.png" alt="">
            <div class="btn-text-box" @click="exchangeLQ()">
                <span class="btn-text">获取更多礼券</span>
            </div>
          </div>
          <div class="wen-box">
              <img class="wen" src="@/assets/wen.png" alt="" @click="rule()">
              <span class="wen-text">礼券获取规则</span>
          </div>

            <van-popup v-model="ruleShow" class="rule-pop">
                <div class="content">
                    礼券获取规则
                    <div class="new-img">
                        <div class="content2">
                            <p>
                                {{textContent.pop_desc}}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="new-clone">
                    <img src="@/assets/new-clone.png" alt="" @click="ruleClone()">
                </div>
            </van-popup>
      </div>
      <van-popup v-model="money" class="new-pop" v-if="postPackList1">
        <div class="content-null" v-if="!active.name">
            <div class="pop-content1">
                <div v-for="(item,index) in postPackList1" :key="index" class="pack-item1" @click="packChange1(item,index)">
                    {{item.name}}
                </div>
            </div>
            <div class="null-ok" @click="newClone()">取消</div>
        </div>
        <div class="content" v-else>
            <div class="pop-title" @click="selectChange">
                <div>{{active.name ? active.name : '点击切换礼包'}}</div>
                <img src="@/assets/xiala.png" alt="">
            </div>
            <div class="pop-content" v-if="selectStatus">
                <div v-for="(item,index) in postPackList" :key="index" class="pack-item" @click="packChange(item)" :class="active.name == item.name ? 'active' : ''">
                    {{item.name}}
                </div>
            </div>
            <div class="pic-box">
                <img v-if="active.img" class="pic-img" :src="active.img" alt="">
                <img v-else class="pic-img" src="@/assets/baipi.png" alt="">
                <div class="dui-box" v-if="active.is_exchange==1">
                    <img class="pic-dui" src="@/assets/duihuan.png" alt="">
                    <span class="pic-dui-text">已兑换</span>
                </div>
                
            </div>
            <div class="pic-box-content">
                <div class="pic-name">
                    {{active.name== '点击切换礼包' ? '' : active.name}}
                </div>
                <div class="pic-tag">
                    {{active.info}}
                </div>
            </div>
            <div class="pic-dec">
                <span>
                    <span class="a">任务说明： </span> 
                    <span class="b" v-if="!active.exchage_info"> 请前往<span class="c">{{active.name== '点击切换礼包' ? '' : active.name}}直播间</span>，佩戴兑换礼包对应<span class="c">粉丝牌</span>，发送<span class="c">任意弹幕</span>，如账号身份满足对应兑换要求（粉丝牌1级以上），即可获得礼包。</span></span>
                    <span class="b" v-if="active.exchage_info" v-html="active.exchage_info"></span>
            </div>
            <div class="btn-box" v-if="active.is_exchange==0">
                <div class="left-box" @click="newClone()">
                    <span>取消</span>
                </div>
                <div class="right-box" @click="goOpen()">
                    <img src="@/assets/btn5.png" alt="">
                    <span>兑换</span>
                </div>
            </div>
            <div class="btn-box" v-if="active.is_exchange==1" style="justify-content: center;">
                <div class="left-box" @click="newClone()">
                    <span>确定</span>
                </div>
            </div>
        </div>
      </van-popup>
  </div>
</template>

<script>
import ticket from '@/components/ticket.vue'
export default {
   components: {
       ticket
   },
   props: {},
   data() {
       return {
           ruleShow:false,
           money:false,
           select:true,
           selectStatus:false,
           postPackList:[],
           postPackList1:[],
           active:{},
           textContent:{},
       };
   },
   watch: {
   },
   computed: {},
   methods: {
       exchangeLB(){
           console.log('兑换礼包')
           this.postPack()
           this.active ={}
           this.money = true
       },
       exchangeTZ(){
            this.$router.push({
                path:'/pasterStore',
            })
           
       },
       exchangeLQ(){
           console.log('兑换礼券')
            this.$router.push({
                path:'/moreGift',
            })
       },
       rule(){
           this.ruleShow = true
       },
       coupon(){
            this.$api.postCouponAPI().then(res => {
                console.log(res)
                if(res.data.errno == 10000){
                   this.textContent = 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)
            })
        },
       ruleClone(){
           this.ruleShow = false 
       },
       newClone(){
            this.money = false
       },
       goOpen(){
           if(!this.active.id){
                this.$toast.fail('请选择礼包')
                return
           }
            let params = {
                id:this.active.id
            }
            this.$api.postPackExchangeAPI(params).then(res => {
                if(res.data.errno == 10000){
                    this.$customToast('<span style="font-size:24px">兑换成功</span><br />'+res.data.errmsg)
                    // this.$toast.success('兑换成功,快去试衣间装扮一下吧~')
                    this.money = false
                    this.active ={}
                }else if(res.data.errno == 20000){
                    this.$toast.fail('登录已失效,请重新登录！')
                    localStorage.removeItem('userinfo')
                    this.$router.push(
                        {path: '/'},
                    )
                }else{
                    this.$customToast('<span style="font-size:24px">兑换失败</span><br />'+res.data.errmsg)
                    // this.$toast.fail(res.data.errmsg)
                }
                
            }).catch(err => {
                console.log(err)
            })
       },
       selectChange(){
           this.selectStatus = true
       },
       packChange(item){
           console.log(item)
           if(item.id == 0){
               return
           }
            this.selectStatus=false
            this.active = item
       },
       packChange1(item,index){
            this.selectStatus=false
            this.active = item
       },
        postPack(){
            this.$api.postPackListAPI().then(res => {
                if(res.data.errno == 10000){
                   this.postPackList = res.data.data
                   this.postPackList1 = JSON.parse(JSON.stringify(this.postPackList))
                   this.postPackList1.unshift({
                        id: 0,
                        name: "点击切换礼包",
                   })
                }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.coupon()
    },
};
</script>
<style scoped lang="scss">
.wrapper{
    width: 750px;
    position:fixed;
    height:calc(100% + 55px);
    min-width: 750px;
    .box{
        display: block;
        background: url('../assets/BG.png');
        background-repeat: no-repeat;
        background-size:100% calc(100% + 55px);
        width: 100%;
        height:calc(100% + 55px);
        .btn1-box{
            position: relative;
            width: 750px;
            padding-top: 255px;
            .btn1{
                width: 460px;
                height: 140px;
                display: block;
                margin: 0 auto;
            }
            .btn-text-box{
                top: 255px;
                height: 140px;
                line-height: 140px;
                position: absolute;
                width: 100%;
                text-align: center;
                .btn-text{
                    border-radius: 70px;
                    margin: 0 auto;
                    width: 460px;
                    height: 140px;
                    display: block;
                    font-size: 36px;
                    font-weight: 800;
                    color: #000000;
                    letter-spacing: 2px;
                }
            }

        }
        .btn2-box{
            position: relative;
            width: 750px;
            margin-top: 50px;
            .btn1{
                width: 460px;
                height: 140px;
                display: block;
                margin: 0 auto;
            }
            .btn-text-box{
                height: 140px;
                line-height: 140px;
                top: 0;
                position: absolute;
                width: 100%;
                text-align: center;
                .btn-text{
                    border-radius: 70px;
                    margin: 0 auto;
                    width: 460px;
                    height: 140px;
                    display: block;
                    font-size: 36px;
                    font-weight: 800;
                    color: #000000;
                    letter-spacing: 2px;
                }
            }
        }
        .btn3-box{
            position: relative;
            width: 750px;
            margin-top: 50px;
            .btn1{
                width: 460px;
                height: 140px;
                display: block;
                margin: 0 auto;
            }
            .btn-text-box{
                height: 140px;
                line-height: 140px;
                position: absolute;
                top: 0;
                width: 100%;
                text-align: center;
                .btn-text{
                    border-radius: 70px;
                    margin: 0 auto;
                    width: 460px;
                    height: 140px;
                    display: block;
                    font-size: 36px;
                    font-weight: 800;
                    color: #FFFFFF;
                    letter-spacing: 2px;
                }
            }
        }
        .wen-box{
            width: 750px;
            margin-top: 81px;
            text-align: center;
            position: relative;
            z-index: 99;
            .wen{
                width: 66px;
            }
            .wen-text{
                display: block;
                text-align: center;
                margin-top: 20px;
                font-size: 24px;
                font-weight: 800;
                color: #FFFFFF;
                letter-spacing: 2px;
            }
        }
        .rule-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;
                    padding:0 46px;
                    .content1{
                        height: 800px;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        p{
                            width: 164px;
                            height: 164px;
                            background: #D0D0D0;
                            border-radius: 50%;
                        }
                    }
                    .content2{
                        height: 800px;
                        p{
                            text-align: left;
                            text-indent: 2em;
                            font-size: 24px;
                            font-weight: 500;
                            color: #000000;
                            line-height: 36px;
                        }
                    }

                    
                }
            }
            .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;
                }
            }
        }
    }
    .new-pop{
        width: 600px;
        text-align: center;
        background: rgba(0,0,0,.7);
        .content-null{
            padding: 38px 0;
            border-radius: 70px;
            margin: 0 auto;
            background: #FFFFFF; 
            .pop-content1{
                margin: 0 auto;
                width: 462px;
                border: 2px solid #000000;
                border-radius: 34px;
                margin-bottom: 40px;
            }
            .null-ok{
                margin-top: 40px;
                width: 220px;
                height: 100px;
                background: #000000;
                margin: 0 auto;
                border-radius: 50px;
                font-size: 36px;
                font-weight: 800;
                color: #FFFFFF;
                line-height: 100px;
            }
            .pack-item1{
                height: 70px;
                font-size: 24px;
                font-weight: 500;
                color: #000000;
                line-height: 70px;
            }
            .pack-item1:first-child{
                height: 70px;
                font-size: 24px;
                font-weight: 500;
                color: #000000;
                line-height: 70px;
                opacity: 0.4;
            }
        }
        .content{
            padding: 38px 0;
            border-radius: 70px;
            margin: 0 auto;
            background: #FFFFFF;
            .pop-title{
                padding: 0 30px;
                justify-content: flex-end;
                align-items: center;
                display: flex;
                margin: 0 auto;
                width: 402px;
                height: 72px;
                border: 2px solid #000000;
                border-radius: 35px;
                div{
                    width: 100%;
                    font-size: 24px;
                    font-weight: 500;
                    color: #000000;
                }
                img{
                    width: 21px;
                    height: 12.5px;
                }
            }
            .pop-content{
                padding-top: 74px;
                z-index: 999;
                width: 462px;
                background: #FFFFFF;
                position: absolute;
                left: 69px;
                border: 2px solid #000000;
                opacity: 0.85;
                border-radius: 34px;
                margin: -74px auto;
                overflow: hidden;
                .pack-item{
                    background: #FFFFFF;
                    height: 70px;
                    font-size: 24px;
                    font-weight: 500;
                    color: #000000;
                    line-height: 70px;
                }
                .active{
                    background: #000000;
                    opacity: 0.6;
                    color: #FFFFFF;
                }
            }
            .pic-box{
                margin: 0 auto;
                margin-top: 19px;
                width: 280px;
                background: #EEEEEE;
                border-radius: 60px;
                position: relative;
                .pic-img{
                    margin-top: 18px;
                    width: 200px;
                    height: 224px;
                }
                .dui-box{
                    bottom: 0;
                    position: absolute;
                    .pic-dui{
                        bottom: 0;
                        position: absolute;
                        width: 280px;
                        left: 0;
                    }
                    .pic-dui-text{
                        display: block;
                        width: 280px;
                        height: 60px;
                        line-height: 60px;
                        z-index: 3;
                        position: relative;
                        font-size: 30px;
                        font-weight: 800;
                        color: #FFFFFF;
                    }
                }
            }
            .btn-box{
                display: flex;
                justify-content: space-between;
                margin: 0 66px;
                margin-top: 26px;
                .left-box{
                    width: 220px;
                    height: 100px;
                    background: #000000;
                    border-radius: 50px;
                    position: relative;
                    span{
                        border-radius: 50px;
                        position: absolute;
                        top: 0;
                        width: 220px;
                        left: 0;
                        display: inline-block;
                        line-height: 100px;
                        height: 100px;
                        font-size: 36px;
                        font-weight: 800;
                        color: #FFFFFF;
                    }
                }
                .right-box{
                    width: 220px;
                    position: relative;
                    img{
                        position: absolute;
                        display: block;
                        width: 220px;
                        height: 100px;
                    }
                    span{
                        width: 220px;
                        left: 0;
                        position: absolute;
                        text-align: center;
                        font-size: 36px;
                        letter-spacing: 2px;
                        font-weight: 800;
                        color: #000000;
                        line-height: 100px;
                    }
                }
            }
        }
        .pic-box-content{
            padding-top: 19px;
            .pic-name{
                width: 310px;
                font-size: 40px;
                font-weight: 800;
                color: #000000;
                text-align: center;
                margin: 0 auto;
            }
            .pic-tag{
                // margin-top: 19px;
                font-size: 24px;
                font-weight: 500;
                color: #000000;
            }
        }

        .pic-dec{
            margin-top: 30px;
            margin-left: 71px;
            width: 460px;
            color: #000000;
            line-height: 32px;
            text-align: left;
            .a{
                display: block;
                font-weight: 800;
                font-size: 24px;
            }
            .b{
                letter-spacing: 3px;
                font-size: 24px;
            }
            .c{
                color: #FF229F;
            }
        }
       
        .new-clone{
            img{
                width: 66px;
                height: 136px;
            }
        }
    }
}
</style>