<template>
	<view>
		<u-sticky bgColor="#fff">
			<view class="totalRecord">
				<image src="../../static/img/run/record.png" class="record" mode="widthFix"></image>
				总步数：
				<text class="stepNum">{{totalStepNum}}</text>
			</view>
			<u-tabs :activeStyle="{color: '#61b077'}" lineColor="#61b077" @click="clickTime" :list="tabsList" :scrollable="false">
			</u-tabs>
		</u-sticky>
		<view class="record-ul  p-l-30 p-r-30">
			<view class="record-li sh-flex sh-flex-sb" v-for="(item,i) in dataList" :key="i">
				<text>{{item.DateStr}}</text>
				<text> {{item.RunNumTotal}}</text>
			</view>
			<!--没有更多信息-->
			<view class="noMore">
				<u-loadmore v-show="noMore" :marginTop="10" :status="loadStatus" />
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/shopro/request/index';
	export default {
		data() {
			return {
				tabsList: [{
					name: '日',
				}, {
					name: '月',
				}, {
					name: '季度'
				}, {
					name: '半年'
				}, {
					name: '年'
				}],
				dataList: [],
				params: {
					pageNo: 1,
					pageSize: 20,
					groupType: 1
				},
				lastPage: 1,
				loadStatus: 'loadmore', //加载
				isEmpty: false, //是否为空
				noMore: false, //没用更多
				totalStepNum:0

			}
		},
		methods: {
			clickTime(item) {
				 this.params.groupType = item.index+1;
				 this.params.pageNo = 1;
				 this.dataList = [];
				 this.list()
			},
			list() {
				http("walking.group", this.params).then(res => {
					if (res.code == 0) {
						this.totalStepNum = res.data.totalStepNum;
						this.dataList = [...this.dataList, ...res.data.list]; //list数据
						let totalCount = res.data.total;
						this.isEmpty = !this.dataList.length;
						this.lastPage = Math.trunc(totalCount / this.params.pageSize) + 1; //计算最后一页，当最后一页等于当前页，则是最后一页
						if (this.lastPage == this.params.pageNo) {
							this.loadStatus = "nomore";
							this.noMore = true;
						} else {
							this.loadStatus = "loadmore";
						}
						if (!res.data.list.length && !this.dataList.length) { //什么都没有则为空
							this.isEmpty = true;
						}
					} else {
						this.totalStepNum = 0;
						this.dataList = [];
						this.$u.toast(res.msg);

					}
				})
			}
		},
		// 自带方法：触底加载更多
		onReachBottom() { 
			if (this.params.pageNo < this.lastPage) {
				this.params.pageNo += 1;
				this.list();
			}
		},
		mounted() {
			this.list()
		}
	}
</script>

<style lang="scss" scoped>
	.record{
		width:30rpx ;
		height: 30rpx;
		margin-right:15rpx ;
		padding-left: 30rpx;
	}
	.record-li {
		border-bottom: 1px solid #ddd;
		padding: 15px 10px; 
		text:last-child {
			color: #61b077;
		}
		
	}
	.totalRecord{
		font-weight: bold;
		padding: 20rpx 0 0 20rpx;
		// color: #61b077;
		.stepNum{
			color: #61b077;
		}
	}
</style>
