<template>
    <div class="partake-challenge-page">
        <Title class="page-title" title="　" v-on:goback="goback" show_back="true"></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" v-if="pageData.status !== 2">预计达标奖励金（元）</div>
            <div class="bonus-title" v-else>达标奖励金（元）</div>
            <div class="bonus-amount">{{pageData.bet_bonus}}</div>
        </div>
        <div class="game-title">{{pageData.target_step}}步三日耐力赛</div>
        <div class="game-time">开赛时间：{{pageData.start_format}} — {{pageData.end_format}}</div>
        <div class="hr"></div>
        <div class="game-info-container">
            <div class="game-info-section">
                <div class="section-item">
                    <div class="item-value">{{pageData.total_money}}</div>
                    <div class="item-key">总奖励金（元）</div>
                </div>
                <div class="section-item">
                    <div class="item-value">{{pageData.bet_rate}}</div>
                    <div class="item-key">收益率</div>
                </div>
            </div>
            <div class="game-info-section">
                <div class="section-item">
                    <div class="item-value">{{pageData.people_cnt}}</div>
                    <div class="item-key">达标人数</div>
                </div>
                <div class="section-item">
                    <div class="item-value">{{pageData.total_signup}}</div>
                    <div class="item-key">参赛人数</div>
                </div>
            </div>
        </div>
        <div class="share-btn" @click="inviteFriend">邀请好友来参赛</div>
        <ShareModal
                v-on:close="closeShareModal"
                v-if="showShareModal"
        ></ShareModal>
    </div>
</template>

<script>
    import Title from "@/components/Title.vue"
    import ShareModal from "@/components/ShareModal.vue"
    import {dakaPay, shareContent, track, liinShare} from "@/components/axios/api"
    let grabStartTimer = null
    export default {
        name: "ChallengeDetail",
        components: {
            Title,
            ShareModal
        },
        data () {
            return {
                pageData: JSON.parse(sessionStorage.getItem('ChallengeDetailData')),
                showShareModal: false,
                userData: null,
                grabTimer: '--时--分--秒'
            }
        },
        mounted () {
            console.log("this.pageType", this.page_type)
            if (window["userData"]) {
                this.userData = window["userData"]
            } else {
                let localUserData = localStorage.getItem("bs_userData")
                if (localUserData) {
                    window["userData"] = JSON.parse(localUserData)
                    this.userData = window["userData"]
                }
            }
            console.log("userData", this.userData)
        },
        methods: {
            goback () {
                history.go(-1)
            },
            goOtherPage (pageName) {
                this.$router.push({name: pageName})
            },
            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
            },
        }
    }
</script>

<style lang="less" scoped>
    .partake-challenge-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;
        .page-title {
            position: fixed;
            left: 0;
            top: 0;
        }
        .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;
            }
        }
        .game-bonus-container {
            width: 6.4rem;
            padding: 0.3rem 0;
            box-sizing: border-box;
            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;
        }
        .hr {
            width: 3rem;
            height: 0.01rem;
            background: #6f82c3;
            margin-top: 0.5rem;
        }
        .game-info-container {
            width: 6rem;
            background: #3d4f8f;
            margin-top: 0.5rem;
            .game-info-section {
                width: 100%;
                height: 1.34rem;
                display: flex;
                align-items: center;
                .section-item {
                    flex: 1;
                    position: relative;
                    &:last-child:after {
                        content: "";
                        width: 0.02rem;
                        height: 0.4rem;
                        background: #a2b4ee;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    .item-value {
                        font-size: 0.4rem;
                        line-height: 0.8;
                        color: #fff;
                        text-align: center;
                    }
                    .item-key {
                        font-size: 0.26rem;
                        line-height: 1;
                        color: #fff;
                        text-align: center;
                        margin-top: 0.18rem;
                    }
                }
            }
        }
        .share-btn {
            width: 5.6rem;
            border-radius: 0.92rem;
            background: #1fdbb1;
            font-size: 0.4rem;
            line-height: 0.92rem;
            color: #fff;
            font-weight: bold;
            text-align: center;
            margin-top: 2.24rem;
        }
    }
</style>
