<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="showAddPopup">+ 添加</view>
			<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="config.baseUrl_api + '/fs/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>

		<!-- 添加会员弹框 -->
		<uni-popup ref="addPopup" type="center">
			<view class="add-popup">
				<view class="popup-title">添加会员</view>
				<view class="popup-form">
					<view class="form-item">
						<view class="form-label">证件类型</view>
						<view class="form-input">
							<picker :value="idcListIndex" :range="idcList" range-key="label" @change="onIdcTypeChange">
								<view class="picker-value">{{ idcList[idcListIndex]?.label }}</view>
							</picker>
						</view>
					</view>
					<view class="form-item">
						<view class="form-label">证件号</view>
						<view class="form-input">
							<input v-model="addForm.idcCode" placeholder="请输入证件号" placeholder-class="placeholder-class"/>
						</view>
					</view>
				</view>
				<view class="popup-btns">
					<view class="popup-btn cancel" @click="closeAddPopup">取消</view>
					<view class="popup-btn confirm" @click="confirmAdd">确定</view>
				</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'
	import config from '@/config.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 addPopup = ref(null)
	const visible = ref(true)
	const addForm = ref({
		idcCode: '',
		idType: '0'
	})
	const idcList = ref([
		{ label: '身份证', value: '0' },
		{ label: '来往大陆(内地)通行证', value: '1' },
		{ label: '香港身份证', value: '5' }
	])
	const idcListIndex = ref(0)
	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}`
		})
	}

	// 显示添加弹框
	function showAddPopup() {
		addForm.value.idcCode = ''
		idcListIndex.value = 0
		addPopup.value.open()
	}

	// 关闭添加弹框
	function closeAddPopup() {
		addPopup.value.close()
	}

	// 证件类型选择
	function onIdcTypeChange(e) {
		idcListIndex.value = e.detail.value
		addForm.value.idType = idcList.value[idcListIndex.value].value
	}

	// 确认添加
	async function confirmAdd() {
		if (!addForm.value.idcCode) {
			uni.showToast({ title: '请输入证件号', icon: 'none' })
			return
		}
		if (!queryParams.value.rangeId) {
			uni.showToast({ title: '缺少rangeId', icon: 'none' })
			return
		}

		try {
			await api.memberInsertPersons({
				rangeId: queryParams.value.rangeId,
				year: 1,
				idcCode: addForm.value.idcCode
			})
			uni.showToast({ title: '添加成功', icon: 'success' })
			closeAddPopup()
			getList()
			getCount()
		} catch (e) {
			console.error(e)
		}
	}
</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;
	}

	/* 添加会员弹框 */
	.add-popup {
		width: 600rpx;
		background: #ffffff;
		border-radius: 24rpx;
		overflow: hidden;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		text-align: center;
		padding: 40rpx 30rpx 20rpx;
	}

	.popup-form {
		padding: 20rpx 30rpx 40rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.form-item:last-child {
		margin-bottom: 0;
	}

	.form-label {
		width: 140rpx;
		font-size: 28rpx;
		color: #333;
		flex-shrink: 0;
	}

	.form-input {
		flex: 1;
		background: #f5f5f5;
		border-radius: 12rpx;
		padding: 20rpx 24rpx;
	}

	.form-input input {
		font-size: 28rpx;
		color: #333;
		width: 100%;
	}

	.picker-value {
		font-size: 28rpx;
		color: #333;
	}

	.placeholder-class {
		color: #999;
	}

	.popup-btns {
		display: flex;
		border-top: 1rpx solid #eee;
	}

	.popup-btn {
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.popup-btn.cancel {
		color: #666;
		border-right: 1rpx solid #eee;
	}

	.popup-btn.confirm {
		color: #E60012;
		font-weight: 500;
	}
</style>