<template>
  <div class="record-page">
    <div class="banner">
      <Title title="挑战明细" v-on:goback="goback" show_back="true" arrowColor="white"></Title>
      <div class="amount-detail" @click="goOtherPage('AmountDetail')">资金明细</div>
      <div class="total-amount-container">
        <div class="title">总奖励金（元）</div>
        <div class="amount">{{recordTotal.money | moneyFormatter }}</div>
      </div>
      <div class="other-info-container">
        <div class="other-info-item">
          <div class="title">参赛次数</div>
          <div class="content">{{recordTotal.total}}</div>
        </div>
        <div class="other-info-item">
          <div class="title">达标率</div>
          <div class="content">{{recordTotal.rach_rate}}%</div>
        </div>
        <div class="other-info-item">
          <div class="title">达标次数</div>
          <div class="content">{{recordTotal.daka_count}}</div>
        </div>
      </div>
    </div>
    <div class="card-container-list" @scroll="onScroll">
      <div class="card-item" v-for="(item,index) in recordList.records" @click="goWhereDetail(item.week)">
        <div class="card-title">{{item.week}}期-{{item.target_steps}}步{{item.total_days}}日耐力赛<template v-if="item.days">（第{{item.days}}天）</template></div>
        <div class="card-detail-container">
          <div class="detail-item">
            <div class="item-title">累计奖励金(元)</div>
            <div class="item-content-point">{{item.money | moneyFormatter}}</div>
          </div>
          <div class="detail-item">
            <div class="item-title">当前步数</div>
            <div class="item-content">{{item.steps || 0}}</div>
          </div>
          <div class="detail-item">
            <div class="item-title">打卡次数</div>
            <div class="item-content">{{item.daka_count || 0}}</div>
          </div>
        </div>
        <img class="corner-marker" src="../images/Record/status0.png" v-if="item.at_present === 2">
        <img class="corner-marker" src="../images/Record/status1.png" v-else-if="item.at_present === 1">
        <img class="corner-marker" src="../images/Record/status2.png" v-else-if="item.at_present === 3">
        <img class="corner-marker" src="../images/Record/status3.png" v-else-if="item.at_present === 0">
      </div>
      <div class="no-more-list">没有更多数据啦~</div>
    </div>
  </div>
</template>
<script>
  import Title from "@/components/Title.vue";
  import {dakaRecordTotal, dakaRecordList} from "@/components/axios/api";

  export default {
    name: "Record",
    components: {
      Title
    },
    data() {
      return {
        recordTotal: {
          daka_count: 0,
          money: 0,
          rach_rate: 0,
          total: 0
        },
        page: 1,
        canScroll: true,
        recordList: {
          next_page: false,
          records: []
        }
      };
    },
    methods: {
      goOtherPage(pageName) {
        this.$router.push({name: pageName});
      },
      goback() {
        history.go(-1);
      },
      toRecordDetail(item) {
        // location.replace("#/RecordDetail");
        sessionStorage.setItem("selectedRecord", JSON.stringify(item));
        this.$router.push({name: "RecordDetail"})
      },
      goWhereDetail(week) {
        this.$router.push({
          name: 'HaveJoinedGame',
          query: {
            week: week
          }
        });
      },
      onScroll(event) {
        if (this.recordList.next_page && this.canScroll) {
          let offsetHeight = event.currentTarget.offsetHeight,
            scrollHeight = event.target.scrollHeight,
            scrollTop = event.target.scrollTop,
            scrollBottom = offsetHeight + scrollTop;
          if (Math.abs(scrollHeight - scrollBottom) < 5) {
            this.canScroll = false;
            console.log("onScroll", "到底部");
            this.page += 1;
            this.getRecordList(true);
          }
        }
      },
      getRecordTotal() {
        dakaRecordTotal().then(result => {
          if (result.code == 0) {
            this.recordTotal = result.data;
          }
        }).catch(e => {
          console.log("dakaRecordTotal err", e);
        });
      },
      getRecordList(notRefresh) {
        dakaRecordList(this.page, 10).then(result => {
          this.canScroll = true;
          if (result.code == 0) {
            if (!notRefresh) {
              this.recordList = result.data;
            } else {
              this.recordList.next_page = result.data.next_page;
              this.recordList.records = this.recordList.records.concat(result.data.records);
            }
          }
        }).catch(e => {
          this.canScroll = true;
          console.log("dakaRecordList err", e);
        });
      }
    },
    created() {
      this.getRecordTotal();
      this.getRecordList();
    },
    filters: {
      moneyFormatter(val) {
        if (val && !isNaN(val)) {
          return Number(val).toFixed(2);
        } else {
          return "0.00";
        }
      }
    }
  };
</script>
<style lang="less" scoped>
  .record-page {
    min-height: 100vh;
    background: #F2F4F5;
    display: flex;
    flex-direction: column;
    .banner {
      height: 4rem;
      background: linear-gradient(0, #07C9D1, #2AD6A6);
      text-align: center;
      position: relative;
      .amount-detail {
        font-size: .3rem;
        line-height: .94rem;
        color: #fff;
        position: absolute;
        top: 0;
        right: .32rem;
      }
      .total-amount-container {
        margin-top: .2rem;
        .title {
          font-size: .26rem;
          color: #fff;
          line-height: 1;
        }
        .amount {
          font-size: .64rem;
          color: #fff;
          line-height: .8;
          margin-top: .24rem;
        }
      }
      .other-info-container {
        display: flex;
        margin-top: .6rem;
        .other-info-item {
          flex: 1;
          .title {
            font-size: .26rem;
            color: #fff;
            line-height: 1;
          }
          .content {
            font-size: .48rem;
            color: #fff;
            line-height: .8;
            margin-top: .24rem;
          }
        }
      }
    }
    .card-container-list {
      width: 100%;
      overflow-y: scroll;
      padding-bottom: .2rem;
      -webkit-overflow-scrolling: touch;
      &::-webkit-scrollbar {
        display: none;
      }
      .card-item {
        width: 100%;
        height: 2.44rem;
        background: #ffffff;
        margin-top: .14rem;
        position: relative;
        .card-title {
          font-size: .3rem;
          line-height: 1;
          color: #333;
          font-weight: bold;
          padding: .3rem .3rem .5rem;
        }
        .card-detail-container {
          display: flex;
          padding-left: .3rem;
          .detail-item {
            flex: 1;
            .item-title {
              font-size: .26rem;
              line-height: .8;
              color: #888;
              text-align: left;
            }
            .item-content {
              font-size: .48rem;
              line-height: .8;
              color: #333;
              text-align: left;
              margin-top: .24rem;
            }
            .item-content-point {
              font-size: .48rem;
              line-height: .8;
              color: #ffbb33;
              text-align: left;
              margin-top: .24rem;
            }
          }
        }
        .corner-marker {
          width: 1.39rem;
          height: 1.39rem;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .no-more-list {
        font-size: .26rem;
        line-height: 1;
        color: #999;
        text-align: center;
        margin: .8rem 0 .3rem;
      }
    }
  }
</style>