<template>
	<view class="page">
		<view class="search-box">
			<view>
				<u-input v-model="value" type="select" @click="show = true" style="background-color: #fff;" placeholder="-"  :border="false"/>
				<u-select v-model="show" :list="list1" @confirm="confirm"></u-select>
			</view>
			
		</view>
		<view class="search-total">
				<view class="left">
					<view class="price-total"><u-icon name="rmb" style="font-size: 24rpx;" />100.00</view>
					<view>（当前租金欠费金额)</view>
				</view>
				<div class="right" @click='toDetail'>
					<view>缴费记录 <u-icon name="arrow-right"  size="28" /></view>
				</div> 
	
		</view>
		<view style="text-align: center;color:#0EBB5A;padding: 30rpx 0;">每月1日为付款日</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" active-color="#0EBB5A" 	@change="xuanAll(item,$event)"/>
								
							<view class="list-item">
								<view class="list-info">
									<view class="info-items">
										<view class="info-title">{{item.name}}：</view>
										<view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{item.price}}</view>
									</view>
								</view>
							</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"
								active-color="#0EBB5A"
							>全选</u-checkbox>
						</u-checkbox-group>
				<view class="cart-add">
					合计：<view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{payAll}}</view>
				</view>
				<u-button type="success" class="buttons" @click="joinShow" size="mini">去支付</u-button>
			</view>
		</view>
		<!-- <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,
				payAll:0,
				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: 1500,
						rate: '100%',
						chilren: [],
						showItem: false,
						gouxuan:false
					},
					{
						img: '',
						name: '卫生费',
						price: 5000,
						rate: '100%',
						chilren: [],
						showItem: false,
						gouxuan:false
					},
					{
						img: '',
						name: '水费',
						price: 2000,
						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
					},
				],
							
							loadShow:false,
							showAll:false,
							
			};
		},
		watch:{
			recordList:{
				deep:true,
				handler(newVal){ 
					 const allTrue = this.recordList.every(item => item.gouxuan)
					 this.showAll = allTrue
				}
			}
		},
		onShow() {
			const isLogin = uni.getStorageSync('token');
			if (isLogin == '') {
				// 如果未登录，跳转到登录页面
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {

				this.$http.sendRequest('/cerePlatformMerchant/queryByPage', 'POST',{"pageSize":10,pageNumber:0,phone:uni.getStorageSync('user').phone},1).then(res => {
					 if(res.data.code == '20004' || res.data.code == '20003'){
						 uni.navigateTo({
						 	url: '/pages/login/login'
						 })
					 }
				})
			}

		},
		methods: {
			quanxuan(e){	
				
			  const allTrue = this.recordList.every(item => item.gouxuan)
			  if(allTrue){
				  this.payAll= 0
				  this.showAll = !this.showAll
				  this.recordList.forEach(item => {
				    item.gouxuan = !allTrue;
					
				  });
			  }else{
				 this.showAll = true
				 
				  this.recordList.forEach(item => {
				    item.gouxuan = !allTrue;
					this.payAll += item.price
				  });
			  }
	
				
			},
			xuanAll(item,e){
				
				if(e.value){
					this.payAll += item.price
				}else{
					this.payAll -= item.price
				}
			},
			recordXq(item){
				 const encodedItem = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
				 url: `/pages/accepting/accepting?item=${encodedItem}`,
				 })
			},
			toDetail() {
				uni.navigateTo({
					url: '/pagesA/rentPay/rentPayDetails'
				})
			},
			joinShow(){
				 if(this.payAll == 0){
					 uni.showToast({
					 	icon: 'error',
					 	title: '请选择支付订单'
					 })
				 }else{
					 uni.navigateTo({
					 	url: '/pagesA/rentPay/goPay'
					 })
				 }
			},
			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
				
			},
		}
	}
</script>

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