<template>
  <div class="wrapper">
      <div class="box">
        <ticket></ticket>
          <div class="title">贴纸商店</div>
          <div class="paster-box">
            <div v-for="(item,index) in pasterList" :key="index" class="paster-list" @click="pasterChange(item)">
                <img class="paster-img" :src="item.img" alt="">
                <span class="paster-text" v-if="!item.limit">不可兑换</span>
                <div class="paster-name">
                    {{item.name}}
                    <span class="tags">剩余可兑换{{item.limit}}</span>
                </div>
                <div class="need">需要贴纸<span>{{item.cost}}</span></div>
            </div>
          </div>
      </div>
      <van-popup v-model="pasterStatus" class="pater-pop">
            <div class="new-img">
                <img :src="active.img" alt="">
            </div>
            <div class="goods">
                <div class="name">{{active.name}}</div>
                <div class="dic">{{active.info}}</div>
            </div>
            <div class="btns">
                <div class="box1" @click="reduce()">
                    <img src="@/assets/jian.png" alt="">
                </div>
                 <van-field v-model="num" type="digit" class="input-box" @blur="inputChange()" />
                <div class="box2" @click="add()">
                    <img src="@/assets/jia.png" alt="">
                </div>
            </div>
        <div class="bottom-btn">
            <div class="btn1" @click="cancel">取消</div>
            <div class="btn2" @click="confirm">兑换</div>
        </div>
      </van-popup>
  </div>
</template>

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

export default {
   components: {
       ticket
   },
   inject:['reload'],
   props: {},
   data() {
       return {
           pasterStatus:false,
           pasterList:[],
           num:1,
           active:{},
       };
   },
   watch: {
   },
   computed: {},
   methods: {
       reduce(){
           if(this.num == 1){
               this.$toast.fail('最小不能小于1');
               return
           }else{
                this.num = this.num-1
           }
       },
       add(){
            this.num = +this.num+1
       },
       inputChange(){
           console.log(this.num)
       },
       getGifts(){
            this.$api.getGiftsAPI().then(res => {
                if(res.data.errno == 10000){
                    this.pasterList = 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)
            })
       },
       pasterChange(item){
           this.num = 1
           if(item.limit){
                this.active = item
                this.pasterStatus = true
           }
       },
       cancel(){
           this.pasterStatus = false
       },
       confirm(){
           if(this.num >this.active.limit){
               this.$toast.fail('最大不能超出'+this.active.limit);
               return
           }
           let data = {
               id:this.active.id,
               num:this.num
           }
           this.$api.posTexchangeAPI(data).then(res => {
                if(res.data.errno == 10000){
                    this.$toast.success('兑换成功！')
                    this.pasterList.forEach(element => {
                        if(element.id == this.active.id){
                            element.limit = this.active.limit - this.num
                        }
                    });
                    let that = this
                    setTimeout(function() {
                        that.pasterStatus = false
                        that.reload()
                    }, 2000);
                    
                }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.getGifts()
    },
};
</script>
<style>
    .van-field__control{
        text-align: center !important;
    }
</style>
<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);
        .title{
            text-align: center;
            padding-top: 139px;
            padding-bottom: 33px;
            font-size: 40px;
            
            font-weight: 800;
            color: #FFFFFF;
        }
        .paster-box{
            display: flex;
            justify-content: space-between;
            padding: 0 78px;
            flex-wrap: wrap;
            .paster-list{
                background: url('../assets/ditu.png');
                width: 280px;
                height: 342px;
                background-repeat: no-repeat;
                background-size:100%;
                margin-bottom: 40px;
                position: relative;
                .paster-img{
                    width: 224px;
                    height: 224px;
                    display: block;
                    margin: 31px auto 25px;
                }
                .paster-text{
                    text-align: center;
                    line-height: 281px;
                    opacity: 0.5;
                    background: #4e4646;
                    border-radius: 30px;
                    position: absolute;
                    top: 0;
                    width: 280px;
                    height: 281px;
                    font-size: 50px;
                    left: 0;
                    z-index: 1;
                    
                    font-weight: 200;
                    color: #000000;
                     letter-spacing: 2px;
                }
                .paster-name{
                    width: 280px;
                    text-align: center;
                    bottom: 62px;
                    height: 94px;
                    position: absolute;
                    font-size: 36px;
                    line-height: 85px;
                    
                    font-weight: 800;
                    color: #000000;
                    letter-spacing: 2px;
                    background-image: url("../assets/white.png");
                    background-size: 100% 100%;
                    letter-spacing: 2px;
                    .tags{
                        display: block;
                        font-size: 18px;
                        text-align: center;
                        letter-spacing: 0.5px;
                        line-height: 18px;
                        margin-top: -15px;
                        position: relative;
                    }
                }
                .need{
                    width: 280px;
                    text-align: center;
                    font-size: 24px;
                    
                    font-weight: 500;
                    color: #FFFFFF;
                    letter-spacing: 2px;
                    line-height: 60px;
                }
            }
        }

    }
    .pater-pop{
        width: 600px;
        background: #FFFFFF;
        border-radius: 70px;
        text-align: center;
        .new-img{
            border-radius: 60px;
            width: 280px;
            height: 280px;
            background: #EEEEEE;
            display: block;
            margin: 0 auto;
            margin-top: 59px;
            img{
                width: 200px;
                height: 224px;
                margin: 28px 40px;
            }
        }
        .goods{
            width: 429px;
            margin: 20px auto;
            .name{
                font-size: 40px;
                
                font-weight: 800;
                color: #000000;
                
            }
            .dic{
                margin-top: 17px;
                letter-spacing: 2px;
                font-size: 24px;
                text-align: left;
                font-weight: 500;
                color: #000000;
            }
        }
        .btns{
            width: 202px;
            height: 62px;
            border-top: 2px solid #D0D0D0;
            border-bottom: 2px solid #D0D0D0;
            border-radius: 30px;
            margin:  0 auto;
            display: flex;
            justify-content: space-between;
            .box1{
                width: 62px;
                height: 62px;
                background: #CCCCCC;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                img{
                    width: 30px;
                }
            }
            .input-box{
                margin-top: 1px;
                height: 57px;
                width: 70px;
                border: none;
                font-size: 30px;
                font-weight: 400;
                color: #000000;
                padding: 0 !important;
                line-height: 62px;
            }
            .box2{
                width: 62px;
                height: 62px;
                background: #CCCCCC;
                border-radius: 50%;
                align-items: center;
                justify-content: center;
                display: flex;
                img{
                    width: 30px;
                }
            }
        }
        .bottom-btn{
            display: flex;
            justify-content: space-evenly;
            margin-top: 31px;
            margin-bottom: 50px;
            .btn1{
                width: 220px;
                height: 100px;
                background: #000000;
                border-radius: 50px;
                text-align: center;
                line-height: 100px;
                font-size: 36px;
                
                font-weight: 800;
                color: #FFFFFF;
            }
            .btn2{
                background: url('../assets/right-btn.png');
                background-size: 100%;
                background-repeat: no-repeat;
                width: 220px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                font-size: 36px;
                
                font-weight: 800;
                color: #000000;
            }
        }
    }
}
</style>