<template>
	<view class="hasfixedbottom">
		<view class="searchbar">
			<uni-easyinput placeholderStyle="font-size:30rpx" :input-border="false" prefixIcon="search"
				v-model="queryParams.perName" placeholder="搜索姓名或证件号码" @blur="getList" @clear="getList">
			</uni-easyinput>
			<view class="invertedbtn-red" @click="goVipList">+ 添加会员</view>
		</view>
		<view style="padding:0 20rpx">

			<view class="vipData mtb30">
				<view> 人数合计：<text>{{ countData.all? countData.all:0 }}</text>人 </view>
				<view> 新会员合计：<text>{{ countData.new? countData.new:0 }}</text>人 </view>
				<view> 续费会员合计：<text>{{ countData.old? countData.old:0 }}</text>人 </view>
			</view>

			<uni-swipe-action>
				<uni-swipe-action-item class="personitem" v-for="(n,index) in list" :key="index">
					<view class="content-box">
						<view class="flexbox">
							<view>{{n.perName}}
								<view class="date">
									证件号：{{n.perIdcCode}}
								</view>
							</view>
						</view>
						<view class="flexbox" @click="changeYear(n)">
							<view class="text-danger">({{yearlist[n.payYear-1].text}})</view>
							<uni-icons type="forward" size="18" color="#999"></uni-icons>
						</view>

					</view>
					<template v-slot:right>
						<view class="slot-button">
							<view @click="handleDelete(n)">
								<uni-icons type="trash-filled" color="#fff" size="20"></uni-icons>
								<text class="slot-button-text">删除</text>
							</view>
						</view>
					</template>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class="nodata" v-if="list.length==0">
			<image mode="aspectFit" src="/static/nodata.png"></image>
			<text>请添加会员</text>
		</view>

		<view class="fixedBottom">
			<button class="btn-red" :disabled="list?.length <= 0" @click="commitFN">保存并缴费</button>
		</view>

		<uni-popup ref="pickView" type="bottom">
			<view class="pickViewBox">
				<view v-for="(n,index) in yearlist" @click="bindyear(n)" :key="index">
					{{n.text}}<uni-icons v-show="n.value == (nowYear)" type="checkmarkempty" size="20"
						color="green"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import * as api from '@/common/api.js'
	const app = getApp()
	const queryParams = ref({
		rangeId: '',
		pageNum: 1,
		pageSize: 10,
	})
	const countData = ref({})
	const list = ref([])
	const total = ref(0)
	const nowYear = ref(1)
	const nowItem = ref({})
	const pickView = ref(null)
	const visible = ref(true)
	const yearlist = ref([{
		text: '一年',
		value: 1
	}, {
		text: '二年',
		value: 2
	}, {
		text: '三年',
		value: 3
	}, {
		text: '四年',
		value: 4
	}, {
		text: '五年',
		value: 5
	}])
	
	onLoad((option) => {
		if (option.rangeId) {
			queryParams.value.rangeId = option.rangeId
		}
	})
	
	onShow(() => {
		if (app.globalData.isLogin) {
			init()
		} else {
			app.firstLoadCallback = () => {
				init()
			};
		}
	})

	function init() {
		console.log('init',queryParams.value.rangeId )
		getList()
		getCount()
	}

	// 获取列表 + 统计（修复版）
	async function getList() {
		try {
			const res = await api.listAPI(queryParams.value)
			list.value = res.rows || []
			total.value = res.total || 0
		} catch (e) {
			list.value = []
			total.value = 0
		}

		// 只有 rangeId 合法时才获取统计（修复关键）
		// if (queryParams.value.rangeId && queryParams.value.rangeId > 0) {
			// await getCount()
		// } else {
		// 	// 清空统计
		// 	countData.value = { all: 0, new: 0, old: 0 }
		// }
	}

	// 获取统计
	async function getCount() {
		try {
			const res = await api.getNewCountByRangeId(queryParams.value.rangeId)
			countData.value = res.data || { all: 0, new: 0, old: 0 }
		} catch (e) {
			countData.value = { all: 0, new: 0, old: 0 }
		}
	}

	function goVipList() {
		let path = `/personalVip/vipList?rangeId=${queryParams.value.rangeId}`
		uni.navigateTo({ url: path });
	}

	function changeYear(e) {
		nowItem.value = e
		nowYear.value = e.payYear
		pickView.value.open()
	}

	// 修改年限
	async function bindyear(n) {
		nowYear.value = n.value
		pickView.value.close()
		nowItem.value.payYear = n.value
		
		await api.editYear({
			payId: nowItem.value.payId,
			year: nowItem.value.payYear
		})
		
		// 刷新列表和统计
		await getList()
		uni.showToast({ title: '操作成功' })
	}

	// 删除（修复关键逻辑）
	async function handleDelete(row) {
		uni.showModal({
			title: '提示',
			content: `确定删除${row.perName}吗`,
			success: async function(res) {
				if (res.confirm) {
					await api.paymentNewDel(row.payId)
					uni.showToast({ title: '删除成功' })
					getList()
				}
			}
		})
	}
	
	// 保存缴费
	async function commitFN(){
		if (!queryParams.value.rangeId) return
		uni.navigateTo({
				url: `/myCenter/payOrder?rangeId=${queryParams.value.rangeId}`
		})
	}
</script>

<style scoped lang="scss">
	.pickViewBox {
		background-color: #fff;
		text-align: center;
		view { line-height: 3; }
	}

	.searchbar {
		display: flex;
		align-items: center;
		padding: 25rpx;
		box-sizing: border-box;

		.invertedbtn-red {
			margin-left: 15rpx;
			font-size: 30rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			border-radius: 50rpx;
			background-color: #fff;
		}

		:deep(.uni-easyinput .uni-easyinput__content) {
			border-radius: 35rpx;
			border: none;
			height: 70rpx;
		}

		:deep(.uni-easyinput__content-input) {
			font-size: 26rpx;
		}
	}

	.slot-button {
		display: flex;
		align-items: center;
		padding: 0 20px;
		text-align: center;
		background-color: #E60012;
	}

	.slot-button-text {
		color: #ffffff;
		display: block;
		font-size: 14px;
	}

	.personitem {
		background: #fff;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.content-box {
			display: flex;
			background-color: #fff;
			align-items: center;
			padding: 16rpx;
			border-radius: 15rpx;
			justify-content: space-between;
			margin-bottom: 20rpx;
		}

		.flexbox {
			align-items: center;
		}
	}

	.vipData {
		padding: 10rpx 20rpx 5rpx;
		font-size: 28rpx;
		color: #666;
		view { margin-bottom: 10rpx; }
		text { color: #AD181F; font-weight: bold; }
	}

	.nodata {
		text-align: center;
		padding: 100rpx 0;
		image { width: 200rpx; height: 200rpx; margin-bottom: 20rpx; }
		text { font-size: 28rpx; color: #999; }
	}

	.fixedBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background: #fff;
		border-top: 1rpx solid #eee;
	}

	.btn-red {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: #E60012;
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
		border: none;
	}
</style>