<template>
    <div class="timeline-container">
        <div class="timeline-content">
            <div class="timeline-entry-list">
                <div class="gameBox">
                    <div class="home">
                        <div :class="{ 'dim': isDim }">
                            <div v-if="!isDim">
                                <img class="gift" src="@/assets/image/answerGame/WeekKaijiang/gift.png" alt="返奖">
                                <img class="rules" src="@/assets/image/answerGame/WeekKaijiang/rules.png" alt="互动规则"
                                    @click="clickRuleWrapper">
                                <img class="record" src="@/assets/image/answerGame/WeekKaijiang/record.png" alt="抽奖记录"
                                    @click="clickRecordWrapper">
                                <div class="top" v-if="top">
                                    <span style="font-size: 14px;color: #fff;font-weight: 600;border-radius: 6px;padding: 5px;">
                                        本期未开出奖品，将累计到下期</span>
                                </div>
                                <img class="answer" src="@/assets/image/answerGame/WeekKaijiang/join.png" alt="参与活动"
                                    @click="clickAnswer">
                                <img class="exit" src="@/assets/image/answerGame/WeekKaijiang/exit.png" alt="退出活动"
                                    @click="getOut">
                            </div>

                        </div>

                    </div>
                    <div class="ruleWrapper" v-if="isRuleWrapper">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>活动规则</span>
                                <span style="float: right; font-size: 20px;cursor: pointer;" @click="closeRuleWrapper">
                                    <i class="el-icon-close"></i>
                                </span>
                            </div>
                            <div class="ruleBox" v-html="rule"></div>
                        </el-card>
                    </div>
                    <div class="confirmWrapper" v-if="isConfirmWrapper">
                        <img class="homeBtn" src="@/assets/image/answerGame/WeekKaijiang/homeBtn.png" alt="返回主界面"
                            @click="goHome">
                        <img class="confirm" src="@/assets/image/answerGame/WeekKaijiang/confirm.png" alt="确认兑换"
                            @click="clickConfirm">
                    </div>
                    <div class="recordWrapper" v-show="isRecordWrapper">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>抽奖记录</span>
                                <span style="float: right; font-size: 20px;cursor: pointer;"
                                    @click="closeRecordWrapper">
                                    <i class="el-icon-close"></i>
                                </span>
                            </div>
                            <div  class="recordListBox">
                                <div class="recordItem title">
                                    <div style="width: 30%;text-align: center;">购买日期</div>
                                    <div style="width: 40%;text-align: center;">奖券</div>
                                    <div style="width: 30%;text-align: center;">开奖结果</div>
                                </div>
                                <el-empty description="暂无数据" v-if="recordList.length == 0" :image-size="20"></el-empty>
                                <van-list
                                    v-if="recordList.length > 0"
                                    v-model="loading"
                                    :finished="finished"
                                    finished-text=""
                                    @load="onLoad"
                                    >
                                    <div class="recordItem" v-for="(item, index) in recordList">
                                        <div style="width: 30%;text-align: center;">{{ item.createTime.slice(0, 10) }}</div>
                                        <div style="width: 40%;text-align: center;">{{ item.couponNumber }}</div>
                                        <div style="width: 30%;text-align: center;">{{ item.prizeName }}</div>
                                    </div>
                                </van-list>
                            </div>
                        </el-card>
                    </div>
                    <div class="closeWrapper" v-if="isCloseWrapper">
                        <img class="goHome" src="@/assets/image/answerGame/WeekKaijiang/goHome.png" alt="关闭"
                            @click="refresh">
                    </div>
                    <div class="ipayWrapper" v-show="recharge">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>扫码参与</span>
                                <span style="float: right; font-size: 20px;cursor: pointer;" @click="clickRecharge">
                                    <i class="el-icon-close"></i>
                                </span>
                            </div>
                            <div class="payBox-way">
                                <div class="way-item">
                                    <div class="item-left">
                                        <div id="expCode" ref="expCodeRef"></div>
                                    </div>
                                    <div class="item-right">
                                        <div class="up">
                                            <div>应付金额</div>
                                            <div style="color: #fe2c55;margin-left: 8px;">¥ {{ money }}</div>
                                        </div>
                                        <div class="center">
                                            <img style="height: 18px;"
                                                src="../../../assets/image/answerGame/WeekKaijiang/weixinPay.png"
                                                alt="weixinpay">
                                            <div class="textStyle">微信扫码支付</div>
                                        </div>
                                        <div class="down">
                                            <div>抽奖券：</div>
                                            <el-input-number @change="changeCount" size="mini" v-model="count" :step="1"
                                                :min="1" step-strictly></el-input-number>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </div>
            </div>
            <SiderInfo></SiderInfo>
        </div>

    </div>
</template>
<script>
import QRCode from 'qrcodejs2';
import { homeData, getWxPayCode, queryWxPayStatus, involveRecord } from "@/api/weekKaijiang";
import SiderInfo from '@/components/SiderInfo.vue';
export default {
    components: {
        SiderInfo
    },
    data() {
        return {
            loading: false,
            finished: false,
            recordList: [],
            page: 1,
            pageSize: 10,
            actId: this.$route.query.actId,
            rule: '',
            top: '',
            isConfirmWrapper: false,
            isCloseWrapper: false,
            isRuleWrapper: false,
            isRecordWrapper: false,
            isDim: false,
            timerPayWxQRcode: null,
            timer: null,
            //充值二维码
            payUrl: '',
            //充值弹窗
            recharge: false,
            //充值金额
            money: 2,
            count: 1,
        };
    },
    created() {
        this.getHomeData();
        this.getInvolveRecord();
    },
    methods: {
        onLoad() {
            let that = this;
            setTimeout(function () {
                that.getInvolveRecord();
            }, 500);
        },
        getInvolveRecord() {
            let that = this;
            involveRecord({
                actId: that.actId,
                page: that.page,
                limit: that.pageSize
            }).then(res => {
                console.log(res);
                let list = res.data.data.items;
                if (that.page == 1) {
                    that.recordList = list;
                } else {
                    //如果不是则在后面追加数据
                    that.recordList.push(...list);
                }
                if (list.length == 10) {
                        that.page += 1;
                        that.finished = false;
                    }
                    if (list.length < 10) {
                        that.finished = true;
                    }
                    that.loading = false;
                })
        },
        changeCount(val) {
            this.money = 2 * val;
            clearInterval(this.timer);
            clearInterval(this.timerPayWxQRcode);
            this.handlePayWxQRcode();
        },
        beforeClose(done) {
            clearInterval(this.timer);
            clearInterval(this.timerPayWxQRcode);
            done();
        },
        handlePayWxQRcode() {  // 获取微信支付二维码
            getWxPayCode({    // 这里根据不同的后端接口去修改
                // integral: this.money * 10,
                totalFee: this.money,
                actId: this.actId,
            }).then(res => {
                let data = res.data.data;
                this.qrcode(data.payUrl);    // 例如：data.payUrl 的值为 "weixin://wxpay/bizpayurl?pr=......"，根据这个值生成相对应的微信支付二维码
                this.timer = setInterval(() => {    // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
                    this.handleQueryWxPayStatus(data.orderNo);
                }, 1000);
                this.timerPayWxQRcode = setInterval(() => {    // 刷新微信支付二维码
                    console.log('刷新微信支付二维码');
                    clearInterval(this.timer);    // 清除定时器;   
                    clearInterval(this.timerPayWxQRcode);
                    this.handlePayWxQRcode();
                }, 60000);
            })
        },
        handleQueryWxPayStatus(orderNo) {  // 查询微信支付状态
            queryWxPayStatus({    // 这里根据不同的后端接口去修改
                orderNo: orderNo,
            }).then(res => {
                let data = res.data.data;
                if (data == '支付成功') {    // 当查询到支付成功时
                    this.money = 100;
                    this.count = 1;
                    this.recharge = false;
                    clearInterval(this.timer);    // 清除定时器;   
                    clearInterval(this.timerPayWxQRcode);
                    this.isDim = true;
                    this.isCloseWrapper = true;
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 清空二维码,避免生成多个二维码
        delQrcode() {
            this.$refs.expCodeRef.innerHTML = ""
        },
        // 前端根据 payUrl 生成微信支付二维码
        qrcode(payUrl) {
            this.delQrcode();
            return new QRCode('expCode', {
                width: 150,
                height: 150,
                text: payUrl,
                colorDark: '#000',
                colorLight: '#fff'
            });
        },
        refresh() {
            location.reload();
        },
        clickRecordWrapper() {
            this.getInvolveRecord();
            this.isDim = true;
            this.isRecordWrapper = true;
        },
        getOut() {
            this.$router.push({
                path: '/home/festiveEvents',
            });
        },
        getHomeData() {
            homeData({ actId: this.actId }).then(response => {
                console.log(response.data.data);
                this.rule = response.data.data.rule;
                this.top = response.data.data.top ? response.data.data.top : '0';
            })
        },
        clickAnswer() {
            this.isDim = true;
            this.isConfirmWrapper = true;

        },
        clickConfirm() {
            this.isDim = false;
            this.isConfirmWrapper = false;
            this.isDim = true;
            this.recharge = true;
            this.$nextTick(function () {
                this.handlePayWxQRcode();
            })
        },
        goHome() {
            this.isDim = false;
            this.isConfirmWrapper = false;
        },
        clickRuleWrapper() {
            this.isDim = true;
            this.isRuleWrapper = true;
        },
        closeRuleWrapper() {
            this.isDim = false;
            this.isRuleWrapper = false;
        },
        closeRecordWrapper() {
            this.isDim = false;
            this.isRecordWrapper = false;
        },
        clickRecharge(){
            this.isDim = false;
            this.recharge = false;
        }
    },
}
</script>
<style scoped>
.ruleBox::-webkit-scrollbar, .recordListBox::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.ruleBox{
    max-height: 500px;
    overflow: auto;
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}
.recordListBox {
    height: 360px;
    overflow: auto;
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.title {
    font-size: 15px;
    font-weight: 600;
    position: -webkit-sticky;
    position: sticky;
    top: -1px;
    height: 30px;
    background-color: #fff;
}

.recordItem {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px 0;
}

.timeline-container {
    margin: 0 auto;
}

.timeline-entry-list {
    margin-right: 17.5rem;
    border-radius: 2px;
    width: 720px;
    position: relative;
}

.timeline-entry-list .gameBox {
    border-radius: 4px 4px 0 0;
    position: relative;
    padding: 2.667rem 0;
    z-index: 1;
    overflow: hidden;
    background-color: #fff;
    padding-left: 2.67rem;
    padding-right: 2.67rem;
    margin-bottom: 2rem;
    box-sizing: border-box;
    min-height: 280px;
    display: flex;
    justify-content: center;
    align-content: center;
}
/* .recordListBox {
    position: relative;
    z-index: 10;
    background: url(@/assets/image/answerGame/WeekKaijiang/cgjl.jpg) no-repeat;
    background-size: 100% 100%;
    width: 350px;
    height: 500px;
} */

.gameBox .item {
    position: relative;
    z-index: 10;
    background: url(@/assets/image/answerGame/item/itemBg.png) no-repeat;
    background-size: 100% 100%;
    width: 375px;
    height: 667px;
}

.item .integralBox {
    position: absolute;
    top: 7.3%;
    right: 8%;
    width: 90px;
    height: 35.2px;
    /* background: greenyellow; */
    display: flex;
    justify-content: center;
    line-height: 35.2px;
}

.integralBox .integral {
    font-size: 16px;
    color: orange;
    font-weight: 600;
}

.item .timer {
    position: absolute;
    background: url(@/assets/image/answerGame/item/timer.png) no-repeat;
    background-size: 100% 100%;
    width: 80px;
    height: 80px;
    top: 15%;
    right: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timer .second {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

.item .topicNum {
    position: absolute;
    background: url(@/assets/image/answerGame/item/topicNum.png) no-repeat;
    background-size: 100% 100%;
    width: 120px;
    height: 42px;
    top: 25%;
    left: 4.8%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.topicNum .topic {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

.item .questionBox {
    position: absolute;
    width: 375px;
    top: 28%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.questionBox .title {
    margin: auto 50px;
    height: 180px;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* font-weight: 600; */
}

.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.answerItem {
    cursor: pointer;
    margin: 10px 0;
    color: #3883fa;
    background: rgb(221, 218, 218);
    border-radius: 20px;
    width: 80%;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.right {
    /*选择正确的答案颜色*/
    background: #3ede58;
    color: #fff;
}

.error {
    /*选择错误的答案颜色*/
    background: #e53117;
    color: #fff;
}

.invisible {
    width: 25px;
    position: absolute;
    right: 15px;
}

.gameBox .home {
    position: relative;
    z-index: 10;
    background: url(@/assets/image/answerGame/WeekKaijiang/homeBg.jpg) no-repeat;
    background-size: 100% 100%;
    width: 375px;
    height: 667px;
}
.home .gift {
    position: absolute;
    width: 60px;
    top: 12%;
    right: 0;
}
.home .rules {
    cursor: pointer;
    position: absolute;
    width: 50px;
    top: 25%;
    left: 5%;
}

.home .record {
    cursor: pointer;
    position: absolute;
    width: 50px;
    top: 25%;
    right: 5%;
}

.home .top {
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home .answer {
    cursor: pointer;
    position: absolute;
    width: 175px;
    bottom: 20%;
    left: 0;
    right: 0;
    margin: auto;
}

.home .exit {
    cursor: pointer;
    position: absolute;
    width: 175px;
    bottom: 10%;
    left: 0;
    right: 0;
    margin: auto;
}

.hidden {
    display: none;
}

.show {
    display: block;
}

.dim {
    /* opacity:0.6; */
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .4);
    pointer-events: none;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.ruleWrapper,
.recordWrapper,
.ipayWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
}

.box-card {
    width: 350px;
}

.confirmWrapper {
    cursor: pointer;
    position: absolute;
    background: url(@/assets/image/answerGame/WeekKaijiang/isConfirm.png) no-repeat;
    background-size: 100% 100%;
    width: 265px;
    height: 316px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
}

.confirmWrapper .homeBtn {
    position: absolute;
    bottom: -40px;
    width: 29px;
}

.confirmWrapper .confirm {
    cursor: pointer;
    width: 150px;
    margin-bottom: 24px;
}


.closeWrapper {
    position: absolute;
    background: url(@/assets/image/answerGame/WeekKaijiang/finish.png) no-repeat;
    background-size: 100% 100%;
    width: 319px;
    height: 194px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.closeWrapper .goHome {
    margin-bottom: 10px;
    cursor: pointer;
    width: 117px;
    height: 41px;
}

.payBox-way {
    margin-top: 16px;
}

.way-item {
    display: flex;
    background-color: #f7f7f9;
    border-radius: 6px;
    padding: 12px;
    flex-direction: column;
    align-items: center;
}

.item-left {
    position: relative;
    width: 150px;
    height: 150px;
    background-color: #fff;
    border-radius: 6px;
    padding: 7px;
}

.item-right {
    /* margin-left: 12px; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.up {
    display: flex;
    align-items: flex-end;
    font-size: 18px;
    font-weight: 600;
    height: 30px;
}

.center {
    display: flex;
    align-items: center;
    margin-top: 6px;
}

.textStyle {
    font-size: 16px;
    font-weight: 400;
    margin-left: 4px;
    color: rgba(22, 24, 35, .34);
}

.down {
    font-size: 16px;
    color: rgba(22, 24, 35, .34);
    margin-top: 16px;
    display: flex;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
</style>
<style>
.el-card__header {
    padding: 10px 20px !important;
}
</style>