<template>
  <div class="have-joined-game-page">
    <Title class="page-title" @goback="goback" show_back="true" v-if="currentPage()==='HaveJoinedGame'"></Title>
    <div class="game-rule-container" @click="goOtherPage('Rule')">
      <img src="../images/ChallengeDetail/ic_que.png">
      活动规则
    </div>
    <!-- 右上角复活卡 -->
    <Reborn class="reborn-container"></Reborn>
    <div class="game-bonus-container">
      <div class="bonus-title">本期累计奖励金（元）</div>
      <div class="bonus-amount">{{bet_bonus|moneyFormatter}}</div>
    </div>
    <div class="game-title">{{target_steps}}步{{record_list.length}}日耐力赛</div>
    <div class="game-time">开赛时间：{{period_start}} — {{period_end}}</div>
    <div class="target-people-container">
      <img class="target-img" src="../images/HaveJoinedGame/ic_shoes.png">
      <div class="target-people-text">每日{{target_steps}}步达标</div>
      <img class="people-img" src="../images/HaveJoinedGame/ic_people.png">
      <div class="target-people-text">已有{{total_signup}}人参赛</div>
    </div>
    <div class="hr"></div>
    <swiper :options="swiperOption" ref="mySwiper" class="game-scroll-container" v-show="showSwiper">
      <swiper-slide v-for="(item,index) in record_list" :key="index">
        <div class="game-scroll-item">
          <div class="item-title-status">
            <div class="item-title">第{{item.days}}天</div>
            <!-- status   0:未开始  1:比赛中  2:已结束  3:已淘汰-->
            <!-- is_complete   0:比赛中   1:已达标  2:未达标-->
            <div class="item-status0" v-if="item.status === 0">未开始</div>
            <div class="item-status1" v-else-if="item.status === 1 && item.is_complete === 1">已达标</div>
            <div class="item-status2" v-else-if="item.status === 1">未达标</div>
            <div class="item-status1" v-else-if="item.status === 2">已达标</div>
            <div class="item-status2" v-else-if="item.status === 3">已淘汰</div>
          </div>
          <div class="item-income" v-if="(item.status == 1 || item.status == 2) && item.money">
            <div class="item-amount">{{item.money|moneyFormatter}}</div>
            <div class="item-text">(元) 收益</div>
          </div>
          <div class="item-income" v-else-if="(item.status == 1 || item.status == 2) && item.yj_money">
            <div class="item-amount">{{item.yj_money|moneyFormatter}}</div>
            <div class="item-text">(元) 预计收益</div>
          </div>
          <div class="item-income" v-else style="visibility: hidden;">
            <div class="item-amount">0.00</div>
            <div class="item-text">(元)</div>
          </div>
          <div class="item-progress-num">
            <div class="item-num" v-if="item.status===0">还有{{item.format_tsp || '0秒'}}开始</div>
            <template v-else>
              <div class="item-progress" :style="'width: '+item.rate/100*2.46+'rem;'" v-if="index ==0 || (index > 0 && record_list[index-1].status != 3)"></div>
              <div class="item-num">
                <!-- status   0:未开始  1:比赛中  2:已结束  3:已淘汰-->
                <!-- is_complete   0:比赛中   1:已达标  2:未达标-->
                <span v-if="item.status === 1 && item.is_complete === 1">比赛中({{item.step_num}}步)</span>
                <span v-else-if="item.status === 1">({{item.step_num}}/{{target_steps}}步)</span>
                <span v-else-if="item.status === 2">已结束({{item.step_num}}步)</span>
                <span v-else-if="item.status === 3 && (index > 0 && record_list[index-1].status === 3)">已失去比赛资格</span>
                <span v-else-if="item.status === 3">已结束({{item.step_num}}步)</span>
              </div>
            </template>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination" style="opacity: 0"></div>
    </swiper>
    <div class="func-btn green-btn" @click="inviteFriend" v-if="record_list.length&&record_list[0].status === 0">邀请好友来参赛</div>
    <div class="func-btn" @click="changeXcxPopup()" v-else>提交今日步数</div>
    <div class="next-func-btn" :style="next_period?'background: #5f95e7;':''" v-if="next_signup" @click="joinNextGame()">{{next_period?`已报名${String(next_period).slice(4,8)}期`:'报名下一期'}}</div>
    <!-- 报名成功弹框 -->
    <div class="game-status-popup" v-if="userHavePaidGame">
      <div class="game-status-container">
        <img class="status-icon" src="../images/HaveJoinedGame/pop_bmcg_title.png">
        <img class="join-success-banner" src="../images/HaveJoinedGame/pop_bmcg_img.png">
        <div class="popup-text1">
          <span>每日24点前</span>打开「步步运动赚」小程序，手动提交今日步数，否则可能导致无法分钱哦！
        </div>
        <div class="popup-text2">注：微信暂不支持小程序实时更新步数</div>
        <div class="popup-btn1 green-btn" @click="inviteFriend">邀请好友来参赛</div>
        <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePayPopup()">
      </div>
    </div>
    <!-- 恭喜达标弹框 -->
    <div class="game-status-popup" v-if="popupData.window && popupData.daka_done">
      <div class="game-status-container">
        <img class="status-icon" src="../images/HaveJoinedGame/pop_gxdb_title.png">
        <div class="status-date">第{{popupData.days}}日达标</div>
        <div class="status-money">
          <div class="popup-text3">{{popupData.days===popupData.all_days?'总奖励金':'返还契约金'}}</div>
          <div class="popup-text4">
            {{popupData.yj_money|moneyFormatter}}
            <span>元</span>
          </div>
          <div class="popup-text5">第{{String(popupData.week).substring(4,8)}}期{{popupData.target_steps}}步{{popupData.all_days}}日耐力赛</div>
        </div>
        <div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
        <div class="popup-text7">{{popupData.days===popupData.all_days?'奖励金':'契约金'}}将于12点后返还至钱包中</div>
        <div class="popup-btn1 green-btn" @click="inviteFriend">邀请好友来参赛</div>
        <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
      </div>
    </div>
    <!-- 你已被淘汰弹框 -->
    <div class="game-status-popup" v-else-if="popupData.window && !popupData.daka_done">
      <div class="game-status-container">
        <img class="status-icon" src="../images/HaveJoinedGame/pop_out_title.png">
        <div class="status-date">第{{popupData.days}}日未达标</div>
        <div class="status-money">
          <div class="popup-text3">扣除契约金</div>
          <div class="popup-text4">
            {{popupData.yj_money|moneyFormatter}}
            <span>元</span>
          </div>
          <div class="popup-text5">第{{String(popupData.week).substring(4,8)}}期{{popupData.target_steps}}步{{popupData.all_days}}日耐力赛</div>
        </div>
        <div class="popup-text6">{{popupData.target_steps}}步达标，今天走了{{popupData.step_num}}步</div>
        <div class="popup-text7">已达标{{popupData.days}}天，契约金已返还至你的钱包</div>
        <div class="popup-btn1 yellow-btn" @click="joinNextGame()">报名下一期</div>
        <img class="close-btn" src="../images/common/pop_ic_close.png" @click="closePopup()">
      </div>
    </div>
    <!-- 提交步数去小程序弹框 -->
    <div class="go-xcx-popup" v-if="showXcxPopup">
      <div class="go-xcx-container">
        <img class="main-img" src="../images/common/go_xcx.jpg">
        <img class="close-btn" src="../images/common/pop_ic_close.png" @click="changeXcxPopup()">
      </div>
    </div>
    <ShareModal v-on:close="closeShareModal" v-if="showShareModal"></ShareModal>
  </div>
</template>

<script>
import Title from "@/components/Title.vue";
import {
  daka_status_detail,
  pop_up_windows,
  shareContent,
  track
} from "@/components/axios/api";
import ShareModal from "@/components/ShareModal.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import Reborn from "@/components/Reborn.vue";

export default {
  name: "HaveJoinedGame",
  components: {
    Title,
    swiper,
    swiperSlide,
    Reborn,
    ShareModal
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: "auto",
        centeredSlides: true,
        spaceBetween: 10,
        notNextTick: true,
        loop: false,
        autoplay: false,
        pagination: {
          el: ".swiper-pagination",
          clickable: false
        }
      },
      showSwiper: false,
      bet_bonus: "0.00",
      next_signup: false,
      next_period: '',
      period_end: "",
      period_start: "",
      total_signup: 0,
      target_steps: 0,
      record_list: [],
      popupData: {},
      current_day: 0,
      userHavePaidGame: false,
      showShareModal: false,
      userData: null,
      showXcxPopup: false
    };
  },
  created() {
    this.getPageData();
    this.isPopup();
    // 支付成功弹框
    if (sessionStorage.getItem("userHavePaidGame") === "true") {
      sessionStorage.setItem("userHavePaidGame", "false");
      this.userHavePaidGame = true;
    }
  },
  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"];
      }
    }
  },
  // updated() {
  //   // 显示页面最底部
  //   this.$nextTick(function(){
  //     document.getElementsByClassName('have-joined-game-page-scroll')[0].scrollTop = document.body.scrollHeight;
  //   })
  // },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    changeXcxPopup() {
      if (this.showXcxPopup) {
        this.getPageData();
        this.isPopup();
      }
      this.showXcxPopup = !this.showXcxPopup;
    },
    joinNextGame() {
      if (this.next_period) {
        this.$router.push({
          name: "HaveJoinedGame",
          query: {
            week: this.next_period
          }
        });
      } else {
        this.$router.push({
          name: "PartakeChallenge",
          query: {
            nextGame: true
          }
        });
      }
    },
    goOtherPage(pageName) {
      this.$router.push({ name: pageName });
    },
    closePayPopup() {
      this.userHavePaidGame = false;
    },
    closePopup() {
      this.popupData.window = false;
    },
    goback() {
      history.go(-1);
    },
    currentPage() {
      return this.$router.history.current.name;
    },
    getPageData() {
      daka_status_detail(this.$route.query.week).then(res => {
        if (res.code === 0) {
          const pageData = res.data;
          if (pageData.record_list && pageData.record_list.length) {
            pageData.record_list.forEach((item, index) => {
              if (item.status === 0) {
                item.format_tsp = this.countDown(
                  "interval" + index,
                  parseInt((item.tsp * 1000 - Date.now()) / 1000),
                  index
                );
              }
            });
          }
          this.bet_bonus = pageData.bet_bonus;
          this.next_signup = pageData.next_signup;
          this.next_period = pageData.next_period;
          this.period_end = pageData.period_end;
          this.period_start = pageData.period_start;
          this.total_signup = pageData.total_signup;
          this.target_steps = pageData.target_steps;
          this.record_list = pageData.record_list;
          this.current_day = pageData.current_day - 1;
          this.showSwiper = true;
          this.$nextTick(() => {
            this.swiper.slideTo(this.current_day, 1200, false);
          });
        }
      });
    },
    isPopup() {
      pop_up_windows().then(res => {
        if (res.code === 0) {
          this.popupData = res.data;
        }
      });
    },
    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;
    },
    //倒计时
    countDown(intervalName, times, index) {
      clearInterval(this[intervalName]);
      this[intervalName] = null;
      this[intervalName] = setInterval(() => {
        let day = 0,
          hour = 0,
          minute = 0,
          second = 0;
        if (times > 0) {
          day = Math.floor(times / (60 * 60 * 24));
          hour = Math.floor(times / (60 * 60)) - day * 24;
          minute = Math.floor(times / 60) - day * 24 * 60 - hour * 60;
          second =
            Math.floor(times) -
            day * 24 * 60 * 60 -
            hour * 60 * 60 -
            minute * 60;

          if (day < 1) day = "";
          else day = day + "天";
          if (hour <= 9) hour = "0" + hour;
          if (minute <= 9) minute = "0" + minute;
          if (second <= 9) second = "0" + second;
          this.record_list[index].format_tsp =
            day + hour + "时" + minute + "分" + second + "秒";
        } else {
          this.getPageData();
          clearInterval(this[intervalName]);
        }
        times--;
        // console.log('gagagag',intervalName, day + hour + "时" + minute + "分" + second + "秒")
        // console.log('gagagag',times)
        // console.log('gagagag',this.format_tsp)
      }, 1000);
    }
  },
  filters: {
    moneyFormatter(val) {
      if (val && !isNaN(val)) {
        return Number(val).toFixed(2);
      } else {
        return "0.00";
      }
    }
  }
};
</script>

<style lang="less" scoped>
.swiper-container {
  /*margin-left: 0 !important;*/
}

.swiper-slide {
  width: 5.1rem;
  height: 2.68rem;
}

.swiper-slide img {
  width: 5.1rem;
  height: 2.68rem;
}

.have-joined-game-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;
  position: relative;
  padding-bottom: 1.3rem;
  box-sizing: border-box;
  .page-title {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
  }
  .game-rule-container {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0.34rem;
    right: 0.22rem;
    font-size: 0.26rem;
    line-height: 1;
    color: #465895;
    z-index: 3;
    img {
      width: 0.3rem;
      height: 0.3rem;
      margin-right: 0.1rem;
    }
  }
  .reborn-container {
    position: absolute;
    top: 1rem;
    right: .28rem;
  }
  .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;
    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;
  }

  .target-people-container {
    display: flex;
    margin-top: 0.34rem;

    .target-img {
      width: 0.3rem;
      height: 0.26rem;
    }

    .people-img {
      width: 0.28rem;
      height: 0.24rem;
      margin-left: 0.5rem;
    }

    .target-people-text {
      font-size: 0.26rem;
      line-height: 1;
      color: #fff;
      margin-left: 0.08rem;
    }
  }

  .hr {
    width: 3rem;
    height: 0.01rem;
    background: #6f82c3;
    margin-top: 0.5rem;
  }

  .game-scroll-container {
    width: 100%;
    height: 2.68rem;
    margin-top: 0.4rem;
    padding: 0 0.3rem;
    box-sizing: border-box;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      display: none;
    }

    .game-scroll-item {
      width: 5.1rem;
      height: 2.68rem;
      background-image: url(../images/HaveJoinedGame/img_card.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding-top: 0.24rem;
      box-sizing: border-box;
      margin-left: 0.2rem;
      display: inline-block;
      vertical-align: top;

      &:first-child {
        margin-left: 0;
      }

      .item-title-status {
        width: 100%;
        padding: 0 0.24rem 0 0.3rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item-title {
          font-size: 0.3rem;
          line-height: 1;
          color: #fff;
        }

        .item-status0 {
          padding: 0 0.16rem;
          box-sizing: border-box;
          background: rgba(255, 255, 255, 0.4);
          font-size: 0.26rem;
          line-height: 0.42rem;
          color: #fff;
        }

        .item-status1 {
          padding: 0 0.16rem;
          box-sizing: border-box;
          background: #fcf776;
          font-size: 0.26rem;
          line-height: 0.42rem;
          color: #703e0b;
        }

        .item-status2 {
          padding: 0 0.16rem;
          box-sizing: border-box;
          background: #a5a5a5;
          font-size: 0.26rem;
          line-height: 0.42rem;
          color: #fff;
        }
      }

      .item-income {
        width: 100%;
        padding-left: 0.3rem;
        box-sizing: border-box;
        margin-top: 0.4rem;
        display: flex;
        align-items: flex-end;

        .item-amount {
          font-size: 0.48rem;
          line-height: 0.8;
          color: #fcf776;
        }

        .item-text {
          font-size: 0.26rem;
          line-height: 1;
          color: #dbf3ff;
          margin-left: 0.1rem;
        }
      }

      .item-progress-num {
        width: 100%;
        padding: 0 0.3rem;
        box-sizing: border-box;
        margin-top: 0.58rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item-progress {
          height: 0.06rem;
          background: #fff;
          position: relative;

          &:after {
            content: "";
            width: 2.46rem;
            height: 0.06rem;
            background: rgba(255, 255, 255, 0.5);
            position: absolute;
          }
        }

        .item-num {
          font-size: 0.26rem;
          line-height: 1;
          color: #fff;
        }
      }
    }
  }

  .func-btn {
    width: 5.6rem;
    border-radius: 0.92rem;
    background: #fabd21;
    font-size: 0.4rem;
    line-height: 0.92rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-top: 1.2rem;
  }
  .green-btn {
    background: #1fdbb1;
  }

  .next-func-btn {
    width: 5.6rem;
    border-radius: 0.92rem;
    background: #0ebfdf;
    font-size: 0.4rem;
    line-height: 0.92rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-top: 0.3rem;
  }
}

.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: 6rem;
    background: #fff;
    border-radius: 0.08rem;
    padding-bottom: 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .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: #333;
      font-weight: bold;
      text-align: center;
      margin-top: 0.4rem;
    }

    .status-money {
      width: 5.04rem;
      height: 2.84rem;
      background-image: url(../images/HaveJoinedGame/pop_gxdb_board.png);
      background-size: 100%;
      margin-top: 0.42rem;

      .popup-text3 {
        font-size: 0.3rem;
        line-height: 1;
        color: #463a2c;
        text-align: center;
        margin-top: 0.42rem;
      }

      .popup-text4 {
        font-size: 1.2rem;
        line-height: 0.7;
        color: #fabd21;
        text-align: center;
        margin-top: 0.24rem;

        span {
          font-size: 0.3rem;
          line-height: 1;
          vertical-align: bottom;
        }
      }

      .popup-text5 {
        font-size: 0.24rem;
        line-height: 1;
        color: #b3aea2;
        text-align: center;
        margin-top: 0.42rem;
      }
    }

    .popup-text1 {
      width: 5.34rem;
      font-size: 0.26rem;
      line-height: 0.42rem;
      color: #333;
      text-align: center;
      margin-top: 0.16rem;

      span {
        color: #fabd21;
      }
    }

    .popup-text2 {
      font-size: 0.24rem;
      line-height: 1;
      color: #a5a5a5;
      text-align: center;
      margin-top: 0.32rem;
    }

    .popup-text6 {
      font-size: 0.26rem;
      line-height: 1;
      color: #bfbfbf;
      text-align: center;
      margin: 0.4rem 0 0.34rem;
    }

    .popup-text7 {
      font-size: 0.26rem;
      line-height: 1;
      color: #8e5b29;
      text-align: center;
    }

    .popup-btn1 {
      width: 4.6rem;
      height: 0.8rem;
      border-radius: 0.8rem;
      font-size: 0.36rem;
      line-height: 0.8rem;
      color: #fff;
      font-weight: bold;
      text-align: center;
      margin-top: 0.4rem;
    }

    .green-btn {
      background: #1fdbb1;
    }

    .yellow-btn {
      background: #fabd21;
    }

    .close-btn {
      width: 0.58rem;
      height: 0.58rem;
      position: absolute;
      top: -0.88rem;
      right: 0;
    }
  }
}

.go-xcx-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;
  .go-xcx-container {
    position: relative;
    .main-img {
      width: 6.4rem;
      height: 8rem;
      display: block;
    }
    .close-btn {
      width: 0.58rem;
      height: 0.58rem;
      position: absolute;
      top: -0.88rem;
      right: 0;
    }
  }
}
</style>
