<template>
	<view class="page">
		<view class="title-top">
			<div class="left">
				<view @click="show = true">{{pageIndex.time}}年<u-icon name="arrow-down"></u-icon></view>
				<u-picker v-model="show" mode="time" :params="{year: true}" @confirm="confirm"></u-picker>
			</div>
			<div class="right"><view class="price" style="font-size: 40rpx;"><u-icon name="rmb" style="font-size: 24rpx;" />6451.00</view></div>
		</view>
		<view class="record-list">
			<view class="record-item" v-for="(item, index) in dataList" :key="index" >
				<view class="info-title">
					<view class="title">7月</view>
					<view class="right"><view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />6451.00</view></view>
				</view>
				<view class="info-items" v-for="(v, i) in item.children" :key="i">
					<view class="info-item">
						<view class="left title">支付订单编号</view>
						<view class="right"><view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />500.00</view></view>
					</view>
					<view class="info-item">
						<view class="left" style="color: #0FBB59;">支付成功</view>
						<view class="right" style="color: #8A8A8A;">07.11 15:21</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				dataList: [
					{
						children: [{}, {}]
					}
					
				],
				pageIndex:{
					time:''
				}
			}
		},
			onShow() {
			this.pageIndex.time = this.getCurrentYear()
			},
		methods: {
			getCurrentYear() {
			    const year = new Date().getFullYear();
			    return `${year}`;
			},
			confirm(e){
				
				this.pageIndex.time =  e.year
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'rentPayDetails.scss';
</style> 