<template>
	<view :class="[AppTheme]">
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-sticky offset-top="0" style="z-index: 10;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offset-top="-44" style="z-index: 10;">
				<!-- #endif -->
				<view class="nav">
					<u-tabs ref="uTabs" :list="tabTitle" lineWidth="30" :scrollable="false" :lineColor="primary"
						:current="cur" @click="hadle" :activeStyle="{
				          color: primary,
				          transform: 'scale(1.05)'
				      }" :inactiveStyle="{
				          color: '#606266',
				          transform: 'scale(1)'
				      }">
					</u-tabs>
				</view>
			</u-sticky>
			<view class="pt100">
				<view class="jl">
					<view class="h69" v-for="(item, index) in fundsLIst" :key="index">
						<view class="jl-c">
							<view class="flex">
								<view class="sr">{{ item.oid }}</view>
								<view class="sr-p text-neutral">{{ item.money }}</view>
							</view>
							<view class="pt16">{{ item.remark }}</view>
							<view class="pt161">{{ item.ctime }}</view>
						</view>
					</view>
				</view>
			</view>
			 <u-loadmore :status="more" />
	</view>
</template>

<script>
	import fundsApi from '@/api/wall/index.js';
	export default {
		name: 'Funds',
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				nodata: '没有更多数据了',
				more: 'more', //@value more loading前  	@value loading loading中  	@value 'noMore' 没有更多了
				// tabTitle: ['全部', '项目', '收益', '本金'],
				tabTitle: [{
						name: '全部'
					},
					{
						name: "项目"
					}
				],
				cur: 0, //默认选中第一个tab
				p: 1,
				fundsLIst: []
			};
		},
		onLoad(options) {
			if (options.id) {
				this.cur = options.id;
			} else {
				this.cur = 0;
			}
			this.getFundsLIst(this.cur);
		},
		onReachBottom() {
			this.p++;
			this.more = 'loading';

			setTimeout(() => {
				this.getFundsLIst(this.cur);
			}, 500);
		},
		methods: {
			hadle(i) {
				console.log(i, "i")
				this.p = 1;
				this.cur = i.index;
				this.fundsLIst = [];
				this.getFundsLIst(i.index);
			},
			getFundsLIst(i = 0) {
				fundsApi.record({
					p: this.p,
					pagesize: 10,
					type: Number(i) + 1
				}).then(res => {
					if (res.status == 200) {
						this.fundsLIst = this.fundsLIst.concat(res.data);
						if (res.data.length === 0) {
							this.more = 'noMore';
						}
					} else {
						this.more = 'noMore';
					}
				});
			}
		},
		onPullDownRefresh() {
			this.p = 1;
			this.fundsLIst = [];
			this.getFundsLIst(this.cur);
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 600);
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.nav {
		width: 100%;
		background-color: #ffffff;
	}

	.nav .tab-title {
		margin-top: 80rpx;
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 32rpx;
		background-color: #ffffff;
		position: fixed;
		left: 0;
		top: 0px;
		/*background-color: red;*/
	}

	.tab-title li {
		height: 100%;
		width: 128rpx;
		margin: 0 40rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 80rpx;
		text-align: center;
	}

	.tab-title .active {
		border-bottom-width: 6rpx;
		border-bottom-style: solid;
		border-radius: 2rpx;
	}

	.my {
		margin-top: 80rpx;
		width: 100%;
		height: 104rpx;
		/*background-color: #ffffff;*/
	}

	.coupons-c {
		width: calc(100% - 40rpx);
		height: 220rpx;
		background-color: #ffffff;
		margin: 30rpx auto;
		display: flex;
		justify-content: flex-start;
		border-radius: 10rpx;
	}

	.pt100 {
		.h69 {
			background-color: #ffffff;
			padding: 20rpx;
			justify-content: center;
			display: flex;
			margin-bottom: 20rpx;
			overflow: hidden;
			border-radius: 15rpx;
		}

		.jl {
			padding: 20rpx;
		}

		.jl .jl-c {
			width: calc(100%);
			margin: 0 auto;
			// display: flex;
			justify-content: space-between;
			align-items: center;
			overflow: hidden;

			.flex {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #eeeeee;
				padding-bottom: 12rpx;

				.sr {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					line-height: 36rpx;
				}

				.sr-p {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}
			}
		}

		.jl .pt16 {
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 36rpx;
			padding-top: 16rpx;
		}

		.jl .pt161 {
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 36rpx;
			padding-top: 16rpx;
			text-align: right;
		}

		.jl .time {
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			margin-left: 40rpx;
			margin-top: 10rpx;
		}

	}

	.nodata {
		text-align: center;
	}
</style>
