<template>
  <div class="sign-up-page">
    <!-- 左上角查看步数按钮 -->
    <!-- <img class="view-steps-btn" src="../images/SignUp/sy_bushu.png"> -->
    <!-- 信息广播 -->
    <NoticeBonus class="notice-broadcast"></NoticeBonus>
    <!-- 挑战赛卡片 -->
    <div class="challenge-card" v-for="item in gameList">
      <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">
          <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" alt="">
      </div>
    </div>
    <!-- 没有关注公众号弹窗 -->
    <div class="game-status-popup" v-if="needFollow">
      <div class="game-status-container">
        <div class="status-date">请关注公众号报名</div>
        <img :src="followInfo.img_url" alt="" class="img_code">
        <div class="follow-tip">
          <p>由于在公众号内才能获取运动数据</p>
          <p>请长按上方二维码关注公众号后报名</p>
        </div>
        <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
      </div>
    </div>
    <img :src="followInfo.img_url" alt="" style="display: none"> 
  </div>
</template>

<script>
import NoticeBonus from "@/components/NoticeBonus.vue";
import Free from "@/components/Free.vue";
import Modal from "@/components/Modal.vue";
import PayFailModal from "@/components/PayFailModal.vue";
import {
  dakaPay,
  track,
  userCards,
  daka_index,
  select_follow
} from "@/components/axios/api";
import { constants } from "crypto";

export default {
  name: "SignUp",
  components: {
    NoticeBonus,
    Modal,
    Free,
    PayFailModal
  },
  data() {
    return {
      contract_data: {},
      showFreeModal: false,
      modalTitle: "",
      modalDesc: "",
      modalShown: false,
      current_date: {},
      isShowPayFail: false,
      isFollow: false,
      gameList: [],
      followInfo: {
      },
      needFollow: false
    };
  },
  created() {
    this.getPageData();
    this.getFollowInfo();
  },
  methods: {
    goOtherPage(pageName) {
      if(!this.followInfo.follow){
        this.needFollow = true
        return 
      } 
      console.log("pageName", pageName);
      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 {
          console.log("item", item);
          // 未报名
          sessionStorage.setItem("ChallengeDetailData", JSON.stringify(item));
          this.$router.push({ name: "ChallengeDetail" });
        }
      }
    },
    getFollowInfo() {
      select_follow().then(res => {
        console.log(res);
        if (res.code == 0) {
          this.followInfo = res.data
          sessionStorage.setItem('followInfo',JSON.stringify(res.data))
        }
      });
    },
    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;
          console.log("gameList", this.gameList);
        }
      });
    },
    togglePayFail() {
      this.isShowPayFail = !this.isShowPayFail;
    },
    showSuccess() {
      this.showModal("温馨提示", "报名成功", {
        scb: () => {
          if (this.isFollow == 1) {
            this.$router.push({ name: "Read" });
          } else {
            this.$router.push({ name: "Success" });
          }
        }
      });
    },
    confirmModal(scb) {
      scb && scb();
      this.modalShown = false;
    },
    showFree(e) {
      e.stopPropagation();
      track("free_contract_show");
      if (localStorage.getItem("first_show_free") == 1) {
        localStorage.setItem("first_show_free", 2);
        this.canShowFree = false;
      } else {
        this.canCheckShowFree = false;
        this.canShowFree = false;
      }
      userCards().then(res => {
        console.log("获取免契约金数据", res);
        let data = {
          card: res.data.contract_card,
          cnt: res.data.contract_cnt
        };
        this.current_date = new Date(res.date);
        // if (
        //   // 如果明天没报名，而且还有免契约金卡，则可以使用
        //   !this.date_status[1].user_status.daka_signup &&
        //   res.data.contract_card > 0
        // ) {
        //   data.can_get = true;
        //   // 其他情况，显示报名下期比赛
        // } else {
        // data.can_get = false;
        // }
        this.contract_data = JSON.parse(JSON.stringify(data));
        this.showFreeModal = true;
      });
    },
    closeFree() {
      this.showFreeModal = false;
    },
    showModal(title, desc, option) {
      this.modalTitle = title || "";
      this.modalDesc = desc || "";
      this.modalOption = option || {};
      this.modalShown = true;
    },
    closeModal() {
      this.modalShown = false;
    },
    payToSign() {
      dakaPay().then(response => {
        this.current_date = new Date(response.date);
        if (response.code == 1) {
          this.showModal("温馨提示", response.msg);
          return;
        }
        let result = response.data;
        console.log("请求打卡支付数据", result);
        if (result) {
          WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
              appId: result.appId, //公众号名称，由商户传入
              timeStamp: `${result.timeStamp}`, //时间戳，自1970年以来的秒数
              nonceStr: result.nonceStr, //随机串
              package: result.package,
              signType: result.signType, //微信签名方式：
              paySign: result.paySign //微信签名
            },
            // result,
            res => {
              console.log("支付调用结果", res);
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                // 支付成功后的回调函数
                console.log("支付成功");
                this.showModal("温馨提示", "报名成功", {
                  scb: () => {
                    if (this.isFollow == 1) {
                      this.$router.push({ name: "Read" });
                    } else {
                      this.$router.push({ name: "Success" });
                    }
                  }
                });
                // this.dateSelect(2);
                // localStorage.setItem("is_every", 0)
                // location.replace("#/Success");
              }
              if (res.err_msg == "get_brand_wcpay_request:fail") {
                // this.showModal("温馨提示", "支付服务繁忙，请稍后重试");
                this.togglePayFail();
              }
              if (res.err_msg == "get_brand_wcpay_request:cancel") {
                // console.log("支付取消");
                this.togglePayFail();
              }
            }
          );
        }
      });
    },
    closePopup() {
      this.needFollow = 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;

  .view-steps-btn {
    flex-shrink: 0;
    width: 1.11rem;
    height: 0.84rem;
    display: block;
    position: absolute;
    left: 0;
    top: 1.22rem;
  }

  .notice-broadcast {
    flex-shrink: 0;
    margin: 4.3rem 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;
      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-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: 6.4rem;
    height: 7.08rem;
    background: url(../images/SignUp/follow_modal.png) no-repeat center center;
    background-size: cover;
    border-radius: 0.08rem;
    padding-bottom: 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .img_code{
      width: 2.2rem;
      height: 2.2rem;
      margin-top: 1.56rem;
    }
    .follow-tip{
      font-size: .3rem;
      font-weight: bold;
      line-height: .46rem;
      text-align: center;
      margin-top: 1.2rem;
    }
    .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: #fff;
      font-weight: bold;
      text-align: center;
      margin-top: 0.7rem;
    }
    .status-money {
      width: 5.04rem;
      height: 2.84rem;
      background-image: url(../images/HaveJoinedGame/pop_gxdb_board.png);
      background-size: 100%;
      margin-top: 0.42rem;
    }
    .green-btn {
      background: #1fdbb1;
    }
    .yellow-btn {
      background: #fabd21;
    }
    .close-btn {
      width: 0.58rem;
      height: 0.58rem;
      position: absolute;
      top: -.88rem;
      right: 0
    }
  }
}
</style>
