<template>
	<view class="container">
		<view class="item-header">
			<text>余额</text>
			<view class="money">￥<text>{{moneyInfo}}</text></view>
			<view class="recharge-btn" @click="linkjump(link)">
				<image src="/static/unielepystatic/img/wallet/icon-wallet.png"></image>
				<text>充值</text>
			</view>
		</view>
		<view class="item-bottom">
			<view class="idx-title">
				<span>充值明细</span>
			</view>
			<view class="dataTable">
				<uni-table  emptyText="暂无更多数据" width="100%" style="min-width: 100%;font-size: 12px;" size="mini">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">时间</uni-th>
						<uni-th align="center">类型</uni-th>
						<uni-th align="center">金额</uni-th>
						<uni-th align="center">余额</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in tableData" :key="index">
						<uni-td>{{item.create_datetime}}</uni-td>
						<uni-td>{{item.type}}</uni-td>
						<uni-td>{{item.money}}</uni-td>
						<uni-td>{{item.balance}}</uni-td>
					</uni-tr>	
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	import 	common from '@/api/common';
	export default{
		data() {
			return {
				moneyInfo:"1580.00",
				tableData:[
					{id:1,create_datetime:'2023-03-10 10:20:30',type:'充值',money:"200.00",balance:"200.00"},
					{id:2,create_datetime:'2023-03-10 10:20:30',type:'充值',money:"200.00",balance:"200.00"},
					{id:3,create_datetime:'2023-03-10 10:20:30',type:'充值',money:"200.00",balance:"200.00"},
					{id:4,create_datetime:'2023-03-10 10:20:30',type:'充值',money:"200.00",balance:"200.00"},
				],
				link:"/pages/pay/recharge",
			}
		},
		methods:{
			linkjump(link){
				this.$common.linkjump(link)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 20rpx 20rpx;
		.item-header{
			background: url("/static/unielepystatic/img/wallet/icon-backgroud.png") no-repeat 50% 50%;
			width: 100%;
			height: 320rpx;
			background-size: contain;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #FFFFFF;
			font-size: 30rpx;
			justify-content: center;
			.money{
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 27rpx auto 64rpx;
				text{					
					font-size: 48rpx;
					font-weight: bold;
				}
			}
			.recharge-btn{
				width: 160rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 28rpx;				
				font-size: 30rpx;
				color: #2979ff;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 36rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
				
			}
			
		}
	}
	.item-bottom{
		background: #FFFFFF;
		border-radius: 10px;
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
	}
	.dataTable {
		::v-deep .uni-table{
			min-width: 100% !important;
		}
		::v-deep .uni-table-td{
			font-size: 24rpx !important;
			
		}
	}
</style>
