<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.action}}期耐力赛</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" v-if="pageData.daka_signup">邀请好友来参赛</div>
    <div class="share-btn" style="background: #fabd21;" @click="goOtherPage('PartakeChallenge')" v-else>立即报名{{pageData.newGameWeek}}期</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.pageData);
    if (window["userData"]) {
      this.userData = window["userData"];
    } else {
      let localUserData = localStorage.getItem("walk_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);
            this.showShareModal = false;
          },
          fail: err => {
            console.log("option4error", err);
            this.showShareModal = false;
          }
        };
        // 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: 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;
  }
  .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: 1.1rem 0 .6rem;
  }
}
</style>
