<template>
    <div class="sign-up-page">
        <!-- 顶部步数级别选择 -->
        <div class="top-nav-level">
            <div :class="['level-item', choosedLevel===1?'active':'']" @click="chooseGameLevel(1)">3000步赛</div>
            <div :class="['level-item', choosedLevel===2?'active':'']" @click="chooseGameLevel(2)">5000步赛</div>
            <div :class="['level-item', choosedLevel===3?'active':'']" @click="chooseGameLevel(3)">8000步赛</div>
        </div>
        <!-- 左上角查看步数按钮 -->
        <!-- <img class="view-steps-btn" src="../images/SignUp/sy_bushu.png"> -->
        <!-- 信息广播 -->
        <NoticeBonus class="notice-broadcast"></NoticeBonus>
        <!-- 挑战赛卡片 -->
        <div class="challenge-card" v-for="item in gameList">
            <img class="corner-marker" src="../images/SignUp/home_tag_bsz.png" v-if="item.status===0">
            <img class="corner-marker" src="../images/SignUp/home_tag_zmz.png" v-if="item.status===1">
            <img class="corner-marker" src="../images/SignUp/home_tag_yjs.png" v-if="item.status===2">
            <div class="card-title">{{item.action}}期 - {{item.target_step}}步3天耐力赛</div>
            <div class="card-time">{{item.already_join===1?'已参赛':'未参赛'}} {{item.period_start}} - {{item.period_end}}
            </div>
            <div class="card-info">
                <div class="info-item" v-if="item.status===0||item.status===2">
                    <div class="item-title">达标人数</div>
                    <div class="item-content">{{item.people_cnt || 0}}</div>
                </div>
                <div class="info-item">
                    <div class="item-title">参与人数</div>
                    <div class="item-content">{{item.total_signup || 0}}</div>
                </div>
                <div class="info-item">
                    <div class="item-title">总奖励金</div>
                    <div class="item-money">{{item.total_money || '0.00'}}</div>
                </div>
            </div>
            <!--      0 比赛中  1 未开始  2 已结束-->
            <div class="card-btn" v-if="item.status===1&&item.already_join===0" data-item="item"
                 @click="goOtherPage('PartakeChallenge')">
                <div class="btn-title">参与挑战</div>
            </div>
            <div class="card-btn" v-if="item.status===1&&item.already_join===1" data-item="item"
                 @click="goWhereDetail(item)">已报名
            </div>
            <div class="statusnormal" v-if="item.status===2 || item.status===0 || item.status===3"
                 @click="goWhereDetail(item)">{{(item.status===2 || item.status===0)
                ? (item.status===0&&item.already_join===1) ? '立即打卡': '查看详情' : '已淘汰'}}
                <img src="../images/SignUp/detail_bg.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    import NoticeBonus from "@/components/NoticeBonus.vue"
    import Free from "@/components/Free.vue"
    import Modal from "@/components/Modal.vue"
    import PayFailModal from "@/components/PayFailModal.vue"
    import {dakaPay, track, userCards, daka_index} from "@/components/axios/api"

    export default {
        name: "SignUp",
        components: {
            NoticeBonus,
            Modal,
            Free,
            PayFailModal
        },
        data() {
            return {
                contract_data: {},
                showFreeModal: false,
                modalTitle: "",
                modalDesc: "",
                modalShown: false,
                current_date: {},
                isShowPayFail: false,
                isFollow: false,

                gameList: [],
                choosedLevel: 2
            }
        },
        created() {
            let grade = Number(sessionStorage.getItem("bushuType"))
            if(grade){
                // console.log('grade',grade)
                this.getPageData(grade)
            }else{
                // console.log('grade 0',grade)
                this.getPageData(this.choosedLevel)
            }
        },
        mounted() {
            //获取步数tab缓存
            let LastLevel = Number(sessionStorage.getItem("bushuType"))
            if (LastLevel) {
                this.choosedLevel = LastLevel
            } else {
                sessionStorage.setItem("bushuType", this.choosedLevel)
            }
        },
        methods: {
            chooseGameLevel(level) {
                sessionStorage.setItem("bushuType", level)
                this.choosedLevel = level
                this.getPageData(level)
            },
            goOtherPage(pageName) {
                console.log('pageName', pageName)
                this.$router.push({name: pageName})
            },
            goWhereDetail(item) {
                if (item.status === 1 && item.already_join === 1) { // 已报名
                    this.$router.push({
                        name: 'HaveJoinedGame',
                        query: {
                            week: item.week
                        }
                    })
                } else { // 比赛中或者已结束
                    if (item.already_join === 1) { // 已报名
                        this.$router.push({
                            name: 'HaveJoinedGame',
                            query: {
                                week: item.week
                            }
                        })
                    } else { // 未报名
                        sessionStorage.setItem('ChallengeDetailData', JSON.stringify(item))
                        this.$router.push({name: 'ChallengeDetail'})
                    }
                }
            },
            getPageData(grade = 1) {
                daka_index(grade).then(res => {
                    if (res.code === 0) {
                        res.data.forEach(item => {
                            item.action = item.week.substring(item.week.length - 4)
                        })
                        this.gameList = res.data
                        console.log('gameList', this.gameList)
                    }
                })
            },
            togglePayFail() {
                this.isShowPayFail = !this.isShowPayFail
            },
            showSuccess() {
                this.showModal("温馨提示", "报名成功", {
                    scb: () => {
                        if (this.isFollow == 1) {
                            this.$router.push({name: "Read"})
                        } else {
                            this.$router.push({name: "Success"})
                        }
                    }
                })
            },
            confirmModal(scb) {
                scb && scb()
                this.modalShown = false
            },
            showFree(e) {
                e.stopPropagation()
                track("free_contract_show")
                if (localStorage.getItem("first_show_free") == 1) {
                    localStorage.setItem("first_show_free", 2)
                    this.canShowFree = false
                } else {
                    this.canCheckShowFree = false
                    this.canShowFree = false
                }
                userCards().then(res => {
                    console.log("获取免契约金数据", res)
                    let data = {
                        card: res.data.contract_card,
                        cnt: res.data.contract_cnt
                    }
                    this.current_date = new Date(res.date)
                    // if (
                    //   // 如果明天没报名，而且还有免契约金卡，则可以使用
                    //   !this.date_status[1].user_status.daka_signup &&
                    //   res.data.contract_card > 0
                    // ) {
                    //   data.can_get = true;
                    //   // 其他情况，显示报名下期比赛
                    // } else {
                    // data.can_get = false;
                    // }
                    this.contract_data = JSON.parse(JSON.stringify(data))
                    this.showFreeModal = true
                })
            },
            closeFree() {
                this.showFreeModal = false
            },
            showModal(title, desc, option) {
                this.modalTitle = title || ""
                this.modalDesc = desc || ""
                this.modalOption = option || {}
                this.modalShown = true
            },
            closeModal() {
                this.modalShown = false
            },
            payToSign() {
                dakaPay().then(response => {
                    this.current_date = new Date(response.date)
                    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.showModal("温馨提示", "报名成功", {
                                        scb: () => {
                                            if (this.isFollow == 1) {
                                                this.$router.push({name: "Read"})
                                            } else {
                                                this.$router.push({name: "Success"})
                                            }
                                        }
                                    })
                                    // 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()
                                }
                            }
                        )
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .sign-up-page {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        background-color: rgb(70, 88, 149);
        background-image: url(../images/SignUp/sy_beijing.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-attachment: scroll;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        .top-nav-level {
            flex-shrink: 0;
            margin-top: 0.3rem;
            border: 0.02rem solid #fff;
            border-radius: 0.1rem;
            overflow: hidden;
            background: #fff;
            box-sizing: border-box;
            display: flex;

            .level-item {
                width: 1.76rem;
                font-size: 0.3rem;
                line-height: 0.54rem;
                color: #465895;
                text-align: center;
                position: relative;

                &:after {
                    content: "";
                    height: 0.26rem;
                    width: 0.02rem;
                    background: #465895;
                    position: absolute;
                    left: -0.02rem;
                    top: 50%;
                    transform: translateY(-50%);
                }

                &:first-child:after {
                    display: none;
                }

                &.active {
                    background: #465895;
                    color: #fff;
                    border-radius: 0.1rem;
                    font-weight: bold;
                }

                &.active:after {
                    display: none;
                }
            }
        }

        .view-steps-btn {
            flex-shrink: 0;
            width: 1.11rem;
            height: 0.84rem;
            display: block;
            position: absolute;
            left: 0;
            top: 1.22rem;
        }

        .notice-broadcast {
            flex-shrink: 0;
            margin: 3.68rem 0 0.18rem;
        }

        .challenge-card {
            flex-shrink: 0;
            width: 6.9rem;
            height: 4.4rem;
            background-image: url(../images/SignUp/sy_dikuang.png);
            background-size: 100% 100%;
            margin-bottom: 0.4rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            .corner-marker {
                width: 1.39rem;
                height: 1.39rem;
                position: absolute;
                top: -0.02rem;
                right: -0.02rem;
            }

            .card-title {
                font-size: 0.34rem;
                line-height: 1;
                color: #fff;
                margin-top: 0.28rem;
            }

            .card-time {
                background: rgba(0, 0, 0, 0.1);
                padding: 0 0.24rem;
                border-radius: .24rem;
                height: .46rem;
                display: flex;
                align-items: center;
                font-size: 0.26rem;
                font-family: Helvetica;
                color: #fff;
                margin-top: 0.16rem;
            }

            .card-info {
                width: 100%;
                margin-top: 0.7rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .info-item {
                    flex: 1;
                    border-left: 0.02rem solid #fff;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    &:first-child {
                        border-left: none;
                    }

                    .item-title {
                        font-size: 0.28rem;
                        line-height: 0.8;
                        color: #fff;
                    }

                    .item-content {
                        font-size: 0.48rem;
                        line-height: 0.8;
                        color: #fff;
                        margin-top: 0.12rem;
                    }

                    .item-money {
                        font-size: 0.48rem;
                        line-height: 0.8;
                        color: #fcf776;
                        margin-top: 0.12rem;
                    }
                }
            }

            .statusnormal {
                position:absolute;
                bottom: 0.38rem;
                display: flex;
                justify-content: center;
                align-content: center;
                color: #fff;
                font-size: 0.34rem;
                font-weight: 600;
                img {
                    display: flex;
                    margin-left: 4px;
                    width: 15px;
                    height: 15px;
                }
            }

            .card-btn {
                width: 4rem;
                height: 0.88rem;
                background: #fabd21;
                border-radius: 0.74rem;
                box-shadow: 0 0.02rem 0.04rem 0 rgba(0, 0, 0, 0.2);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 0.3rem;
                font-weight: bold;
                letter-spacing: 0.01rem;
                line-height: 1;
                color: #fff;
                position: absolute;
                bottom: 0.38rem;
                left: 50%;
                transform: translateX(-50%);

                .card-btn-tip {
                    font-size: 0.22rem;
                    margin-top: 0.06rem;
                    font-weight: normal;
                }

                .btn-title {
                    font-size: .34rem;
                    font-weight: bold;
                }
            }
        }
    }
</style>
