<template>
	<view class="wallet_bg">
		<view class="banner">
			<image class="bg-img" src="@/static/myImage/wallet-bg.png" mode="widthFix"></image>
			<view class="my_money">
				<text>我的余额</text>
				<text>¥<text class="number">0.00</text> </text>
			</view>
			<view class="use">提现</view>
			<view class="recharge">充值</view>
		</view>
		
		<u-tabs 
			:list="list" 
			:lineColor="ThemeColor.PrimaryColor" 
			:activeStyle="{ color: ThemeColor.PrimaryColor }" 
			itemStyle="padding-left: 15px; padding-right: 15px; height: 92rpx;width: 33%;box-sizing: border-box;"
			@click="toggleData" 
		/>
		
		<!-- 账单列表 -->
		<view class="bill_list">
			<u-cell-group :border="false">
				<u-cell
					v-for="(item, index) in billList" 
					:key="index" :title="item.name" 
					:label="item.createTime" 
					:value="priceActive(item)"
					:border="false"
				/>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import ThemeColor from '@/utils/themeColor';
	export default {
		data() {
			return {
				ThemeColor,
				list: [
					{ name: '全部', id: 1},
					{ name: '收入', id: 2},
					{ name: '支出', id: 3},
				],
				billList: [
					{ name: '南宁站 000026', createTime: '2022-12-26 14:00:35', price: '1.09', status: 'add' },
					{ name: '南宁站 000026', createTime: '2022-12-26 14:00:35', price: '1.09', status: 'add' },
					{ name: '提现', createTime: '2022-12-26 14:00:35', price: '1.09', status: 'minus' },
					{ name: '提现', createTime: '2022-12-26 14:00:35', price: '1.09', status: 'minus' },
				]
			};
		},
		computed: {
			priceActive(){
				return (item) => {
					return item.status === 'add' ? `+ ${item.price}` : `- ${item.price}`
				}
			}
		},
		methods: {
			toggleData(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.wallet_bg{
	padding: 20rpx 30rpx;
	background-color: #F6F6F6;
	min-height: 100vh;
	.banner{
		position: relative;
		height: 288rpx;
		border-radius: 16rpx;
		.bg-img{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.my_money{
			position: absolute;
			top: 38rpx;
			left: 28rpx;
			display: flex;
			flex-direction: column;
			gap: 8rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #fff;
			.number{
				font-size: 52rpx;
				font-weight: 700;
				line-height: 64rpx;
				margin-left: 4rpx;
			}
		}
		.use{
			position: absolute;
			top: 96rpx;
			left: 192rpx;
			width: 96rpx;
			height: 44rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			text-align: center;
			line-height: 44rpx;
			color: $uni-color-primary;
			font-size: 24rpx;
		}
		.recharge{
			position: absolute;
			top: 34rpx;
			right: 34rpx;
			width: 128rpx;
			height: 48rpx;
			background: rgba(255,255,255,0.4);
			border-radius: 40rpx;
			color: #fff;
			line-height: 48rpx;
			text-align: center;
			font-size: 24rpx;
			border: 2rpx solid #FFFFFF;
		}
	}
	.bill_list{
		margin-top: 30rpx;
	}
}
</style>