<template>
  <view class="page-container">
    <view class="record-count card">
      <view class="card-content justify-around">
        <view class="count-item">
          <view class="num">{{invite}}</view>
          <view class="title">累计邀请</view>
        </view>
        <view class="count-item">
          <view class="num">{{active}}</view>
          <view class="title">保持活跃</view>
        </view>
        <view class="count-item">
          <view class="num">{{coin}}</view>
          <view class="title">累计收益</view>
        </view>
      </view>
    </view>
    <view class="coin-record card">
      <view class="card-content">
        <view v-for="(item, index) in list" :key="index" class="record-item">
          <view class="align-center">
            <view class="record-tag">{{item.clog_name}}</view>
            <view class="record-coin">
              金币<text>{{item.clog_coin}}</text>
            </view>
            <text class="record-time">{{formatTime(item.clog_time)}}</text>
          </view>
        </view>
      </view>
      <view class="load-more">
        <u-loadmore :status="loadStatus" loading-icon="semicircle" />
      </view>
    </view>
  </view>
</template>

<script>
import { user } from '@/utils/api'

export default {
  data() {
    return {
      list: [],
      invite: 0,
      active: 0,
      coin: 0,
      page: 1,
      count: 0,
      refreshTriggered: false,
      loadStatus: 'loadmore'
    }
  },
  onPullDownRefresh() {
    this.refreshTriggered = true
    this.loadStatus = 'loadmore'
    this.page = 1
    this.list = []
    this.getData()
  },
  onReachBottom() {
    this.getData()
  },
  async onLoad() {
    await this.$onLaunched
    const token = getApp().globalData.userToken
    if (!token) {
      uni.redirectTo({
        url: '/pages/user/login'
      })
    } else {
      this.getData()
    }
  },
  methods: {
    async getData() {
      if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
        return
      }
      this.loadStatus = 'loading'
      await user.clogList(this.page).then(res => {
        if (res.code == 1) {
          if (res.data.page < res.data.page_total) {
            this.loadStatus = 'loadmore'
            this.page++
          } else {
            this.loadStatus = 'nomore'
          }
          this.list = this.list.concat(res.data.list)
          if (res.data.invite_num) {
            this.invite = res.data.invite_num
          }
          if (res.data.active_num) {
            this.active = res.data.active_num
          }
          if (res.data.coin_num) {
            this.coin = res.data.coin_num
          }
          this.count = res.data.count
        } else {
          this.loadStatus = 'loadmore'
        }
      }).catch(e => {
        this.loadStatus = 'loadmore'
      })
      if (this.refreshTriggered) {
        this.refreshTriggered = false
        uni.stopPullDownRefresh()
      }
    }
  }
}
</script>

<style lang="scss">
.page-container {
	background-color: $uni-bg-color;
  padding: 15px 0;
  .record-count {
    margin: 0 15px;
    .count-item {
      .num {
        width: 100%;
        margin-bottom: 5px;
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        color: #1a1a2a;
      }
      .title {
        width: 100%;
        margin-bottom: 5px;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        color: #60606c;
      }
    }
  }
  .coin-record {
    margin: 15px 15px 0;
    .record-item {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eef0f3;
      &:last-child {
        margin-bottom: 0;
      }
      .record-tag {
        width: 80px;
        height: 26px;
        line-height: 26px;
        font-size: 13px;
        color: #fd6202;
        text-align: center;
        border-radius: 3px;
        border: 1px solid #fd6202;
      }
      .record-coin {
        flex: 1 1 0%;
        margin: 0 10px;
        font-size: 14px;
        color: #1a1a2a;
        uni-text {
          margin-left: 5px;
          color: #fd6202;
        }
      }
      .record-time {
        font-size: 13px;
        color: #cacaca;
      }
      .record-content {
        margin-top: 8px;
        font-size: 13px;
        color: #1a1a2a;
        uni-text {
          color: #949494;
        }
      }
    }
  }
}
</style>