<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;" />{{allPay}}</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">{{item.tenementOrderDate}}</view>
					<!-- <view class="right"><view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{orderPay}}</view></view> -->
				</view>
				<view class="info-items">
					<view class="info-item">
						<view class="left title">{{item.tenementOrder}}</view>
						<view class="right"><view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{item.paymentAmount}}</view></view>
					</view>
					<view class="info-item">
						<view class="left" style="color: #0FBB59;">支付成功</view>
						<view class="right" style="color: #8A8A8A;">{{item.paymentTime}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				dataList: [],
				orderPay:0,
				allPay:0,
				pageIndex:{
					time:''
				}
			}
		},
			onShow() {
			this.pageIndex.time = this.getCurrentYear()
			},
			  onLoad(options) {
			   if(options.msg){
				   this.orderPay = 0
				   this.allPay = 0
				   let receivedMsg = JSON.parse(options.msg)
				   
				   receivedMsg.list.map(item=>{
					   this.orderPay+=item.paymentAmount
					    this.allPay+=item.paymentAmount
				   })
				  this.dataList = receivedMsg.list
			   }
			  },
		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> 