<template>
  <div class="sign-up-page">
    <!-- 左上角查看步数按钮 -->
    <!-- <img class="view-steps-btn" src="../images/SignUp/sy_bushu.png"> -->
    <!-- 右上角复活卡 -->
    <Reborn class="reborn-container"></Reborn>
    <!-- 信息广播 -->
    <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>
      <!--      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">
      </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>
  </div>
</template>

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

export default {
  name: "SignUp",
  components: {
    NoticeBonus,
    Reborn
  },
  data() {
    return {
      gameList: [],
      followInfo: {},
      needFollow: false
    };
  },
  created() {
    this.getPageData();
    this.getFollowInfo();
  },
  methods: {
    // 点击卡片整块的跳转
    clickCard(item) {
      if (item.status===1 && item.already_join===0) {
        this.goOtherPage('PartakeChallenge');
      } else {
        this.goWhereDetail(item);
      }
    },
    goOtherPage(pageName) {
      if (!this.followInfo.follow) {
        this.needFollow = true;
        return;
      }
      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 {
          // 未报名
          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;
        }
      });
    }
  }
};
</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;
  .view-steps-btn {
    flex-shrink: 0;
    width: 1.11rem;
    height: 0.84rem;
    display: block;
    position: absolute;
    left: 0;
    top: 1.22rem;
  }
  .reborn-container {
    position: absolute;
    top: .78rem;
    right: .28rem;
  }
  .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.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: 0.34rem;
        font-weight: bold;
      }
    }
  }
}
.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>
