<template>
	<view class="page">
		<view class="search-box">
			<view>
				<u-input v-model="value" type="select" border @click="show = true" style="background-color: #F7F7F7;"/>
				<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;" />100.00</text>
					<text>(含代缴费)</text>
				</view>
				<div class="right" @click='toDetail'>
					<text>缴费记录<u-icon name="arrow-right" style="margin-left: 8rpx;"></u-icon></text>
				</div>
			</view>
		</view>
		<!-- 记录列表 -->
		<view class="record-list">
			<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 v-model="recordList[index].gouxuan" shape="circle" :label-disabled="false" />
							<view class="list-item">
								<view class="list-info">
									<view class="img">
										 <image :src="$imgUrl('/img/2.jpg')"></image>
									</view>
									<view class="info-items">
										<view class="info-title">{{item.name}}：<text class="price"><u-icon name="rmb" style="font-size: 24rpx;" />100.00</text></view>
										<view class="info-item">
											<text>单价：￥15</text>
											<text>费率：100%</text>
										</view>
									</view>
								</view>
							</view>
							<view @click="recordList[index].showItem = !recordList[index].showItem"><u-icon name="arrow-right"></u-icon></view>
						</view>
						<view class="list" v-if="recordList[index].showItem">
							<u-checkbox v-model="recordList[index].gouxuan" shape="circle" :label-disabled="false" />
							<view class="">
								<view class="info-item">周期：2022.02.22 - 2022.02.22</view>
								<view class="info-item">
									<text>数量：100m²</text>
									<text>门店号：A5646</text>
								</view>
							</view>
							<view class="">
								<text class="price"><u-icon name="rmb" style="font-size: 24rpx;" />20.00</text>
							</view>
						</view>
				</u-checkbox-group>
			</view>
		</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;" />100.00</text>
				</view>
				<u-button type="success" style="margin: 0 10rpx;" @click="joinShow = true">去支付</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: '电费' }	],
				checked: [],
				recordList:[
					{
						img: '',
						name: '物业费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
						gouxuan:false
					},
					{
						img: '',
						name: '卫生费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
						gouxuan:false
					},
					{
						img: '',
						name: '水费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
						gouxuan:false
					},
					{
						img: '',
						name: '电费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
						gouxuan:false
					},
					{
						img: '',
						name: '燃气费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
						gouxuan:false
					},
				],
				recordList1:[
					{
						img: '',
						name: '物业费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
						gouxuan:false
					},
					{
						img: '',
						name: '卫生费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
						gouxuan:false
					},
					{
						img: '',
						name: '水费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
						gouxuan:false
					},
					{
						img: '',
						name: '电费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
						gouxuan:false
					},
					{
						img: '',
						name: '燃气费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
						gouxuan:false
					},
				],
				list: [
								{
									name: 'H5支付',
									disabled: false
								},
								// {
								// 	name: '付款码扫码支付',
								// 	disabled: false
								// }
							],
							fangshi:'H5支付',
							loadShow:false,
							showAll:false,
							
			};
		},
		watch:{
			recordList:{
				deep:true,
				handler(newVal){ 
					 const allTrue = this.recordList.every(item => item.gouxuan)
					 this.showAll = allTrue
				}
			}
		},
		onShow() {
		let shopId = {
			shopId:uni.getStorageSync('shopId') || ''
		}
		  const isLogin = uni.getStorageSync('token');
		  if (isLogin =='') { 
		    // 如果未登录，跳转到登录页面
		        	uni.navigateTo({
		        	  url: '/pages/login/login'
		        	})
		  }else{
			  let page={
				condition:2
			  }
			 this.$http.sendRequest('/shop/getById', 'POST',shopId).then(res => {
				 if(res.data.code !="20004"){
					 this.shopMsg = res.data.data
					 this.Islogin= false
					 this.$http.sendRequest('/index/index', 'POST',page).then(res => {
					 	//成功回调
					 	this.tongji = res.data.data
					 })
				 }else{
					 uni.navigateTo({
					   url: '/pages/login/login'
					 })
				 }
			 })
		  }		
		
		},
		methods: {
			quanxuan(e){	
			
			  const allTrue = this.recordList.every(item => item.gouxuan)
			  if(allTrue){
				  this.showAll = !this.showAll
				  this.recordList.forEach(item => {
				    item.gouxuan = !allTrue;
				  });
			  }else{
				 this.showAll = true
				  this.recordList.forEach(item => {
				    item.gouxuan = !allTrue;
				  });
			  }
	
				
			},
			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(){
				
			// 	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)
				let arr =[]
				if(e[0].label == '全部'){
					this.recordList  = this.recordList1
				}else{
					this.recordList1.map(item =>{
						if(item.name == e[0].label){
							arr.push(item)
						}
					})
					this.recordList = arr 
				}
				this.value = e[0].label
				
			},
			radioGroupChange(e) {
						this.fangshi = e
					}
		}
	}
</script>

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