<template>
	<view>
		<view class="tabList">
			<view class="tabItem" :class="{active:tabIndex == 0}" @click="changeTab(0)">
				收到礼物
			</view>
			<view class="tabItem" :class="{active:tabIndex == 1}" @click="changeTab(1)">
				送出礼物
			</view>
			<view class="line" :style="{left:375 * tabIndex + 187.5 - 40 + 'rpx'}"></view>
		</view>
		<view style="height: 88rpx;"></view>
		<view class="detailListWrap">
			<view class="detailItem" v-for="(item,index) in list" :key="index">
				<view class="detailTop">
					<text>{{item.text}}</text>
					<text style="color: #35655f;">{{tabIndex == 0 ? '+' : '-'}}{{item.money}}</text>
				</view>
				<view class="detailBottom">
					<view class="detailBottomLeft">
						<image :src="item.from_user.avatar" mode=""></image>
						{{item.from_user.nickname}}
					</view>
					<text style="color: rgba(25,24,51,0.25);">{{item.createtime}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				last_page:0,
				current_page:1,
				param:{
					type:'4',//1=账户明细全部，2=充值，3=提现，4=收到礼物，5=送出礼物
					page:1,
					per_page:15
				},
				tabIndex:0,
				list:[]
			}
		},
		onShow() {
			this.param.page = 1
			this.last_page = 0
			this.current_page = 1
			this.list = []
			this.getData()
		},
		onReachBottom(){
			console.log('滑动到底部了')
			if(this.current_page == this.last_page){
				uni.showToast({
					title:'无更多数据',
					icon:'none'
				})
			}else{
				this.param.page++
				this.getData()
			}
		},
		methods:{
			getData(){
				this.$request('/wallet/getDetailedList',this.param).then((res)=>{
					console.log('明细列表',res)
					this.last_page = res.data.last_page
					this.current_page = res.data.current_page
					this.list = this.list.concat(res.data.data)
				})
			},
			changeTab(index){
				this.param.page = 1
				this.last_page = 0
				this.current_page = 1
				this.list = []
				this.tabIndex = index
				this.param.type = index == 0 ? '4' : '5'
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{background: #f8f8f9;}
	.tabList{
		position: fixed;
		width: 100%;
		height: 88rpx;
		border-top: 2rpx solid rgba(25,24,51,0.06);
		top: 0;
		display: flex;
		color: #969799;
		font-size: 28rpx;
		background: #fff;
		z-index: 1;
		.tabItem{
			width: 375rpx;
			text-align: center;
			line-height: 88rpx;
		}
		.tabItem.active{
			color: #35655f;
		}
		.line{
			position: absolute;
			bottom: 0;
			width: 80rpx;
			height: 6rpx;
			background: #35655f;
			border-radius: 4rpx;
			transition: 0.5s;
		}
	}
	.detailListWrap{
		padding: 0 32rpx;
		.detailItem{
			padding: 24rpx 0;
			.detailTop{
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
			}
			.detailBottom{
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				.detailBottomLeft{
					display: flex;
					align-items: center;
					color: #969799;
					image{width: 32rpx;height: 32rpx;margin-right: 8rpx;}
				}
			}
		}
	}
</style>