<template>
    <div class="have-joined-game-page">
        <Title
                class="page-title"
                @goback="goback"
                show_back="true"
                v-if="currentPage()==='HaveJoinedGame'"
        ></Title>
        <div class="game-rule-container" @click="goOtherPage('Rule')">
            <img src="../images/ChallengeDetail/ic_que.png">
            活动规则
        </div>
        <div class="game-bonus-container">
            <div class="bonus-title">本期累计奖励金（元）</div>
            <div class="bonus-amount">{{bet_bonus|moneyFormatter}}</div>
        </div>
        <div class="game-title">{{target_steps}}步3日耐力赛</div>
        <div class="game-time">开赛时间：{{period_start}} — {{period_end}}</div>
        <div class="target-people-container">
            <img class="target-img" src="../images/HaveJoinedGame/ic_shoes.png">
            <div class="target-people-text">每日{{target_steps}}步达标</div>
            <img class="people-img" src="../images/HaveJoinedGame/ic_people.png">
            <div class="target-people-text">已有{{total_signup}}人参赛</div>
        </div>
        <div class="hr"></div>
        <!--        <div style="height: 2.68rem;">v-if="showSwiper" -->
        <swiper :options="swiperOption" ref="mySwiper" class="game-scroll-container" v-if="showSwiper">
            <swiper-slide v-for="(item,index) in record_list" :key="index">
                <div class="game-scroll-item">
                    <div class="item-title-status">
                        <div class="item-title">第{{item.days}}天</div>
                        <div :class="item.status===0?'item-status0':item.status===1?'item-status1':item.status===2?'item-status2':'item-status2'"
                        >{{item.status===0?'未开始':item.status===1?'比赛中':item.status===2?'已结束':'已淘汰'}}
                        </div>
                    </div>
                    <div class="item-income" :style="item.status===1?'':'visibility: hidden;'">
                        <div class="item-amount">{{item.money|moneyFormatter}}</div>
                        <div class="item-text">(元) 预计收益</div>
                    </div>
                    <div class="item-progress-num">
                        <div class="item-num" v-if="item.status===0">还有{{item.format_tsp || '0秒'}}开始</div>
                        <template v-else>
                            <div class="item-progress" :style="'width: '+item.rate/100*2.46+'rem;'" v-if="index ==0 || (index > 0 && record_list[index-1].status != 3)"></div>
                            <div class="item-num">
<!--                                //已淘汰 1-->
<!--                                0: 未开始  1:比赛中  2:已结束  3:已淘汰-->
                                <span v-if="item.is_complete == 2">未达标({{item.step_num}}步)</span>
                                <span v-else-if="item.status == 3 && item.is_complete != 2">已失去比赛资格</span>
                                <span v-else-if="item.is_complete == 1 && item.status == 2">已达标({{item.step_num}}步)</span>
                                <span v-else-if="item.status == 1 && item.is_complete == 1">今天达标了</span>
<!--                                今天进行中-->
                                <span v-else-if="item.is_complete == 0 && item.status == 1"> ({{item.step_num}}/{{target_steps}}步)</span>
                            </div>
                        </template>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
        <!--        </div>-->
        <div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div>
        <div class="next-func-btn" v-if="next_signup" @click="joinNextGame()">报名下一期</div>

        <!-- 报名成功弹框 -->
        <div class="game-status-popup" v-if="userHavePaidGame">
            <div class="game-status-container">
                <img class="status-icon" src="../images/HaveJoinedGame/pop_bmcg_title.png">
                <img class="join-success-banner" src="../images/HaveJoinedGame/pop_bmcg_img.png">
                <div class="popup-text1">
                    <span>每日24点前</span>打开「步步运动赚」小程序，手动提交今日步数，否则可能导致无法分钱哦！
                </div>
                <div class="popup-text2">注：微信暂不支持小程序实时更新步数</div>
                <div class="popup-btn1 green-btn" @click="inviteFriend">邀请好友来参赛</div>
                <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePayPopup()">
            </div>
        </div>


        <!-- 恭喜达标弹框 -->
        <div class="game-status-popup" v-if="popupData.window && popupData.daka_done">
            <div class="game-status-container">
                <img class="status-icon" src="../images/HaveJoinedGame/pop_gxdb_title.png">
                <div class="status-date">第{{popupData.days}}日达标</div>
                <div class="status-money">
                    <div class="popup-text3">{{popupData.days===3?'总奖励金':'返还契约金'}}</div>
                    <div class="popup-text4">
                        {{popupData.money|moneyFormatter}}
                        <span>元</span>
                    </div>
                    <div class="popup-text5">第{{popupData.week}}期{{popupData.target_steps}}步3日耐力赛</div>
                </div>
                <div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
                <div class="popup-text7">契约金已返还至你的钱包</div>
                <div class="popup-btn1 green-btn" @click="inviteFriend">邀请好友来打卡</div>
                <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
            </div>
        </div>
        <!-- 你已被淘汰弹框 -->
        <div class="game-status-popup" v-else-if="popupData.window && !popupData.daka_done">
            <div class="game-status-container">
                <img class="status-icon" src="../images/HaveJoinedGame/pop_out_title.png">
                <div class="status-date">第{{popupData.days}}日未达标</div>
                <div class="status-money">
                    <div class="popup-text3">扣除契约金</div>
                    <div class="popup-text4">
                        {{popupData.money|moneyFormatter}}
                        <span>元</span>
                    </div>
                    <div class="popup-text5">第{{popupData.week}}期{{popupData.target_steps}}步3日耐力赛</div>
                </div>
                <div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
                <div class="popup-text7">已达标{{popupData.days}}天，契约金已返还至你的钱包</div>
                <div class="popup-btn1 yellow-btn" @click="joinNextGame()">报名下一期</div>
                <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
            </div>
        </div>
        <ShareModal
                v-on:close="closeShareModal"
                v-if="showShareModal"
        ></ShareModal>
    </div>
</template>

<script>
    import Title from "@/components/Title.vue"
    import {daka_status_detail, pop_up_windows, shareContent, track} from "@/components/axios/api"
    import ShareModal from "@/components/ShareModal.vue"
    import {swiper, swiperSlide} from "vue-awesome-swiper"
    import "swiper/dist/css/swiper.css"

    export default {
        name: "HaveJoinedGame",
        components: {
            Title,
            swiper,
            swiperSlide,
            ShareModal
        },
        data() {
            return {
                swiperOption: {
                    slidesPerView: "auto",
                    centeredSlides: true,
                    spaceBetween: 10,
                    notNextTick: true,
                    loop: false,
                    autoplay: false
                },
                showSwiper: false,
                bet_bonus: "0.00",
                next_signup: false,
                period_end: "",
                period_start: "",
                total_signup: 0,
                target_steps: 0,
                record_list: [],
                popupData: {},
                current_day: 0,
                userHavePaidGame: false,
                showShareModal: false,
                userData: null,
            }
        },
        created() {
            this.getPageData()
            this.isPopup()
            if (sessionStorage.getItem("userHavePaidGame") === "true") {
                sessionStorage.setItem("userHavePaidGame", "false")
                this.userHavePaidGame = true
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        mounted() {
            setTimeout(() => {
                this.swiper.slideTo(this.current_day, 1200, false)
            }, 800)
        },
        methods: {
            joinNextGame() {
                this.$router.push({
                    name: "PartakeChallenge",
                    query: {
                        nextGame: true
                    }
                })
            },
            goOtherPage (pageName) {
                if(pageName == 'Rule'){
                    // console.log('规则')
                    let params = this.target_steps
                    let p = 0
                    console.log(params)
                    if(params == 3000){
                        p = 1
                    }else if(params == 5000){
                        p = 2
                    }else if(params == 8000){
                        p = 3
                    }
                    this.$router.push({name: pageName,params: {level:p}})
                }else{
                    // console.log('提交步数')
                    this.$router.push({name: pageName})
                }
                // let params = this.target_steps
                // console.log('params',params)
                // this.$router.push({name: pageName})
            },
            closePayPopup() {
                this.userHavePaidGame = false
            },
            closePopup() {
                this.popupData.window = false
            },
            goback() {
                history.go(-1)
            },
            // goOtherPage(pageName) {
            //     this.$router.push({name: pageName})
            // },
            currentPage() {
                return this.$router.history.current.name
            },
            getPageData() {
                let grade = 1
                if (sessionStorage.getItem("bushuType")) {
                    grade = sessionStorage.getItem("bushuType")
                }
                daka_status_detail(
                    this.$route.query.week,
                    this.$route.query.week ? grade : ""
                ).then(res => {
                    if (res.code === 0) {
                        const pageData = res.data
                        if (pageData.record_list && pageData.record_list.length) {
                            pageData.record_list.forEach((item, index) => {
                                if (item.status === 0) {
                                    item.format_tsp = this.countDown(
                                        "interval" + index,
                                        parseInt((item.tsp * 1000 - Date.now()) / 1000),
                                        index
                                    )
                                }
                                // if(item.days < currentDay){
                                //     if(item.step_num < item.target_steps){
                                //         console.log('未达标')
                                //     }else{
                                //
                                //     }
                                // }
                            })
                        }
                        this.bet_bonus = pageData.bet_bonus
                        this.next_signup = pageData.next_signup
                        this.period_end = pageData.period_end
                        this.period_start = pageData.period_start
                        this.total_signup = pageData.total_signup
                        this.target_steps = pageData.target_steps
                        this.record_list = pageData.record_list
                        this.current_day = pageData.current_day - 1
                        this.showSwiper = true
                    }
                })
            },
            isPopup() {
                pop_up_windows().then(res => {
                    if (res.code === 0) {
                        this.popupData = res.data
                    }
                })
            },
            inviteFriend() {
                console.log("inviteFriend")
                this.showShareModal = true
                let id = this.userData.id
                // let id =  'yijun';
                track("free_contract_share")
                let links = `${
                    location.href.split("#")[0].split("?")[0]}?inviter=${id}&from_type=free_contract&`
                shareContent("free_contract").then(res => {
                    let result = res.data
                    console.log("分享内容", result, links)
                    let option1 = {
                        title: result.title, // 分享标题
                        desc: result.desc, // 分享描述
                        link: links, // 分享链接
                        imgUrl: result.img_url, // 分享图标
                        success: function (res) {
                            track("free_contract_share_act")
                            console.log("option1Success", res)
                        }
                    }
                    wx.updateAppMessageShareData(option1)
                    //微信分享菜单测试
                    let option2 = {
                        title: result.title, // 分享标题
                        desc: result.desc, // 分享描述
                        link: links, // 分享链接
                        imgUrl: result.img_url, // 分享图标
                        success: function (res) {
                            console.log("option2Success", res)
                        }
                    }
                    let option3 = {
                        title: result.title, // 分享标题
                        desc: result.desc, // 分享描述
                        link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: result.img_url, // 分享图标
                        success: function (res) {
                            // 用户点击了分享后执行的回调函数
                            track("free_contract_share_act")
                            console.log("option3Success", res)
                        },
                        fail: err => {
                            console.log("option3error", err)
                        }
                    }
                    wx.onMenuShareAppMessage(option3)
                    let option4 = {
                        title: result.title, // 分享标题
                        link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: result.img_url, // 分享图标
                        success: function (res) {
                            console.log("option4Success", res)
                        },
                        fail: err => {
                            console.log("option4error", err)
                        }
                    }
                    // wx.onMenuShareTimeline(option4);
                    console.log("option", option1, option2, option3, option4)
                })
            },
            closeShareModal() {
                this.showShareModal = false
            },
            //倒计时
            countDown(intervalName, times, index) {
                clearInterval(this[intervalName])
                this[intervalName] = null
                this[intervalName] = setInterval(() => {
                    let day = 0,
                        hour = 0,
                        minute = 0,
                        second = 0
                    if (times > 0) {
                        day = Math.floor(times / (60 * 60 * 24))
                        hour = Math.floor(times / (60 * 60)) - day * 24
                        minute = Math.floor(times / 60) - day * 24 * 60 - hour * 60
                        second =
                            Math.floor(times) -
                            day * 24 * 60 * 60 -
                            hour * 60 * 60 -
                            minute * 60

                        if (day < 1) day = ""
                        else day = day + "天"
                        if (hour <= 9) hour = "0" + hour
                        if (minute <= 9) minute = "0" + minute
                        if (second <= 9) second = "0" + second
                        this.record_list[index].format_tsp =
                            day + hour + "时" + minute + "分" + second + "秒"
                    } else {
                        this.getPageData()
                        clearInterval(this[intervalName])
                    }
                    times--
                    // console.log('gagagag',intervalName, day + hour + "时" + minute + "分" + second + "秒")
                    // console.log('gagagag',times)
                    // console.log('gagagag',this.format_tsp)
                }, 1000)
            }
        },
        filters: {
            moneyFormatter(val) {
                if (val && !isNaN(val)) {
                    return Number(val).toFixed(2)
                } else {
                    return "0.00"
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .swiper-container {
        /*margin-left: 0 !important;*/
    }

    .swiper-slide {
        width: 5.1rem;
        height: 2.68rem;
    }

    .swiper-slide img {
        width: 5.1rem;
        height: 2.68rem;
    }

    .have-joined-game-page {
        // width: 100%;
        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;
        overflow: hidden;
        position: relative;
        padding-bottom: 50px;
        .game-rule-container {
            display: flex;
            align-items: center;
            position: absolute;
            top: 0.3rem;
            right: 0.22rem;
            font-size: 0.26rem;
            line-height: 1;
            color: #465895;

            img {
                width: 0.3rem;
                height: 0.3rem;
                margin-right: 0.1rem;
            }

            .page-title {
                width: 100%;
                position: fixed;
                left: 0;
                top: 0;
            }
        }

        .game-bonus-container {
            width: 6.4rem;
            padding: 0.3rem 0;
            box-sizing: border-box;
            background: url("../images/SignUp/shadow-bg.png") no-repeat center center;
            background-size: contain;
            /*background: linear-gradient(*/
            /*  90deg,*/
            /*  rgba(255, 255, 255, 0),*/
            /*  #1a285a,*/
            /*  rgba(255, 255, 255, 0)*/
            /*);*/
            margin-top: 2.38rem;

            .bonus-title {
                font-size: 0.3rem;
                line-height: 1;
                color: #fff;
                text-align: center;
            }

            .bonus-amount {
                font-size: 0.64rem;
                line-height: 0.8;
                color: #ffe253;
                text-align: center;
                margin-top: 0.26rem;
            }
        }

        .game-title {
            font-size: 0.36rem;
            line-height: 1;
            color: #fff;
            font-weight: bold;
            margin-top: 0.4rem;
        }

        .game-time {
            font-size: 0.24rem;
            line-height: 1;
            color: #d6dfff;
            padding: 0.12rem 0.38rem;
            border-radius: 0.48rem;
            background: #556cb6;
            margin-top: 0.14rem;
        }

        .target-people-container {
            display: flex;
            margin-top: 0.34rem;

            .target-img {
                width: 0.3rem;
                height: 0.26rem;
            }

            .people-img {
                width: 0.28rem;
                height: 0.24rem;
                margin-left: 0.5rem;
            }

            .target-people-text {
                font-size: 0.26rem;
                line-height: 1;
                color: #fff;
                margin-left: 0.08rem;
            }
        }

        .hr {
            width: 3rem;
            height: 0.01rem;
            background: #6f82c3;
            margin-top: 0.5rem;
        }

        .game-scroll-container {
            width: 100%;
            height: 2.68rem;
            margin-top: 0.4rem;
            padding: 0 0.3rem;
            box-sizing: border-box;
            overflow-x: scroll;
            white-space: nowrap;

            &::-webkit-scrollbar {
                display: none;
            }

            .game-scroll-item {
                width: 5.1rem;
                height: 2.68rem;
                background-image: url(../images/HaveJoinedGame/img_card.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                padding-top: 0.24rem;
                box-sizing: border-box;
                margin-left: 0.2rem;
                display: inline-block;
                vertical-align: top;

                &:first-child {
                    margin-left: 0;
                }

                .item-title-status {
                    width: 100%;
                    padding: 0 0.24rem 0 0.3rem;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

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

                    .item-status0 {
                        padding: 0 0.16rem;
                        box-sizing: border-box;
                        background: rgba(255, 255, 255, 0.4);
                        font-size: 0.26rem;
                        line-height: 0.42rem;
                        color: #fff;
                    }

                    .item-status1 {
                        padding: 0 0.16rem;
                        box-sizing: border-box;
                        background: #fcf776;
                        font-size: 0.26rem;
                        line-height: 0.42rem;
                        color: #703e0b;
                    }

                    .item-status2 {
                        padding: 0 0.16rem;
                        box-sizing: border-box;
                        background: #a5a5a5;
                        font-size: 0.26rem;
                        line-height: 0.42rem;
                        color: #fff;
                    }
                }

                .item-income {
                    width: 100%;
                    padding-left: 0.3rem;
                    box-sizing: border-box;
                    margin-top: 0.4rem;
                    display: flex;
                    align-items: flex-end;

                    .item-amount {
                        font-size: 0.48rem;
                        line-height: 0.8;
                        color: #fcf776;
                    }

                    .item-text {
                        font-size: 0.26rem;
                        line-height: 1;
                        color: #dbf3ff;
                        margin-left: 0.1rem;
                    }
                }

                .item-progress-num {
                    width: 100%;
                    padding: 0 0.3rem;
                    box-sizing: border-box;
                    margin-top: 0.58rem;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .item-progress {
                        height: 0.06rem;
                        background: #fff;
                        position: relative;

                        &:after {
                            content: "";
                            width: 2.46rem;
                            height: 0.06rem;
                            background: rgba(255, 255, 255, 0.5);
                            position: absolute;
                        }
                    }

                    .item-num {
                        font-size: 0.26rem;
                        line-height: 1;
                        color: #fff;
                    }
                }
            }
        }

        .func-btn {
            width: 5.6rem;
            border-radius: 0.92rem;
            background: #fabd21;
            font-size: 0.4rem;
            line-height: 0.92rem;
            color: #fff;
            font-weight: bold;
            text-align: center;
            margin-top: 1.2rem;
        }

        .next-func-btn {
            width: 5.6rem;
            border-radius: 0.92rem;
            background: #0ebfdf;
            font-size: 0.4rem;
            line-height: 0.92rem;
            color: #fff;
            font-weight: bold;
            text-align: center;
            margin-top: 0.3rem;
        }
    }

    .game-status-popup {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 998;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;

        .game-status-container {
            width: 6rem;
            background: #fff;
            border-radius: 0.08rem;
            padding-bottom: 0.4rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            .status-icon {
                width: 5.08rem;
                height: 2.58rem;
                margin-top: -1.29rem;
            }

            .join-success-banner {
                width: 5.44rem;
                height: 3.18rem;
                margin-top: 0.3rem;
            }

            .status-date {
                font-size: 0.36rem;
                line-height: 1;
                color: #333;
                font-weight: bold;
                text-align: center;
                margin-top: 0.4rem;
            }

            .status-money {
                width: 5.04rem;
                height: 2.84rem;
                background-image: url(../images/HaveJoinedGame/pop_gxdb_board.png);
                background-size: 100%;
                margin-top: 0.42rem;

                .popup-text3 {
                    font-size: 0.3rem;
                    line-height: 1;
                    color: #463a2c;
                    text-align: center;
                    margin-top: 0.42rem;
                }

                .popup-text4 {
                    font-size: 1.2rem;
                    line-height: 0.8;
                    color: #fabd21;
                    text-align: center;
                    margin-top: 0.24rem;

                    span {
                        font-size: 0.3rem;
                        line-height: 1;
                        vertical-align: bottom;
                    }
                }

                .popup-text5 {
                    font-size: 0.24rem;
                    line-height: 1;
                    color: #b3aea2;
                    text-align: center;
                    margin-top: 0.42rem;
                }
            }

            .popup-text1 {
                width: 5.34rem;
                font-size: 0.26rem;
                line-height: 0.42rem;
                color: #333;
                text-align: center;
                margin-top: 0.16rem;

                span {
                    color: #fabd21;
                }
            }

            .popup-text2 {
                font-size: 0.24rem;
                line-height: 1;
                color: #a5a5a5;
                text-align: center;
                margin-top: 0.32rem;
            }

            .popup-text6 {
                font-size: 0.26rem;
                line-height: 1;
                color: #bfbfbf;
                text-align: center;
                margin: 0.4rem 0 0.34rem;
            }

            .popup-text7 {
                font-size: 0.26rem;
                line-height: 1;
                color: #8e5b29;
                text-align: center;
            }

            .popup-btn1 {
                width: 4.6rem;
                height: 0.8rem;
                border-radius: 0.8rem;
                font-size: 0.36rem;
                line-height: 0.8rem;
                color: #fff;
                font-weight: bold;
                text-align: center;
                margin-top: 0.4rem;
            }

            .green-btn {
                background: #1fdbb1;
            }

            .yellow-btn {
                background: #fabd21;
            }

            .close-btn {
                width: 0.58rem;
                height: 0.58rem;
                position: absolute;
                bottom: -1.08rem;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
</style>
