<template>
	<el-layout>
		<el-navbar v-model:top="navTop" :placeholder="true" :fixed="true" :autoBack="true" :border="false" title="我的钱包"></el-navbar>
		
		<view class="wrapper">
			<view class="content">
				
				<view class="balance">
					<view class="wrap">
						<view>钱包余额(元)</view>
						<view>
							<text>{{ user.money || 0 }}</text>
							<text v-if="status == 1" @click="navigateTo('pages/ucenter/wallet/recharge')">充值</text>
						</view>
					</view>
				</view>
				
				<view class="tabs">
					<el-tabs :list="tabList" :current="current" @change="onTabs" activeColor="var(--ui-bg-color)" :itemStyle="{width: '33.333%'}"></el-tabs>
				</view>
				
				<el-refresh ref="refreshRef" @refresh="refresh" @scrolltolower="scrolltolower" :scrollHeight="getScrollHeight">
					
					<view class="list-wrap">
						
						<view class="list-box" v-for="(item,index) in list">
							<view class="top">
								<text>日志类型：</text>
								<text>{{ item.operation == 0 ? '收入' : '支出' }}</text>
							</view>
							<view class="content">
								<view>
									<text>金额数值：</text>
									<text>￥{{ item.value }}</text>
								</view>
								<view>
									<text>充值时间：</text>
									<text>{{ item.create_time }}</text>
								</view>
							</view>
							<view class="bottom">
								{{ item.description }}
							</view>
						</view>
						
					</view>
					
				</el-refresh>
				
			</view>
		</view>
	</el-layout>
</template>

<script setup>
	import { onShow,onLoad } from "@dcloudio/uni-app";
	import { nextTick,ref,computed } from "vue";
	import { navigateTo } from "@/el-ui/libs/navigate";
	import { storeToRefs } from 'pinia';
	import { useUserStore } from "@/store/user";
	
	const current = ref(0);
	const tabList = ref([
		{name: "全部"},
		{name: "收入"},
		{name: "支出"}
	]);
	
	const navTop 	  		 = ref(0);
	const balanceHeight		 = ref(0);
	const refreshRef  		 = ref();
	const userStore 		 = useUserStore();
	const { isLogin,user }   = storeToRefs(userStore);
	const domain 			 = ref("");
	const status             = ref(0);
	onLoad(()=>{
		nextTick(()=>{
			init();
			uni.createSelectorQuery().select('.balance').boundingClientRect((rect) => {
				balanceHeight.value = rect.height;
			}).exec();
		})
	});
	
	onShow(()=>{
		domain.value = uni.$http.getDomain();
		uni.$http.get("ucenter.recharge/index").then(res=>{
			if(res.code){
				status.value = res.data;
			}
		});
	});
	
	const onTabs = (value)=>{
		current.value = value;
		init();
	}
	
	const list = ref([]);
	const init = async ()=>{
		refreshRef.value?.resetPage();
	}
	
	const getScrollHeight = computed(()=>{
		const { windowHeight } = uni.getSystemInfoSync();
		return (windowHeight - navTop.value) - balanceHeight.value;
	})
	
	/**
	 * 下拉刷新
	 */
	const refresh = ()=>{
		init();
	}
	
	/**
	 * 上拉加载
	 */
	const scrolltolower = (data)=>{
		if(refreshRef.value.isMore()) {
			refreshRef.value.loadingPage();
	
			setTimeout(() => { 
				uni.$http.get("ucenter.withdraw/wallet",{ active: current.value, page: data.page }).then(res=>{
					if(res.code == 1){
						if(data.page == 1) list.value = [];
						refreshRef.value.setData(res.data.total,res.data.list.length);
						list.value = list.value.concat(res.data.list);
					}else if(res.code == -1){
						if(data.page == 1 && res.data.list.length <= 0) list.value = [];
						refreshRef.value.emptyPage();  
					}
				});
			}, 100)
		}
	}
	
</script>

<style lang="scss" scoped>
	.wrapper {
		.content {
			.balance {
				background-color: #fff;
				padding: 30rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.wrap {
					width: 85%;
					color: #fff;
					border-radius: 15rpx;
					display: flex;
					flex-direction: column;
					background: linear-gradient(-180deg, var(--ui-bg-color-light), var(--ui-bg-color));
					padding: 40rpx;
					view {
						&:nth-child(1){
							padding-bottom: 20rpx;
							font-size: 32rpx;
						}
						&:nth-child(2){
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							text {
								&:nth-child(1){
									font-size: 50rpx;
								}
								&:nth-child(2){
									color: var(--ui-bg-color);
									background-color: #fff;
									font-size: 26rpx;
									border-radius: 15rpx;
									width: 80rpx;
									height: 50rpx;
									line-height: 50rpx;
									text-align: center;
								}
							}
						}
					}
				}
			}
		
			.tabs { 
				margin-bottom: 20rpx;
			}
		
			.list-wrap {
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				font-size: 28rpx;
				padding: 0 20rpx;
				.list-box {
					background-color: #fff;
					border-radius: 10rpx;
					padding: 20rpx;
					padding-top: 0;
					font-size: 28rpx;
					margin-bottom: 20rpx;
					.top {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						border-bottom: 2rpx solid #eee;
						height: 70rpx;
						line-height: 70rpx;
						
					}
					.content {
						padding: 20rpx 0;
						border-bottom: 2rpx solid #eee;
						display: flex;
						flex-direction: column;
						view {
							padding: 5rpx 0;
							display: flex;
							justify-content: space-between;
							
						}
					}
					.bottom {
						padding-top: 20rpx;
						text-align: left;
					}
				}
			}
		}
	}
</style>