<template>
	<view class="box">
		<view class="jilulist">
			<view class="jiluitem" v-for="(item,index) in selectarr" :key="index">
				<view class="jileft" @click="select(item.id,index)">
					<view class="selimg" v-if="item.select==false">
						<image src="/static/img/selsect.png"></image>
					</view>
					<view class="selimg" v-else>
						<image src="/static/img/xuan.png"></image>
					</view>
					<view class="dhao">
						<view class="seldanhao">订单号：{{item.order_sn}}</view>
						<view class="selcishu">{{item.recharge}}</view>
					</view>

				</view>
				<view class="jiright">
					<view class="jidate">
						{{item.createtime}}
					</view>
					<view class="jimoney">￥{{item.pay_money}}</view>
				</view>
			</view>


		</view>

		<view class="bottom">
			<view class="bottomleft">
				<view class="selimg" @click="selectall">
					<image src="/static/img/selsect.png" v-if="select_all == false"></image>
					<image src="/static/img/xuan.png" v-else></image>
				</view>
				<view class="allsel">全选</view>
				<view class="chongjilu">
					<view class="jilu">
						{{totalnum}}个充值记录
					</view>
					<text class="total">共</text>
					<text class="totalmonety">{{totalmoney}}元</text>
				</view>

			</view>
			<view class="nextstep" @click="next">下一步</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue"
	export default {
		data() {
			return {
				selectarr: [],
				// 充值记录
				totalnum: 0,
				//钱数
				totalmoney: 0,
				select_all: false,
				// 选中的id
				select_id: []

			}
		},
		methods: {
			// 单选选择数板
			select(id, index) {
				console.log(id)
				let t = this;
				let newselect_id = t.select_id;
				let newselectarr = t.selectarr;
				let newtotalmoney = t.totalmoney;
				let newtotalnum = t.totalnum;
				newselectarr[index].select = !newselectarr[index].select;
				if (newselectarr[index].select) {
					newtotalmoney = Number(newtotalmoney) + Number(newselectarr[index].pay_money);
					newtotalnum = Number(newtotalnum) + 1
					newselect_id.push(id)
				} else {
					newtotalmoney = Number(newtotalmoney) - Number(newselectarr[index].pay_money);
					newtotalnum = Number(newtotalnum) - 1
					t.select_all = false;
					newselect_id.splice(index, 1)
				}
				t.selectarr = newselectarr;
				t.totalmoney = newtotalmoney.toFixed("2");
				t.totalnum = newtotalnum;
				t.select_id = newselect_id;
				if(t.select_id.length==t.selectarr.length){
					t.select_all=true
				}
				console.log('99998888', t.select_id);
				uni.setStorageSync("select_id",t.select_id);
				uni.setStorageSync("totalmoney",t.totalmoney);
				uni.setStorageSync("totalnum",t.totalnum)
				
			},


			// select(id, index) {
			// 	console.log(index)
			// 	let newselectarr = this.selectarr;
			// 	let newtotalmoney = this.totalmoney;
			// 	let newtotaljilu = this.totaljilu;
			// 	newselectarr[index].select = !newselectarr[index].select;
			// 	if (newselectarr[index].select == true) {
			// 		newtotalmoney = Number(newtotalmoney) + Number(newselectarr[index].pay_money)
			// 		newtotaljilu = Number(newtotaljilu)+1
			// 	} else {
			// 		newtotalmoney = Number(newtotalmoney) - Number(newselectarr[index].pay_money)
			// 		newtotaljilu = Number(newtotaljilu)-1
			// 	}
			// 	console.log(newtotalmoney)
			// 	this.totalmoney = newtotalmoney.toFixed("2");
			// 	this.selectarr = newselectarr;
			// 	this.totaljilu = newtotaljilu
			// },

			//选择全部板数
			// 			selectall() {
			// 				let newselectarr = this.selectarr;
			// 				let newtotalmoney = this.totalmoney;
			// 				for (var obj of newselectarr) {
			// 					obj.select = true;
			// 					newtotalmoney = Number(newtotalmoney) + Number(obj.pay_money)
			// 				}
			// 
			// 				this.totalmoney = newtotalmoney.toFixed("2");
			// 				this.selectarr = newselectarr;
			// 
			// 			},
			selectall() {
				let t = this;
				let newselectarr = t.selectarr;
				let newtotalmoney = t.totalmoney;
				let newtotalnum = t.totalnum;
				t.select_all = !t.select_all;
				let newselect_id = t.select_id

				for (var i = 0; i < newselectarr.length; i++) {
					if (t.select_all) {
						newselectarr[i].select = true;
						newselect_id.push(newselectarr[i].id)
						newtotalmoney = Number(newtotalmoney) + Number(newselectarr[i].pay_money);
						newtotalnum = newselectarr.length
						console.log(newselectarr.length, "数组的长度")
					} else {
						newselectarr[i].select = false;
						newtotalmoney = 0;
						newtotalnum = 0;
						newselect_id = []
					}
				};
				t.selectarr = newselectarr;
				t.totalmoney = newtotalmoney.toFixed("2");
				t.totalnum = newtotalnum;
				t.select_id = newselect_id;
				uni.setStorageSync("select_id",t.select_id)
				uni.setStorageSync("totalmoney",t.totalmoney)
				uni.setStorageSync("totalnum",t.totalnum)
				console.log('808080', t.select_id);
			},
			// 选择消费记录
			choose_jilu() {
				let t = this;
				let url = "api/person/choosePayList";
				let param = {};
				app.post(url, param, 'post').then(r => {
					console.log(r)
					for (var i = 0; i < r.length; i++) {
						console.log(r[i])
						r[i]['select'] = false
					}
					t.selectarr = r;
					
					
					
					let newselect_id=uni.getStorageSync("select_id");
					console.log('7777',newselect_id)
					let newselectarr=t.selectarr;
					console.log('6666',newselectarr)
					for(var i=0;i<newselectarr.length;i++){
						for(var j=0;j<newselect_id.length;j++){
							if(newselectarr[i].id==newselect_id[j]){
								console.log('888888')
								newselectarr[i].select=true	
							}
						}
					}
					
					t.selectarr=newselectarr;
					
					if(uni.getStorageSync("totalmoney")!=''){
						t.totalmoney=uni.getStorageSync("totalmoney");
					}
					if(uni.getStorageSync("totalnum")!=''){
						t.totalnum=uni.getStorageSync("totalnum");
					}
					
					console.log('99999900000',this.selectarr);
				}).catch(err => {
					console.log(err)
				})
			},
			//下一步
			next() {
				
				
				let t = this;
				let id = t.select_id;
				let pages = getCurrentPages();
				console.log('5555',pages)
				
				// let currPage = pages[pages.length - 1]; //当前页面
				let prevPage = pages[pages.length - 2]; //上一个页面
				
				// console.log(e.currentTarget.dataset.id)
				//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
				prevPage.setData({
					selectId: id,
					totlemoney:t.totalmoney
				});
			
				// uni.navigateTo({
				// 	url: '/pages/kafapiao/kafapiao?money=' + this.totalmoney + '&select_id=' + this.select_id
				// })
				
				 // uni.navigateTo({
				 // 	url: '/pages/kafapiao/kafapiao'
				 // })
				 uni.navigateBack({
				 	checked:true
				 })
			}
		},
		onLoad(options) {
			console.log(options);

		},
		onShow() {
			// 选择消费记录
			this.choose_jilu();
			
		},
		onUnload: function() {
			let t = this;
			let id = t.select_id;
			let pages = getCurrentPages();
			
			// let currPage = pages[pages.length - 1]; //当前页面
			let prevPage = pages[pages.length - 2]; //上一个页面
			
			// console.log(e.currentTarget.dataset.id)
			//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
			prevPage.setData({
				selectId: id,
				totlemoney:t.totalmoney
			});
			
			
		},
	}
</script>

<style>
	.jiluitem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 34rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5
	}

	.jilulist {
		background: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;
		/* padding-bottom: 130rpx; */
		margin-bottom: 130rpx;
	}

	.jileft {
		display: flex;
		align-items: center;
	}

	.selimg {
		width: 32rpx;
		height: 32rpx;
		font-size: 0;
	}

	.seldanhao {
		color: #0A0808;
		font-size: 30rpx;
	}

	.selcishu {
		color: #7F8389;
		font-size: 26rpx;
		margin-top: 22rpx
	}

	.jidate {
		color: #7F8389;
		font-size: 26rpx;
	}

	.jimoney {
		color: #F29600;
		font-size: 28rpx;
		margin-top: 22rpx;
	}

	.dhao {
		margin-left: 36rpx
	}

	.bottom {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18rpx 32rpx;
		box-sizing: border-box;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;

	}

	.bottomleft {
		display: flex;
		align-items: center;
	}

	.allsel {
		color: #0A0808;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.jilu {
		color: #7F8389;
		font-size: 26rpx;
	}

	.total {
		color: #7F8389;
		font-size: 26rpx;
	}

	.totalmonety {
		color: #F39800;
		font-size: 30rpx;
	}

	.chongjilu {
		margin-left: 48rpx;
	}

	.nextstep {
		width: 200rpx;
		height: 100rpx;
		background: rgba(243, 152, 0, 1);
		box-shadow: 0rpx 4rpx 18rpx rgba(0, 0, 0, 0.04);
		opacity: 1;
		color: #fff;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
		border-radius: 10rpx;
	}
</style>