<template>
  <div class="sign-up-page">
    <!-- 右上角复活卡 -->
    <Reborn class="reborn-container"></Reborn>
    <!-- 右上角打卡记录 -->
    <img class="daka-record" src="@/images/SignUp/ic_record.png" @click="$router.push({ name: 'Record' })">
    <!-- 信息广播 -->
    <NoticeBonus class="notice-broadcast"></NoticeBonus>
    <!-- 挑战赛卡片 -->
    <div class="challenge-card" v-for="item in gameList" @click="clickCard(item)">
      <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}}期健步挑战赛</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)&&item.people_cnt">
          <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>
      <!-- status   1 未开始  0 比赛中  2 已结束  3 已淘汰-->
      <!-- already_join   0 未参赛  1 已参赛 -->
      <div class="card-btn" v-if="item.status === 1 && item.already_join === 0">参与挑战</div>
      <div class="card-btn" v-else-if="item.status === 1 && item.already_join === 1" @click.stop="inviteFriend">邀请好友一起比赛</div>
      <div class="card-btn" v-else-if="item.status === 0 && item.already_join === 1">提交今日步数</div>
      <div class="statusnormal" v-else>
        <div v-if="item.status === 3 && item.already_join === 1">已淘汰</div>
        <div v-else>查看详情</div>
        <img src="@/images/SignUp/detail_bg.png">
      </div>
    </div>
    <!-- 没有关注公众号弹窗 -->
    <div class="game-auth-popup" v-if="needFollow">
      <div class="game-auth-container">
        <img class="bg-img" src="@/images/common/focus_gzh.png">
        <img class="close-btn" src="@/images/common/pop_ic_close.png" @click="closePopup()">
      </div>
    </div>
    <ShareModal @close="closeShareModal" v-if="showShareModal"></ShareModal>
  </div>
</template>

<script>
import NoticeBonus from "@/components/NoticeBonus.vue";
import Reborn from "@/components/Reborn.vue";
import ShareModal from "@/components/ShareModal.vue";
import {
  daka_index,
  select_follow
} from "@/components/axios/api";

export default {
  name: "SignUp",
  components: {
    NoticeBonus,
    Reborn,
    ShareModal
  },
  data() {
    return {
      gameList: [],
      followInfo: {},
      needFollow: false,
      showShareModal: false,
    };
  },
  created() {
    this.getPageData();
    this.getFollowInfo();
  },
  mounted() {
    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"];
      }
    }
  },
  methods: {
    // 点击卡片整块的跳转
    clickCard(item) {
      if (item.status === 1 && item.already_join === 0) { // 未开始 && 未参赛 => 去报名页
        if (this.followInfo.follow) {
          this.$router.push({ name: 'PartakeChallenge' });
        } else {
          this.needFollow = true;
        }
      } else if (item.already_join === 1) { // 已参赛 => 去比赛页
        this.$router.push({
          name: "HaveJoinedGame",
          query: {
            week: item.week
          }
        });
      } else { // 去详情页
        if (sessionStorage.getItem('userHaveJoinGame') === 'true') {
          item.daka_signup = true;
        } else {
          item.daka_signup = false;
          item.newGameWeek = this.gameList[0].week.slice(4,8);
        }
        sessionStorage.setItem("ChallengeDetailData", JSON.stringify(item));
        this.$router.push({ name: "ChallengeDetail" });
      }
    },
    // 关注公众号
    getFollowInfo() {
      select_follow().then(res => {
        if (res.code == 0) {
          this.followInfo = res.data;
          sessionStorage.setItem("followInfo", JSON.stringify(res.data));
        }
      });
    },
    // 关注公众号弹框
    closePopup() {
      this.needFollow = false;
    },
    // 获取页面数据
    getPageData() {
      daka_index().then(res => {
        if (res.code === 0) {
          res.data.forEach(item => {
            item.action = item.week.substring(item.week.length - 4);
          });
          this.gameList = res.data;
        }
      });
    },
    // 分享
    inviteFriend() {
      console.log("inviteFriend");
      this.showShareModal = true;
      let id = this.userData.id;
      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>
.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;
  .reborn-container {
    position: absolute;
    top: .38rem;
    right: .15rem;
  }
  .daka-record {
    width: 1.06rem;
    height: 0.9rem;
    display: block;
    position: absolute;
    top: 1.58rem;
    right: .15rem;
  }
  .notice-broadcast {
    flex-shrink: 0;
    margin: 4.5rem 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: 0.24rem;
      height: 0.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;
      left: 50%;
      transform: translateX(-50%);
      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.34rem;
      font-weight: bold;
      letter-spacing: 0.01rem;
      line-height: 1;
      color: #fff;
      position: absolute;
      bottom: 0.38rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
.game-auth-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-auth-container {
    border-radius: 0.08rem;
    padding-bottom: 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .bg-img {
      width: 6.4rem;
      height: 7.08rem;
      display: block;
    }
    .close-btn {
      width: 0.58rem;
      height: 0.58rem;
      position: absolute;
      top: -0.88rem;
      right: 0;
    }
  }
}
</style>
