<template>
  <view class="page-container">
    <view class="record-container">
      <view class="card">
        <view class="card-title">
          累计推广<text class="count">{{count}}</text>人
        </view>
        <view class="card-content">
          <view class="record-header flex-row">
            <text class="record-name">用户名</text>
            <text class="record-id">ID</text>
            <text class="record-time">注册时间</text>
          </view>
          <view v-for="(item, index) in list" :key="index" class="record-item flex-row">
            <text class="record-name">{{ item.user_nick_name || item.user_name }}</text>
            <text class="record-id">{{ item.user_id }}</text>
            <text class="record-time">{{ formatTime(item.user_reg_time) }}</text>
          </view>
        </view>
        <view class="load-more">
          <u-loadmore :status="loadStatus" loading-icon="semicircle" />
        </view>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      list: [],
      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.shareUser(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)
          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 {
  .record-container {
    padding: 15px;
    .card {
      .card-title {
        margin: 0 15px;
        padding: 0;
		uni-text{
			color: $uni-color-primary;
		}
      }
      .card-content {
        .record-name {
          flex: 1 1 0%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .record-id {
          flex: 1 1 0%;
          text-align: center;
        }
        .record-time {
          width: 80px;
          text-align: center;
        }
        .record-header {
          height: 44px;
          padding: 0 10px;
          // background: #F3D6B7 linear-gradient(116deg, #F8ECD7 0%, #F2D3B3 100%);
          border-radius: 4px;
          uni-text {
            line-height: 44px;
            font-size: 14px;
            font-weight: 400;
            color: #1a1a2a;
          }
        }
        .record-item {
          line-height: 40px;
          padding: 0 10px;
          font-size: 13px;
          font-weight: 400;
          color: #60606c;
          border-bottom: 1px solid #eef0f3;
        }
      }
    }
  }
}
</style>