<template>
	<view class="page">
		<view class="search-box">
			<view>
				<u-input v-model="value" type="select" border @click="show = true" style="background-color: #F7F7F7;"
					placeholder="请选择店铺" />
				<u-select v-model="show" :list="list1" @confirm="confirm"></u-select>
			</view>
			<view class="search-total">
				<view class="left">
					<text class="price-total"><u-icon name="rmb" style="font-size: 24rpx;" />{{allnum}}</text>
					<text style="margin-left: 20rpx;">(含代缴费)</text>
				</view>
				<div class="right" @click='toDetail'>
					<text>缴费记录</text>
					<u-icon name="arrow-right" style="margin-left: 8rpx;"></u-icon>
				</div>
			</view>
		</view>
		<!-- 记录列表 -->
		<view class="record-list" v-if="recordList.length>0">
			<view class="record-list-box" v-for="(item,index) in recordList" :key="index">
				<u-checkbox-group class="list-group" style="width: 100%;">
					<view class="list">
						<u-checkbox @change="e=>quanxuanitem(e,index)" v-model="item.isshowxz" shape="circle"
							:label-disabled="false" />
						<view class="list-item" @click="changeisxl(index)" >
							<view class="list-info">
								<view class="img">
									<image v-if="item.itemName == '物业费'" src="@/static/icon/icon11.png"
										mode="heightFix"></image>
									<image v-else-if="item.itemName == '卫生费'" src="@/static/icon/icon12.png"
										mode="heightFix"></image>
									<image v-else-if="item.itemName == '水费'" src="@/static/icon/icon13.png"
										mode="heightFix"></image>
									<image v-else-if="item.itemName == '电费'" src="@/static/icon/icon14.png"
										mode="heightFix"></image>
									<image v-else-if="item.itemName == '燃气费'" src="@/static/icon/icon15.png"
										mode="heightFix"></image>
									<image v-else src="@/static/icon/icon16.png" mode="heightFix"></image>
								</view>
								<view class="info-items">
									<view class="info-title">{{item.itemName}}：<text class="price"><u-icon name="rmb"
												style="font-size: 24rpx;" />{{ item.detailsVOList | jsitem}}</text>
									</view>
									<view class="info-item">
										<text style="margin-right: 20rpx;">单价：￥{{item.itemStandard}}</text>
										<text>费率：{{item.cheapRate}}%</text>
									</view>
								</view>
							</view>
						</view>
						<view><u-icon @click="changeisxl(index)" :name="item.isxl?'arrow-up':'arrow-down'"></u-icon>
						</view>
					</view>
					<view v-if="item.detailsVOList&& item.detailsVOList.length>0 && item.isxl">
						<view class="list" v-for="(item1,index1) in item.detailsVOList" >
							<view style="display: flex;align-items: center;">
								<u-checkbox v-model="item1.isshowxz" shape="circle" :label-disabled="false" />
								<view class="" @click="changeitemisshowxz(index,index1)">
									<view class="info-item">周期：{{item1.startDate}} - {{item1.endDate}}</view>
									<view class="info-item" style="margin-top: 6rpx;">
										<text style="margin-right: 20rpx;">数量：{{item1.source==1?'-':item1.number}}{{item1.itemUnit}}</text>
										<text v-if="item1.houseNumber!=''">门牌号：{{item1.houseNumber}}</text>
									</view>
								</view>
							</view>
							<view class="" @click="changeitemisshowxz(index,index1)">
								<text class="price"><u-icon name="rmb"
										style="font-size: 24rpx;" />￥{{item1.payPrice}}</text>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
		</view>
		<view v-if="recordList.length==0" style="text-align: center;margin-top: 50rpx;" class="tit1">请选择店铺</view>
		<view style="height: 120rpx;"></view>
		<view class="page-footer">
			<view class="footer-buy">
				<u-checkbox-group>
					<u-checkbox shape="circle" @change="quanxuan" v-model="showAll">全选</u-checkbox>
				</u-checkbox-group>
				<view class="">
					合计：<text class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{allcknum}}</text>
				</view>
				<u-button type="success" style="margin: 0 10rpx;" @click="submit">去支付</u-button>
			</view>
		</view>
		<u-popup class="userForm" v-model="joinShow" mode="center" :closeable="true" width="80%">
			<u-form class="form-box" ref="uForm" :label-width="120">
				<view style="padding: 30rpx;">
					<view class="title">请选择支付方式</view>
					<u-radio-group v-model="fangshi" @change="radioGroupChange" :wrap="true">
						<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
							:disabled="item.disabled" style="padding: 5px 0;">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view class="" v-if="fangshi == 'H5支付'">

					</view>
					<view class="" v-else>
						<image :src="$imgUrl('/erwm.jpg')" mode="widthFix" style="width: 80%;" />


					</view>
					<!-- <u-form-item label="微信小程序支付">
						
					</u-form-item>
					<u-form-item label="付款码扫码支付"></u-form-item> -->
					<u-button type="success" @click="submit">提交</u-button>

				</view>

			</u-form>

		</u-popup>

		<!-- <u-loading :show="true" size="60" style="position: absolute; top:80%;left: ;" color="red"></u-loading> -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				show: false,
				joinShow: false,
				value: '',
				list1: [
				// 	{
				// 	value: '0',
				// 	label: '全部'
				// }, {
				// 	value: '1',
				// 	label: '物业费'
				// }, {
				// 	value: '2',
				// 	label: '水费'
				// }, {
				// 	value: '3',
				// 	label: '卫生费'
				// }, {
				// 	value: '4',
				// 	label: '燃气费'
				// }, {
				// 	value: '5',
				// 	label: '电费'
				// },
				],
				recordList: [],
				list: [{
						name: 'H5支付',
						disabled: false
					},
					// {
					// 	name: '付款码扫码支付',
					// 	disabled: false
					// }
				],
				fangshi: 'H5支付',
				showAll: false,

			};
		},
		filters: {

			jsitem(e) {
				// console.error(e)
				let num = 0
				for (let n = 0; n < e.length; n++) {
					num = num + Number(e[n].payPrice)
					// if(e[n].isshowxz){
					// 	num = num + Number(e[n].payPrice)
					// }
				}
				return num.toFixed(2)
			}
		},
		computed: {
			allnum() {
				let num = 0
				for (let i = 0; i < this.recordList.length; i++) {
					let list = this.recordList[i].detailsVOList
					for (let n = 0; n < list.length; n++) {
						num = num + Number(list[n].payPrice)
					}
				}
				return num.toFixed(2)
			},
			allcknum() {
				let num = 0
				for (let i = 0; i < this.recordList.length; i++) {
					let list = this.recordList[i].detailsVOList
					for (let n = 0; n < list.length; n++) {
						if (list[n].isshowxz) {
							num = num + Number(list[n].payPrice)
						}
					}
				}
				return num.toFixed(2)
			},
		},
		watch: {
			recordList: {
				deep: true,
				handler(newVal) {
					for (let i = 0; i < this.recordList.length; i++) {
						this.recordList[i].isshowxz = this.recordList[i].detailsVOList.every(item => item.isshowxz)
					}
					const allTrue = this.recordList.every(item => item.isshowxz)
					this.showAll = allTrue

				}
			}
		},
		onShow() {
			let shopId = {
				shopId: uni.getStorageSync('shopId') || ''
			}
			const isLogin = uni.getStorageSync('token');
			if (isLogin == '') {
				// 如果未登录，跳转到登录页面
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {

				this.$http.sendRequest('/cereAssetShopInformation/propertyQueryShopInformation', 'POST', {
					contactNumber: uni.getStorageSync('user').phone,
					pageNumber: 1,
					pageSize: 10
				}, 1).then(res => {
					this.list1 = res.data.data.records.map(item => {
						let c1 = {
							value: item.merchantId,
							label: item.shopName,
						}
						return c1
					})
					this.confirm(this.list1)
					console.error(this.list1)
				})
			}

		},
		methods: {
			changeitemisshowxz(index,index1) {
				console.error(index,index1)
				console.error(this.recordList[index].detailsVOList[index1].isshowxz)
				this.recordList[index].detailsVOList[index1].isshowxz = !this.recordList[index].detailsVOList[index1].isshowxz
				this.$forceUpdate()
			},
			changeisxl(e) {
				this.recordList[e].isxl = !this.recordList[e].isxl
			},
			quanxuanitem(e, index) {
				console.error(e)
				console.error(this.recordList[index].detailsVOList)
				if (e.value) {
					for (let i = 0; i < this.recordList[index].detailsVOList.length; i++) {
						this.recordList[index].detailsVOList[i].isshowxz = true
					}
				} else {
					for (let i = 0; i < this.recordList[index].detailsVOList.length; i++) {
						this.recordList[index].detailsVOList[i].isshowxz = false
					}
				}
			},
			quanxuan(e) {
				// this.showAll = e.value
				// console.error(e)
				// const allTrue = this.recordList.every(item => item.gouxuan)
				if (e.value) {
					this.recordList = this.recordList.map(item => {
						item.isxl = true
						item.isshowxz = true
						item.detailsVOList = item.detailsVOList.map(item1 => {
							item1.isshowxz = true
							return item1
						})
						return item
					})
				} else {
					this.recordList = this.recordList.map(item => {
						item.isxl = true
						item.isshowxz = false
						item.detailsVOList = item.detailsVOList.map(item1 => {
							item1.isshowxz = false
							return item1
						})
						return item
					})
				}


			},
			recordXq(item) {
				const encodedItem = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/accepting/accepting?item=${encodedItem}`,
				})
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/propertyPay/payRecord/payRecord'
				})
			},
			contractdetail() {
				// uni.navigateTo({

				// })
			},
			submit() {

				// console.log(this.recordList)
				let c1 = []
				for (let i = 0; i < this.recordList.length; i++) {
					if (this.recordList[i].isshowxz) {
						c1.push(this.recordList[i])
					} else {
						let newitem = JSON.parse(JSON.stringify(this.recordList[i]))
						newitem.detailsVOList = newitem.detailsVOList.filter(function(item1) {
							return item1.isshowxz
						})
						if (newitem.detailsVOList.length > 0) {
							c1.push(newitem)
						}
					}
				}
				console.log(c1)
				let storeNumber = []
				let orderNumber = []
				for (let i = 0; i < c1.length; i++) {
					for (let n = 0; n < c1[i].detailsVOList.length; n++) {
						// console.error(c1[i].detailsVOList[n])
						storeNumber.push(c1[i].detailsVOList[n].storeCode)
						orderNumber.push(c1[i].detailsVOList[n].orderNo)
					}
				}
				let info = {
					"actualPaymentFee": this.allcknum * 100,
					"merchantName": this.value,
					"storeNumber": storeNumber.join(','),
					"payerName": uni.getStorageSync('user').name,
					"paymentAccount": uni.getStorageSync('user').phone,
					"orderNumber": orderNumber.join(','),
					"paymentContent": JSON.stringify(c1)
				}
				console.log(info)
				this.$http.sendRequest('/cerePaymentInfo/payWy', 'POST',info, 1).then(res => {
					console.error(res.data)
					if(res.data.code =='200') {
						uni.navigateTo({
							url:'/pagesA/payweb/payweb?url='+escape(res.data.data)
						})
					}
				})
				return
				// 	this.loadShow = true
				// setTimeout(()=>{
				// 	this.loadShow = false
				// },2000)
				if (this.fangshi == '付款码扫码支付') {
					this.joinShow = false

				} else {
					let payList = {
						additional: "附加交易授权",
						backUrl: "",
						channelId: "",
						expireTime: 1800,
						finishUrl: "",
						latitude: "1",
						longitude: "1",
						orderNo: "",
						payId: "",
						payMerData: [{
							amount: 1,
							body: "物业缴费",
						}],
						payType: "Online",
						returnUrl: "",
						showBtn: "1",
						siteId: "",
						toApp: "0",
						totalAmount: 1,
						uid: "1693617316237021185",
						universalLink: ""
					}
					const randomNumber = Math.floor(Math.random() * 10000); // 生成一个0到9999之间的随机数
					const timestamp = new Date().getTime(); // 获取当前时间的时间戳
					payList.orderNo = `${randomNumber}${timestamp}`

					payList.uid = uni.getStorageSync('shopId')
					this.$http.sendRequest('/aggregationPayment/createOrder', 'POST', payList, 1).then(res => {
						console.log(JSON.parse(res.data.data).data.codeUrl)
						let url = JSON.parse(res.data.data).data.codeUrl

						// window.location.href = url
						// plus.runtime.openURL(url , function(e) {console.log(e)})
						uni.showModal({
							title: res.data.message,
							showCancel: false,
							success: ress => {
								uni.switchTab({
									url: '/pages/home/home'
								})
							}
						})
					})

					this.joinShow = false
					// uni.showModal({
					// 	title: '支付成功	',
					// 	showCancel:false,
					// 	success:ress => {
					// 		uni.switchTab({
					// 			url: '/pages/home/home'
					// 		})
					// 	}
					// })
				}

			},
			confirm(e) {
				console.log(e)
				this.value = e[0].label
				this.$http.sendRequest('/eventReporting/propertyPayment', 'POST', {
					merchantId: e[0].value,
					pageNumber: 1,
					pageSize: 10
				}, 1).then(res => {
					console.error(res)
					this.recordList = res.data.data.detailsVOList.map(item => {
						item.isxl = true
						item.isshowxz = false
						item.detailsVOList = item.detailsVOList.map(item1 => {
							item1.isshowxz = false
							return item1
						})
						return item
					})
				})
			},
			radioGroupChange(e) {
				this.fangshi = e
			}
		}
	}
</script>

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

	.tit1 {
		color: #7a7a7a;
		font-size: 26rpx;
	}
</style>