<template>
    <div class="gift">
        <div class="gift-list-wrapper">
            <div class="gift-list">
                <div class="gift-item-wrapper" v-for="(game,indexs) in giftGameList" :key="indexs">
                    <div class="gift-item">
                        <div class="gift-title">
                            <div class="title-start">
                                <img :src="game.imageUrl" alt="">
                            </div>
                            <div class="title-content">
                                <div class="content-top">
                                    <div class="top-title one-line">
                                        {{game.gameName}}
                                    </div>
                                    <div class="top-icon">
                                        <img src="/image/gift_icon3.png" alt="">
                                    </div>
                                </div>
                                <div class="content-bottom one-line">
                                    {{game.gameIntroduction}}
                                </div>
                            </div>
                            <div class="title-end">
                                <van-button round type="default" size="small" :url="game.downloadUrl" v-if="game.downloadUrl">立即下载</van-button>
                            </div>
                        </div>
                        <div class="gift-content" v-for="(gift,index) in game.giftList"
                             :class="{'enable':!hasReceiveGift.has(gift.id)}" v-if="index < 1 || game.show"
                             @click="gainCode(gift)" :key="index"
                        >
                            <div class="gift-content-wrapper">
                                <div class="gift-icon">
                                    <div class="icon">
                                        <i class="iconfont iconziyuan"
                                           style="display:block; font-size:.52rem; color:#FF7575"
                                           v-if="!hasReceiveGift.has(gift.id)"
                                        ></i>
                                        <i class="iconfont iconziyuan"
                                           style="display:block; font-size:.52rem; color:#989898"
                                           v-else
                                        ></i>
                                    </div>

                                    <div class="icon-title">
                                        {{gift.giftName}}
                                    </div>
                                </div>

                                <div class="gift-content-middle two-line">
                                    <div class="center-content two-line">
                                        {{gift.giftContent}}
                                    </div>

                                </div>
                                <div class="gift-content-right">{{hasReceiveGift.has(gift.id) ?
                                    "已领取" : "领取"}}
                                </div>
                            </div>

                            <div class="gift-content-bottom">
                                <van-progress
                                        :percentage="Math.ceil((gift.restAmount /(gift.restAmount+gift.amount))*100)"
                                        :show-pivot="showPivot" stroke-width="6" color="#ff7575"/>
                            </div>

                        </div>

                        <div class="gift-more" v-if="game.giftList.length > 1"
                             @click="game.show = !game.show">
                            <div class="more-content">
                                {{game.show ? '收起' : '更多礼包'}}({{game.giftList.length-1}})
                            </div>
                            <div class="more-icon" v-if="!game.show">
                                <i class="iconfont iconsort-down" style="display: block;color:#E35B07"></i>
                            </div>
                            <div class="more-icon reverse" v-else>
                                <i class="iconfont iconsort-down" style="display: block;color:#E35B07"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-dialog
                v-model="show"
                confirm-button-text="复制礼包码"
                messageAlign="right"
                closeOnClickOverlay
                @confirm="handelConform"
        >
            <div class="gift-wrapper">
                <h3 class="gift-title">
                    领取成功
                </h3>
                <p class="gift-name">
                    {{backInfo.giftName}}
                </p>
                <p class="gift-content">
                    {{backInfo.giftContent}}
                </p>
                <div class="gift-code">
                    礼包码：{{giftCode}}
                </div>
                <div class="gift-extra">
                    *每个账号只能领取一次，重复无效
                </div>
            </div>


        </van-dialog>
    </div>
</template>

<script>
    import giftListApi from '@/api/giftList'
    import commonApi from '@/api/common'

    export default {
        name: "gift",
        data() {
            return {
                params: {
                    state: '0'
                },
                showPivot: false,
                openid: '',
                giftList: [],
                gift: [],
                codeDto: {},
                hasReceiveGift: new Set(),
                show: false,
                giftCode: {},
                title: "领取成功",
                thisIndex: 1,
                isShow: {},
                backInfo: {},
                giftGameList: [],
                currentGift: {}
            }
        },
        mounted() {
            this.init();
        },
        methods: {

            GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
                var context = "";
                if (r != null)
                    context = r[2];
                reg = null;
                r = null;
                return context == null || context == "" || context == "undefined" ? "" : context;
            },

            init() {

                let code = this.GetQueryString('code');
                let type = this.$route.params.type;
                commonApi.getWechatOpenId(type, code).then(res => {
                    console.log(res);
                    if (res.access_token) {
                        this.openid = res.unionid || res.openid;
                        this.getGiftLists()
                    }
                })
                // this.openid = 232333;
                // this.getGiftLists();
            },

            getGiftLists() {
                this.show = false;
                giftListApi.getByOpenid(this.openid).then(res => {
                    this.gift = res;
                    this.hasReceiveGift = new Set(res.map(m => m.giftId));
                    this.getGiftGameList();
                });
            },


            addToGift(gift) {
                this.gift.push(gift);
                this.hasReceiveGift = new Set(this.gift.map(m => m.giftId));
            },


            getGiftGameList() {
                giftListApi.getGiftGameList(this.openid).then(res => {
                    this.giftGameList = res.map(m => {
                        m.show = false;
                        return m
                    })
                })
            },


            gainCode(items) {
                this.currentGift = items;
                console.log("获取验证码");
                this.backInfo = items;
                let that = this;
                this.codeDto = {
                    giftId: items.id,
                    openid: this.openid
                };

                if (this.hasReceiveGift.has(items.id)) {
                    this.title = "";
                    this.giftCode = this.gift.find(f => f.giftId == items.id).giftCode;
                    this.show = true
                } else {
                    giftListApi.getCode(this.codeDto).then(res => {
                        if (res) {
                            this.giftCode = res;
                            this.addToGift({
                                giftId: items.id,
                                giftCode: this.giftCode,
                                openid: this.openid
                            });
                            this.show = true
                        } else {
                            that.$toast.fail({
                                duration: 1000,       // 持续展示 toast
                                forbidClick: true, // 禁用背景点击
                                message: '礼包已领取完了，试试其他礼包吧...',
                                onClose: () => {
                                    this.getGiftLists();
                                }
                            })
                        }

                    })
                }

            },
            handelConform() {
                this.show = false;
                let that = this;
                this.$copyText(this.giftCode).then(function (e) {
                    that.$toast.success({
                        duration: 1000,       // 持续展示 toast
                        forbidClick: true, // 禁用背景点击
                        message: '复制成功'
                    })
                }, function (e) {
                    that.$toast.fail({
                        duration: 1000,       // 持续展示 toast
                        forbidClick: true, // 禁用背景点击
                        message: '复制失败'
                    })
                });
                // this.getGiftLists();
            }

        }

    }
</script>

<style lang="less" scoped>
    @import url('./gift.less');
</style>
