<template>
	<view class="container">
		<view class="top">
			<view class="top_left" @click="ToUserList('expend')">
				<view style="display: flex;margin-top: 60rpx;">
					<view>收费</view>
					<!-- <uni-icons type="wallet"
						style="color: #fff;margin-top: 4rpx;margin-left: 4rpx;" size="24"></uni-icons> -->
				</view>
				<view style="padding-top: 20rpx;text-align: center;">
					<uni-icons type="wallet" style="color: #fff;margin-top: 4rpx;margin-left: 4rpx;"
						size="99"></uni-icons>
				</view>

			</view>
			<view class="top_right">
				<view class="top_right1" @click="goto('/pages/user/user_add')">
					<view style="display: flex;">
						<view>新建</view>
						<!-- 	<uni-icons type="personadd" style="color: #fff;margin-top: 4rpx;margin-left: 4rpx;"
							size="24"></uni-icons> -->
					</view>
					<view style="text-align: center;">
						<uni-icons type="personadd" style="color: #fff;margin-top: 4rpx;margin-left: 4rpx;"
							size="60"></uni-icons>
					</view>
				</view>
				<view class="top_right2" @click="ToUserList('recharge')">
					<view style="display: flex;">
						<view>充值</view>
						<!-- <uni-icons type="vip" style="color: #fff;margin-top: 4rpx;margin-left: 4rpx;"
							size="24"></uni-icons> -->
					</view>
					<view style="text-align: center;">
						<uni-icons type="vip" style="color: #fff;margin-top: 4rpx;margin-left: 4rpx;"
							size="60"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 15rpx;">
			<view class="title">
				<view>今日流水</view><uni-icons type="map" style="color: #00BBF9;margin-top: 2rpx;margin-left: 4rpx;"
					size="22"></uni-icons>
			</view>
			<view class="bottom">
				<uni-list>
					<view v-for="(item,index) in List" :key="index">
						<uni-list-item showExtraIcon="true" :extraIcon="icon_chongzhi" v-if="item.type==1"
							:title="`充值${item.change_money}`" :note="item.name"
							:rightText="item.created_at.slice(-8)"></uni-list-item>
						<uni-list-item showExtraIcon="true" :extraIcon="icon_xiaofei" v-if="item.type==2"
							:title="`${item.desc}${item.change_money}`" :note="item.name"
							:rightText="item.created_at.slice(-8)"></uni-list-item>
					</view>
				</uni-list>
				<view v-if="List.length==0" style="font-size: 28rpx;color: #ccc;text-align: center;padding-top: 20rpx;">
					今日暂无记录
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
 
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"

	let icon_chongzhi = ref({
		color: '#FF8A5B',
		size: '28',
		type: 'vip'
	});
	let icon_xiaofei = ref({
		color: '#26CED0',
		size: '28',
		type: 'hand-up'
	});
	const ToUserList = (type) => {
		sessionStorage.setItem('userlist_type', type)
		uni.switchTab({
			url: '/pages/user/list'
		})
	}
	const goto = (page) => {
		uni.navigateTo({
			url: page
		})
	}
	let List = ref([]);
 
	onShow(() => {
		sessionStorage.setItem('userlist_type', '')
	 
	})
</script>

<style>
	.container {
		padding: 20rpx;
		background-color: #fff;
	}

	.top {
		display: flex;
		justify-content: space-around;
	}

	.top_left {
		border: 1rpx solid #ccc;
		width: 240rpx;
		padding: 40rpx;
		border-radius: 20rpx;
		height: 400rpx;
		font-size: 50rpx;
		font-weight: 700;
		background-color: #26CED0;
		color: #fff;
	}

	.top_right {
		font-size: 40rpx;
	}

	.top_right1 {
		border: 1rpx solid #ccc;
		width: 240rpx;
		padding: 40rpx;
		border-radius: 20rpx;
		height: 145rpx;
		font-weight: 700;
		background-color: #00BBF9;
		color: #fff;
	}

	.top_right2 {
		border: 1rpx solid #ccc;
		width: 240rpx;
		padding: 40rpx;
		border-radius: 20rpx;
		margin-top: 28rpx;
		height: 145rpx;
		font-weight: 700;
		background-color: #FF8A5B;
		color: #fff;
	}

	.title {
		font-size: 35rpx;
		font-weight: 700;
		margin-top: 10rpx;
		margin-bottom: 18rpx;
		color: #00BBF9;
		display: flex;
	}

	.bottom {
		height: calc(100vh - 720rpx);
		overflow: scroll;

	}
</style>