<template>
    <div class="partake-challenge-page">
        <Title class="page-title" title="　" v-on:goback="goback" show_back="true"
               v-if="currentPage()==='PartakeChallenge'"></Title>
        <div class="game-title">{{daka_info.target_step}}步三日耐力赛</div>
        <div class="game-time">开赛时间：{{daka_info.start_format}}-{{daka_info.end_format}}</div>
        <div class="game-cost">本期运动契约金：<span>{{daka_info.money|moneyFormatter}}元/人</span></div>
        <div class="game-introduce-container">
            <div class="game-introduce-title">
                <img src="../images/PartakeChallenge/ic_3.png">
                步赚取运动奖励金
            </div>
            <div class="game-introduce-section" v-for="(item,index) in daka_faq">
                <img class="section-icon" :src="require(`../images/PartakeChallenge/q${index+1}.png`)">
                <div class="section-content">
                    <div class="content-title">{{item[0]}}</div>
                    <div class="content-text">{{item[1]}}</div>
                </div>
            </div>
            <div class="game-introduce-join-container" v-if="currentPage()!=='PartakeChallenge'">
                <div class="auth-container" @click="bindArgeement()">
                    <div style="display: flex;">
                        <img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="argeement">
                        <div class="auth-uncheck" v-else></div>
                        <div class="text1">我同意</div>
                    </div>
                    <div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
                </div>
                <div class="partake-btn" @click="payToSign()">立即报名</div>
            </div>
        </div>
        <div class="footer-container" v-if="currentPage()==='PartakeChallenge'">
            <div class="auth-container" @click="bindArgeement()">
                <div style="display: flex;">
                    <img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="argeement">
                    <div class="auth-uncheck" v-else></div>
                    <div class="text1">我同意</div>
                </div>
                <div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
            </div>
            <div class="partake-btn" @click="payToSign()">立即报名</div>
        </div>
        <PayFailModal v-if="isShowPayFail" @close="togglePayFail()"></PayFailModal>
        <div class="modal" v-if="modalShown">
            <Modal v-on:close="closeModal" v-on:confirmModal="confirmModal" v-bind:title="modalTitle"
                   v-bind:desc="modalDesc" :option="modalOption"></Modal>
        </div>
        <div class="modal" v-if="showFreeModal">
            <Free
                    v-bind:page_type="1"
                    v-on:close="closeFree"
                    v-bind:v_data="contract_data"
                    @showModal="showModal"
                    @success="showSuccess"
                    :days="0"
            ></Free>
        </div>
    </div>
</template>

<script>
    import Title from "@/components/Title.vue"
    import PayFailModal from "@/components/PayFailModal.vue"
    import Free from "@/components/Free.vue"
    import Modal from "@/components/Modal.vue"
    import {daka_info} from "@/components/axios/api";
    import {
        dakaPay
    } from "@/components/axios/api"

    export default {
        name: "PartakeChallenge",
        components: {
            Title,
            PayFailModal,
            Modal,
            Free
        },
        data () {
            return {
                isShowPayFail: false,
                showFreeModal: false,
                modalTitle: "",
                modalDesc: "",
                modalShown: false,
                argeement: true,
                daka_info: {
                    start_format: '',
                    end_format: '',
                    money: 0,
                    target_step: 3000
                },
                daka_faq: {

                }
            }
        },
        created () {
            this.getPageData()
        },
        methods: {
            goback () {
                history.go(-1)
            },
            goOtherPage (pageName) {
                this.$router.push({name: pageName})
            },
            currentPage () {
                return this.$router.history.current.name
            },
            togglePayFail () {
                this.isShowPayFail = !this.isShowPayFail
            },
            payToSign () {
                if(!this.argeement){
                    this.showModal("温馨提示", '请先同意协议')
                    return
                }
                let nextGame = 0
                if (this.$route.query.nextGame) {
                    nextGame = 2
                }
                dakaPay(sessionStorage.getItem("bushuType"), nextGame).then(response => {
                    if (response.code == 1) {
                        this.showModal("温馨提示", response.msg)
                        return
                    }
                    let result = response.data
                    console.log("请求打卡支付数据", result)
                    if (result) {
                        WeixinJSBridge.invoke(
                            "getBrandWCPayRequest",
                            {
                                appId: result.appId, //公众号名称，由商户传入
                                timeStamp: result.timeStamp, //时间戳，自1970年以来的秒数
                                nonceStr: result.nonceStr, //随机串
                                package: result.package,
                                signType: result.signType, //微信签名方式：
                                paySign: result.paySign //微信签名
                            },
                            // result,
                            res => {
                                console.log("支付调用结果", res)
                                if (res.err_msg == "get_brand_wcpay_request:ok") {
                                    // 使用以上方式判断前端返回,微信团队郑重提示：
                                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                    // 支付成功后的回调函数
                                    console.log("支付成功")
                                    this.showSuccess()
                                    // this.dateSelect(2);
                                    // localStorage.setItem("is_every", 0)
                                    // location.replace("#/Success");
                                }
                                if (res.err_msg == "get_brand_wcpay_request:fail") {
                                    // this.showModal("温馨提示", "支付服务繁忙，请稍后重试");
                                    this.togglePayFail()
                                }
                                if (res.err_msg == "get_brand_wcpay_request:cancel") {
                                    // console.log("支付取消");
                                    this.togglePayFail()
                                }
                            }
                        )
                    }
                })
            },
            showModal (title, desc, option) {
                this.modalTitle = title || ""
                this.modalDesc = desc || ""
                this.modalOption = option || {}
                this.modalShown = true
            },
            showSuccess () {
                sessionStorage.setItem('userHaveJoinGame', 'true')
                sessionStorage.setItem('userHavePaidGame', 'true');
                this.$router.push({name: "HaveJoinedGame"})
                // this.showModal("温馨提示", "报名成功", {
                //     scb: () => {
                //         sessionStorage.setItem('userHaveJoinGame', 'true')
                //         sessionStorage.setItem('userHavePaidGame', 'true');
                //     }
                // })
            },
            closeFree () {
                this.showFreeModal = false
            },
            closeModal () {
                this.modalShown = false
            },
            confirmModal (scb) {
                scb && scb()
                this.modalShown = false
            },
            bindArgeement () {
                console.log('我同意')
                this.argeement = !this.argeement
            },
            getPageData(){
                let grade  = 1
                if(sessionStorage.getItem('bushuType')){
                    grade = sessionStorage.getItem('bushuType')
                }
                console.log(grade)
                daka_info(grade).then(res=>{
                    console.log('daka_info',res)
                    if(res.code == 0){
                        console.log('立即参与',res)
                        console.log(typeof res.data.daka_info)
                        this.daka_info = res.data.daka_info
                        this.daka_faq  = res.data.daka_faq
                    }
                })
            }
        },
        filters: {
            moneyFormatter(val) {
                if (val && !isNaN(val)) {
                    return Number(val).toFixed(2);
                } else {
                    return "0.00";
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .partake-challenge-page {
        min-height: 100vh;
        background-color: rgb(70, 88, 149);
        background-image: url(../images/SignUp/sy_beijing.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center top;
        display: flex;
        flex-direction: column;
        align-items: center;
        /*align-content: center;*/
        .page-title {
            position: fixed;
            left: 0;
            top: 0;
        }
        .game-title {
            font-size: .36rem;
            line-height: 1;
            color: #fff;
            font-weight: bold;
            margin-top: 4.4rem;
        }
        .game-time {
            font-size: .24rem;
            line-height: 1;
            color: #D6DFFF;
            padding: .12rem .38rem;
            border-radius: .48rem;
            background: #556CB6;
            margin-top: .14rem;
        }
        .game-cost {
            font-size: .26rem;
            line-height: 1;
            color: #fff;
            margin-top: .34rem;
            span {
                color: #FFE253;
            }
        }
        .game-introduce-container {
            width: 7.1rem;
            border-radius: .08rem;
            padding: .36rem .28rem .3rem;
            box-sizing: border-box;
            background: #fff;
            margin-top: .34rem;
            margin-bottom: 1.6rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            .game-introduce-title {
                display: flex;
                align-items: flex-end;
                font-size: .3rem;
                line-height: 1;
                color: #333;
                margin-bottom: .24rem;
                flex-shrink: 0;
                img {
                    width: .26rem;
                    height: .35rem;
                    margin-right: .08rem;
                }
            }
            .game-introduce-section {
                width: 100%;
                margin-top: .34rem;
                display: flex;
                align-items: flex-start;
                flex-shrink: 0;
                &:last-of-type .section-content {
                    border-bottom: none;
                }
                .section-icon {
                    width: .8rem;
                    height: .8rem;
                    flex-shrink: 0;
                    margin-right: .3rem;
                }
                .section-content {
                    flex: 1;
                    border-bottom: .01rem solid #e5e5e5;
                    .content-title {
                        font-size: .3rem;
                        line-height: 1;
                        color: #333;
                    }
                    .content-text {
                        font-size: .24rem;
                        line-height: .36rem;
                        color: #999;
                        margin: .16rem 0 .14rem;
                    }
                }
            }
            .game-introduce-join-container {
                flex-shrink: 0;
                .auth-container {
                    background: transparent;
                    margin-top: .26rem;
                }
                .partake-btn {
                    width: 5.6rem;
                    height: .92rem;
                    border-radius: .92rem;
                    background: #FABD21;
                    font-size: .4rem;
                    line-height: .92rem;
                    color: #fff;
                    font-weight: bold;
                    text-align: center;
                }
            }
        }
        .footer-container {
            width: 100%;
            position: fixed;
            left: 0;
            bottom: 0;
            .partake-btn {
                width: 100%;
                background: #FABD21;
                font-size: .36rem;
                line-height: .88rem;
                color: #fff;
                font-weight: bold;
                text-align: center;
            }
        }
        .auth-container {
            width: 100%;
            height: .52rem;
            background: #F2F2F2;
            display: flex;
            align-items: center;
            justify-content: center;
            .auth-checked {
                width: .24rem;
                height: .24rem;
            }
            .auth-uncheck {
                width: .24rem;
                height: .24rem;
                border: .01rem solid #BFBFBF;
                box-sizing: border-box;
                border-radius: 50%;
            }
            .text1 {
                font-size: .24rem;
                line-height: 1;
                color: #999;
                margin: 0 .1rem;
            }
            .text2 {
                font-size: .24rem;
                line-height: 1;
                color: #576B95;
            }
        }
    }
</style>
