<template>
	<view class="contentStyle" style="">
		<view :style="{height:statusBarHeight+'px'}"></view>

		<uni-nav-bar title="生活缴费" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
		</uni-nav-bar>
		<view class="topbox">
			<image class="titleImg" src="/static/propertyImgs/payTitle.png"></image>
			<image class="payImg" src="/static/propertyImgs/payImg.png"></image>
		</view>
		<scroll-view class="page" scroll-y="true">
			<view class="container">
				<!-- 已缴费/欠费列表 -->
				<view class="bill-list">
					<view class="bill-item" @click="goToBill(item)" v-for="item,index in paymentList" :key="index">
						<image class="billIcon" :src="item.icon"></image>
						<view class="bill-info">
							<view class="bill-title">{{item.name}}
								<view class="bill-status debt" v-if="item.status=='已欠费'">已欠费</view>
							</view>
							<view class="bill-desc">{{item.address}}</view>
						</view>

						<view class="arrow"></view>
					</view>


				</view>

				<!-- 新增缴费区域 -->
				<view class="add-section">
					<view class="section-header">
						<text class="section-title">新增缴费</text>
						<text class="record-link" @click="goToRecord">缴费记录</text>
					</view>

					<view class="grid-list">
						<view class="grid-item" v-for="(item, index) in addList" :key="index" @click="goToAdd(item)">
							<view class="icon-box" :class="item.iconClass">
								<image class="iconStyle" :src="item.icon"></image>
							</view>
							<text class="item-name">{{ item.name +'费'}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>



</template>

<script>
	export default {
		onReady: function(e) {
			// console.log('onReady')
		},
		components: {


		},
		computed: {


		},
		created() {

		},
		onShow() {


		},
		onLoad() {

		},
		mounted() {},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				paymentList: [{
						id: 1,
						name: '物业费',
						status: '已欠费',
						address: '桂花园（别墅）2号楼2层',
						icon: "/static/propertyImgs/property.png",

					},
					{
						id: 2,
						name: '暖气费',
						status: '',
						address: '山东省日照市东港区桂花园（别墅）2号楼2层',
						icon: "/static/propertyImgs/heating.png",

					},
					{
						id: 3,
						name: '电费',
						status: '已欠费',
						address: '山东省日照市东港区桂花园（别墅）2号楼2层',
						icon: "/static/propertyImgs/electric.png",

					}
				],
				// 新增缴费列表数据
				addList: [{
						name: "燃气",
						type: "gas",
						icon: "/static/propertyImgs/gas.png",
						iconClass: "gas"
					},
					{
						name: "水",
						type: "water",
						icon: "/static/propertyImgs/water.png",
						iconClass: "water"
					},
					{
						name: "物业",
						type: "property",
						icon: "/static/propertyImgs/property.png",
						iconClass: "property"
					},
					{
						name: "电",
						type: "electric",
						icon: "/static/propertyImgs/electric.png",
						iconClass: "electric"
					},
					{
						name: "暖气",
						type: "heating",
						icon: "/static/propertyImgs/heating.png",
						iconClass: "heating"
					},
					{
						name: "车位",
						type: "parking",
						icon: "/static/propertyImgs/parkingIcon.png",
						iconClass: "parking"
					}
				]

			}
		},


		methods: {
			// 跳转到缴费
			goToBill(item) {
				uni.setStorageSync('arrearsPayment', item.name)
				if (item.status == '已欠费') {
					uni.redirectTo({
						url: '/pages/payment-list/arrearsPayment',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else {
					uni.redirectTo({
						url: '/pages/payment-list/noArrearsPayment',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			// 跳转到缴费记录
			goToRecord() {
				uni.redirectTo({
					url: '/pages/payment-list/paymentRecord',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 跳转到新增缴费
			goToAdd(type) {
				uni.setStorageSync('addPaymentType', type.name)
				uni.redirectTo({
					url: '/pages/payment-list/addPayment',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goBack() {
				uni.switchTab({
					url: '/pages/serviceIndex/serviceIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});


			},
		},


	}
</script>
<style lang="scss">
	page {
		background: linear-gradient(180deg, #dfedfd, #F6FAFF);
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		background: linear-gradient(180deg, #dfedfd, #F6FAFF);
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 20px;
		box-sizing: border-box;
		/* background-color: #fff; */
	}

	.topbox {
		height: 80px;
		width: 100%;
		position: relative;
	}

	.titleImg {
		width: 131px;
		height: 37px;
		position: absolute;
		left: 20px;
		bottom: 10px;
	}

	.payImg {
		width: 250px;
		height: 230px;
		position: absolute;
		right: -60px;
		bottom: -100px;
	}

	.container {
		/* padding: 15px; */
	}

	/* ===================== 欠费列表 ===================== */
	.bill-list {
		margin-bottom: 40rpx;
		background-color: #fff;
		padding: 15px;
		border-radius: 5px;
	}

	.bill-item {
		display: flex;
		align-items: center;
		background-color: #F6F9FE;
		border-radius: 12rpx;
		padding: 10px 10px 10px 0px;
		margin-bottom: 20rpx;
	}

	.bill-info {
		width: calc(90% - 50px);
		flex: 1;
	}

	.billIcon {
		width: 30px;
		height: 30px;
		margin: 10px;
	}

	.bill-title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin-bottom: 10rpx;
		display: flex;
	}

	.bill-desc {

		font-size: 14px;
		font-weight: 600;
		color: #999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 已欠费标签 */
	.bill-status {
		padding: 1px 8px;
		border-radius: 15px;
		font-size: 12px;
		font-weight: 500;
		color: #fff;
		background-color: #E34D59;
		margin-left: 5px;
	}

	/* 右侧箭头 */
	.arrow {
		width: 12rpx;
		height: 12rpx;
		border-right: 4rpx solid #ccc;
		border-bottom: 4rpx solid #ccc;
		transform: rotate(-45deg);
	}

	/* ===================== 新增缴费区域 ===================== */
	.add-section {
		background-color: #fff;
		padding: 15px;
		border-radius: 5px;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.record-link {
		font-size: 14px;
		color: #1677ff;
	}

	/* 网格列表 */
	.grid-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 13px;
	}

	.grid-item {
		width: calc(25% - 30px);
		background-color: #F6F9FE;
		border-radius: 12rpx;
		padding: 10px;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	/* 图标容器 */
	.icon-box {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #e6f0ff;
		display: flex;
		align-items: center;
		justify-content: center;
		/* margin-right: 24rpx; */
		font-size: 40rpx;
	}

	.iconStyle {
		width: 100%;
		height: 100%;
	}

	.item-name {
		font-size: 14px;
		font-weight: 600;
		color: #333;
	}
</style>