<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="list"></u-select>
			</view>
			<view class="search-total">
				<view class="left">
					<text class="price-total"><u-icon name="rmb" style="font-size: 24rpx;" />800.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="checked" 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;" />300.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="checked" 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;" />300.00</text>
							</view>
						</view>
				</u-checkbox-group>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="page-footer">
			<view class="footer-buy">
				<u-radio shape="circle">全选</u-radio>
				<view class="">
					合计：<text class="price"><u-icon name="rmb" style="font-size: 24rpx;" />300.00</text>
				</view>
				<u-button type="success" style="margin: 0 10rpx;">去支付</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				value: '',
				list: [{ value: '1', label: '大兴鸡排（A2144' }, { value: '2', label: '湖' }],
				checked: [],
				recordList:[
					{
						img: '',
						name: '物业费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
					},
					{
						img: '',
						name: '卫生费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
					},
					{
						img: '',
						name: '水费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
					},
					{
						img: '',
						name: '电费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
					},
					{
						img: '',
						name: '燃气费',
						price: 15,
						rate: '100%',
						chilren: [],
						showItem: false,
					},
				],
			};
		},
		methods: {
			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({
				
				// })
			}
		}
	}
</script>

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