<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">{{formatDate(item.tenementOrderDate)}}</view> -->
					<view class="right"><view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{item.dingPay}}</view></view>
				</view>
				<view class="info-items" v-for="(value, ids) in item.ziList">
					<view class="info-item">
						<view class="left title">{{value.tenementOrderParent==''?value.tenementOrder:value.tenementOrderParent}}</view>
						<view class="right"><view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{value.paymentAmount}}</view></view>
					</view>
					<view class="info-item">
						<view class="left" style="color: #0FBB59;">{{value.payState==1?'支付成功':''}}</view>
						<view class="right" style="color: #8A8A8A;">{{formatDateTime(value.paymentTime)}}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="dataList.length === 0" class="nonemsg">
			暂无数据
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				dataList: [],
				allPay:0,
				pageIndex:{
					time:''
				},
				merchants:''
			}
		},
			onShow(){
			this.pageIndex.time = this.getCurrentYear()
			},
			  onLoad(options) {
			   if(options.msg && options.merchants){
				   this.allPay = 0
				   let receivedMsg = JSON.parse(options.msg)
				   this.merchants  = options.merchants
				   this.getAll(receivedMsg.list)
			   }
			  },
		methods: {
			getAll(receivedMsg){
					let totalPay= 0
					const redList = []
					  // 用于存储 tenementOrderParent 相同的项
					  const groupedItems = {};
					  // 遍历 receivedMsg.list 数组
					  receivedMsg.forEach(item => {
										   if(item.payState ==1){
											     totalPay += item.paymentAmount
											   if (item.tenementOrderParent === '') {
											       // 如果 tenementOrderParent 为空，添加 dingPay 字段并添加到 redList
											       let newItem = { ...item,ziList:[], dingPay: item.paymentAmount };
												   newItem.ziList.push(item)
											       redList.push(newItem);
											   } else {
											       // 如果 tenementOrderParent 不为空，将相同 tenementOrderParent 的项分组
											       if (!groupedItems[item.tenementOrderParent]) {
											           groupedItems[item.tenementOrderParent] = {
											               ziList: [],
											               dingPay: 0
											           };
											       }
											       groupedItems[item.tenementOrderParent].ziList.push(item);
											       groupedItems[item.tenementOrderParent].dingPay += item.paymentAmount;
												   groupedItems[item.tenementOrderParent].paymentTime = item.paymentTime;
												   groupedItems[item.tenementOrderParent].payDay = item.payDay;
												   groupedItems[item.tenementOrderParent].payState = item.payState;
											   }
										   }
					   
					  });
					  // 将分组后的对象添加到 redList
					  for (const key in groupedItems) {
					      redList.push({
					          tenementOrderParent: key,
					          ...groupedItems[key]
					      });
					  }
					  
					//   receivedMsg.list.map(item=>{
										// let obj ={
										// 	...item,
										// 	dingPay:0,
										// 	ziList:[]
										// }
										//    if (item.payState == 1) {
										// 	 obj.ziList.push(item)
										// 	 if(item.tenementOrderParent ){
												 
										// 	 }
										// 	 obj.dingPay +=item.paymentAmount
										// 	 this.orderPay+=item.paymentAmount
										// 	  this.allPay+=item.paymentAmount
										// 	  redList.push(obj)
										//    }
										   
					//   })
					     this.allPay = totalPay;
					 this.dataList = redList
					 
			},
			getCurrentYear() {
			    const year = new Date().getFullYear();
			    return `${year}`;
			},
			confirm(e){
				this.pageIndex.time =  e.year
			  
  const { firstDay, lastDay } = this.getYearFirstAndLastDay(e.year)
				this.$http.sendRequest('/cerePropertyOrder/queryByName', 'POST', {
					relatedMerchants:this.merchants,
					paymentTimeStart:firstDay,
					paymentTimeEnd:lastDay
				}, 1).then(res => {
					if (res.data.data.length > 0) {
						
						this.getAll(res.data.data[0].cerePropertyOrderList)
					}else{
						this.dataList=[]
						this.allPay = 0
					}
					})
			},
			getYearFirstAndLastDay(year) {
				console.log(year)
			    const firstDay = new Date(year, 0, 1);
			       const lastDay = new Date(year, 11, 31);
				   console.log(firstDay.toISOString().split('T'))
			       return {
			           firstDay: firstDay.toISOString().split('T')[0],
			           lastDay: lastDay.toISOString().split('T')[0]
			       }
			},
			formatDateTime(dateTimeStr) {
			    // 创建 Date 对象
			    const date = new Date(dateTimeStr);
			    // 获取月份，由于 getMonth() 返回值从 0 开始，所以要加 1，并确保为两位数字
			    const month = String(date.getMonth() + 1).padStart(2, '0');
			    // 获取日期，并确保为两位数字
			    const day = String(date.getDate()).padStart(2, '0');
			    // 获取小时，并确保为两位数字
			    const hours = String(date.getHours()).padStart(2, '0');
			    // 获取分钟，并确保为两位数字
			    const minutes = String(date.getMinutes()).padStart(2, '0');
			
			    // 按照所需格式拼接并返回结果
			    return `${month}.${day} ${hours}:${minutes}`;
			},
			formatDate(dateStr) {
			    // 使用 split 方法将日期字符串按 - 分割成数组
			    const [year, month, day] = dateStr.split('-');
			    // 将 month 和 day 转换为数字，去除可能存在的前导零
			    const formattedMonth = parseInt(month, 10);
			    const formattedDay = parseInt(day, 10);
			    // 按照目标格式拼接字符串
			    return `${formattedMonth}月${formattedDay}号`;
			},
		}
	}
</script>

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