<template>
	<view class="wrap">
		<scroll-view class="page" scroll-y @scrolltolower="onLoadMore">
			<view class="empty-state" v-if="!loading && billList.length === 0">
				<text class="empty-text">暂无账单数据</text>
			</view>

			<up-collapse v-if="billList.length" :border="false">
				<up-collapse-item
					v-for="(item, index) in billList"
					:key="index"
					:name="String(index)"
				>
					<!-- 标题：勾选框 + 月份 -->
					<template #title>
						<view class="collapse-header">
							<view class="check-circle" :class="{ checked: item.selected }" @click.stop="toggleSelect(index)">
								<text v-if="item.selected" class="check-icon">✓</text>
							</view>
							<text class="month-text">{{ item.month }}</text>
						</view>
					</template>
					<!-- 右侧金额 -->
					<template #value>
						<text class="price-text">¥{{ item.totalAmount }}</text>
					</template>
					<!-- 展开内容：每条明细 -->
					<view class="collapse-body">
						<view class="detail-row fee-row" v-for="(detail, di) in item.details" :key="di">
							<text class="detail-label">{{ detail.name }}</text>
							<text class="detail-value">¥{{ detail.amount }}</text>
						</view>
						<view class="detail-row meta-row" v-if="item.unitNo || item.date">
							<text class="detail-label">{{ item.unitNo }}</text>
							<text class="detail-value">{{ item.date }}</text>
						</view>
						<view class="detail-row meta-row">
							<text class="detail-label">原金额：¥{{ item.totalAmount }}</text>
							<text class="detail-value">优惠：¥{{ formatNum(item.discount) }}</text>
						</view>
					</view>
				</up-collapse-item>
			</up-collapse>

			<!-- 加载状态 -->
			<view class="load-more-status" v-if="loadingMore">
				<text class="loading-text">加载中...</text>
			</view>
			<view class="load-more-status" v-else-if="!hasMore && billList.length >= pageSize">
				<text class="no-more-text">— 没有更多了 —</text>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar" v-if="billList.length">
			<view class="select-all" @click="toggleSelectAll">
				<view class="check-circle" :class="{ checked: isAllSelected }">
					<text v-if="isAllSelected" class="check-icon">✓</text>
				</view>
				<text class="select-all-text">全选</text>
			</view>
			<view class="total-box">
				<text class="total-label">合计：</text>
				<text class="total-price">¥{{ selectedTotal.toFixed(2) }}</text>
			</view>
			<button class="pay-btn" :disabled="!canPay" @click="handleBatchPay">立即缴费</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getTopUpDetailsByMonth } from '/pageSubPack/api/apiSub.js'

const loading = ref(false)
const billList = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const hasMore = ref(true)
const loadingMore = ref(false)

// 从 paymentIndex 传来的数据中取 billResidentId
const cacheItem = uni.getStorageSync('arrearsPayment') || {}
const billResidentId = ref(cacheItem.billResidentId || cacheItem.id || '')

onLoad(() => {
	fetchBills()
})

// 拉取按月汇总账单
const fetchBills = async (isLoadMore = false) => {
	if (!billResidentId.value) return
	if (isLoadMore) {
		if (!hasMore.value || loadingMore.value) return
		pageNum.value++
		loadingMore.value = true
	} else {
		pageNum.value = 1
		hasMore.value = true
		loading.value = true
	}
	try {
		const res = await getTopUpDetailsByMonth({
			billResidentId: billResidentId.value,
			villageId: uni.getStorageSync('currentVillageId') || '',
			pageNum: pageNum.value,
			pageSize: pageSize.value
		})
		const rows = res.rows || []
		const typeNameMap = { '0': '物业管理服务费', '1': '车位管理费', '2': '生活垃圾处理费' }
		const mapped = rows.map(r => {
			const firstDetail = (r.details && r.details.length) ? r.details[0] : {}
			const restDetails = (r.details || []).slice(1)
			return {
				month: r.month || '',
				totalAmount: formatNum(r.totalAmount),
				discount: 0,
				selected: false,
				periodDisplay: firstDetail.periodDisplay || '',
				unitNo: cacheItem.unitNo || cacheItem.fullAddress || '',
				date: r.month || '',
				details: restDetails.map(d => ({
					name: typeNameMap[d.type] || d.name || '缴费费用',
					amount: formatNum(d.amount),
					id: d.id,
					payStatus: d.payStatus || '0'
				})),
				billIds: (r.details || []).map(d => d.id).filter(Boolean)
			}
		})

		if (isLoadMore) {
			billList.value = [...billList.value, ...mapped]
		} else {
			billList.value = mapped
		}
		total.value = res.total || 0
		hasMore.value = billList.value.length < total.value
	} catch (e) {
		if (isLoadMore) pageNum.value--
		console.error('获取账单失败', e)
	} finally {
		loading.value = false
		loadingMore.value = false
	}
}

const onLoadMore = () => {
	fetchBills(true)
}

const formatNum = (val) => {
	return (Number(val || 0)).toFixed(2)
}

const toggleSelect = (index) => {
	const current = billList.value[index]
	if (!current.selected) {
		// 选中：检查前面所有项是否都已选中，不允许跳过
		for (let i = 0; i < index; i++) {
			if (!billList.value[i].selected) {
				uni.showToast({ title: '请按顺序从第一个月开始选择', icon: 'none' })
				return
			}
		}
		billList.value[index].selected = true
	} else {
		// 取消选中：同时取消该项及后面所有已选中的
		for (let i = index; i < billList.value.length; i++) {
			billList.value[i].selected = false
		}
	}
}

const isAllSelected = computed(() =>
	billList.value.length > 0 && billList.value.every(m => m.selected)
)

const toggleSelectAll = () => {
	const val = !isAllSelected.value
	billList.value.forEach(m => { m.selected = val })
}

const selectedTotal = computed(() =>
	billList.value.filter(m => m.selected).reduce((sum, m) => sum + Number(m.totalAmount || 0), 0)
)

const canPay = computed(() => {
	const selected = billList.value.filter(m => m.selected)
	if (!selected.length) return false
	// 必须从第一个开始且连续
	return billList.value[0].selected && selected.length > 0
})

// 批量缴费
const handleBatchPay = () => {
	const selected = billList.value.filter(m => m.selected)
	if (!selected.length) return

	const allIds = selected.flatMap(m => m.billIds)
	const token = uni.getStorageSync('token') || ''
	const userId = uni.getStorageSync('userId') || ''

	const query = [
		['acct', userId],
		['orderType', '10'],
		['billId', allIds.join(',')],
		['deviceType', '3'],
		['residentUserId', userId],
		['token', token]
	].map(([k, v]) => encodeURIComponent(k) + '=' + encodeURIComponent(v)).join('&')

	// #ifdef APP-PLUS
	uni.showLoading({ title: '加载中...' })
	plus.share.getServices((services) => {
		const wx = services.find(s => s.id === 'weixin')
		uni.hideLoading()
		if (!wx) return uni.showToast({ title: '未检测到微信客户端', icon: 'none' })
		if (!wx.launchMiniProgram) return uni.showToast({ title: '当前微信版本太低，不支持拉起小程序', icon: 'none' })
		wx.launchMiniProgram({
			id: 'gh_a765aef0172c',
			type: 1,
			path: 'pages/arrearsPayment/arrearsPayment?' + query,
		}, (res) => {
			console.log('小程序回调:', JSON.stringify(res))
		}, (err) => {
			console.error('拉起失败:', JSON.stringify(err))
			uni.showToast({ title: '拉起支付小程序失败', icon: 'none' })
		})
	})
	// #endif
}
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
</style>

<style scoped>
.wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f5f5f5;
}

.page {
	flex: 1;
	overflow-y: auto;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	padding-bottom: 140rpx;
}

.empty-state {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 200rpx 0;
}

.empty-text {
	font-size: 30rpx;
	color: #ccc;
}

.load-more-status {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20rpx 0;
}

.loading-text {
	font-size: 26rpx;
	color: #999;
}

.no-more-text {
	font-size: 26rpx;
	color: #ccc;
}

/* ---- 折叠面板 ---- */
::v-deep .u-collapse-item {
	margin-bottom: 20rpx;
	border-radius: 8rpx;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

::v-deep .u-collapse-item__content {
	background: #F5FAFF;
	padding: 0;
}

::v-deep .u-cell {
	padding: 20rpx 18rpx !important;
}

/* 标题区 */
.collapse-header {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.check-circle {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	border: 3rpx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.check-circle.checked {
	background-color: #1677ff;
	border-color: #1677ff;
}

.check-icon {
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
	line-height: 1;
}

.month-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #222;
}

/* 金额 */
.price-text {
	font-size: 32rpx;
	font-weight: 700;
	color: #FF8F40;
}

/* 展开内容 */
.collapse-body {
	padding: 20rpx 24rpx 30rpx;
	margin: 0 24rpx;
	background: #F5FAFF;
}

.detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14rpx 0;
}

.detail-label {
	font-size: 28rpx;
}

.detail-value {
	font-size: 28rpx;
}

/* 明细费用名 - 深色 */
.fee-row .detail-label,
.fee-row .detail-value {
	color: #666666;
}

/* 日期/原金额/优惠 - 浅色 */
.meta-row .detail-label,
.meta-row .detail-value {
	color: #999999;
}

/* ---- 底部操作栏 ---- */
.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	background: #fff;
	box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.06);
	z-index: 10;
}

.select-all {
	display: flex;
	align-items: center;
	gap: 10rpx;
	flex-shrink: 0;
	margin-right: 16rpx;
}

.select-all-text {
	font-size: 26rpx;
	color: #666;
}

.total-box {
	flex: 1;
	display: flex;
	align-items: baseline;
	justify-content: center;
}

.total-label {
	font-size: 26rpx;
	color: #666;
}

.total-price {
	font-size: 36rpx;
	font-weight: 700;
	color: #FF8F40;
}

.pay-btn {
	flex-shrink: 0;
	width: 180rpx;
	height: 72rpx;
	line-height: 72rpx;
	background-color: #1677ff;
	color: #fff;
	font-size: 28rpx;
	font-weight: 500;
	border-radius: 8rpx;
	border: none;
	padding: 0;
}

.pay-btn[disabled] {
	background-color: #ccc;
	opacity: 0.7;
}
</style>
