<template>
	<view class="page-container">
	
		<!-- 信息展示区域 -->
		<view v-if="loading" class="loading-container">
			<uni-icons type="spinner" size="40" color="#409eff" class="loading-icon" />
			<view class="loading-text">加载中...</view>
		</view>
		<view v-else class="info-card">
			<view class="info-item">
				<view class="info-label">姓名</view>
				<view class="info-value">{{ form?.name || '--' }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">证件类型</view>
				<view class="info-value">{{ getCertType(form?.idcType) }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">证件号</view>
				<view class="info-value">{{ form?.idcCode || '--' }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">性别</view>
				<view class="info-value">{{ form.sex == 0 ? '男' : '女' }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">会员编号</view>
				<view class="info-value">{{ form?.perCode || '--' }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">所属一级协会</view>
				<view class="info-value">{{ form?.topAssName || '--' }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">所属地区协会</view>
				<view class="info-value">{{ form?.areaAssName || '--' }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">注册单位会员</view>
				<view class="info-value">{{ form?.memName || '--' }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">缴费日期</view>
				<view class="info-value">{{ form?.payDate || '--' }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">注册时间</view>
				<view class="info-value">{{ form?.createTime || '--' }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">出生日期</view>
				<view class="info-value">{{ form?.birth || '--' }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">手机号码</view>
				<view class="info-value">{{ form?.phone || '--' }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">地址</view>
				<view class="info-value">{{ form?.site || '--' }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">详细地址</view>
				<view class="info-value">{{ form?.address || '--' }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { useUserStore } from '../store/modules/user';
	import { getAssoPers, getInfo } from '@/common/api.js';

	const userStore = useUserStore();
	const form = ref({});
	const loading = ref(false);
	const perId = ref('');

	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};

	// 获取证件类型
	const getCertType = (type) => {
		switch (type) {
			case '0':
			case '1':
				return '身份证';
			case '2':
				return '护照';
			case '3':
				return '军官证';
			case '4':
				return '港澳通行证';
			case '5':
				return '台湾通行证';
			default:
				return '--';
		}
	};

	// 获取性别


	// 获取个人会员信息
	const getMemberInfo = async () => {
		loading.value = true;
		try {
			const res = await getInfo(perId.value);
			form.value = res.data;
			// 处理数据
			form.value.topAssName = form.value?.ancestorNameList?.[0] || '--';
			form.value.areaAssName = form.value?.ancestorNameList?.[1] || '--';
			form.value.memName = form.value.memName || '--';
			form.value.payDate = form.value.payDate ? form.value.payDate.substring(0, 10) : '--';
			form.value.createTime = form.value.createTime ? form.value.createTime.substring(0, 10) : '--';
			form.value.birth = form.value.birth ? form.value.birth.substring(0, 10) : '--';
			form.value.site = form.value.site || '--';
			form.value.address = form.value.address || '--';
		} catch (error) {
			console.error('获取个人会员信息失败:', error);
			uni.showToast({
				title: '获取个人会员信息失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};

	onMounted(async () => {
		// 获取perId
		const userInfo = userStore.user;
		if (userInfo && userInfo.perId) {
			perId.value = userInfo.perId;
			getMemberInfo();
		} else {
			// 如果userInfo中没有perId，尝试通过getAssoPers获取
			try {
				const res = await getAssoPers(userInfo?.id || '');
				perId.value = res.data[10] || '';
				if (perId.value) {
					getMemberInfo();
				} else {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('获取perId失败:', error);
				uni.showToast({
					title: '获取用户信息失败',
					icon: 'none'
				});
			}
		}
	});
</script>

<style lang="scss" scoped>
	.page-container {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 30rpx;
	}

	/* 导航栏 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		background: #ffffff;
		padding: 0 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.nav-left {
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.nav-right {
		width: 44rpx;
	}

	/* 信息卡片 */
	.info-card {
		margin: 20rpx;
		background: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	/* 信息项 */
	.info-item {
		display: flex;
		align-items: center;
		padding: 30rpx 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	/* 标签 */
	.info-label {
		font-size: 28rpx;
		color: #666666;
		width: 200rpx;
		flex-shrink: 0;
	}

	/* 值 */
	.info-value {
		font-size: 28rpx;
		color: #333333;
		flex: 1;
		padding-left: 20rpx;
		text-align: left;
		word-break: break-all;
	}

	/* 加载状态 */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 500rpx;
	}

	.loading-icon {
		animation: spin 1s linear infinite;
	}

	.loading-text {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #666;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	/* 响应式调整 */
	@media (max-width: 375px) {
		.info-label {
			width: 160rpx;
			font-size: 26rpx;
		}
		
		.info-value {
			font-size: 26rpx;
			padding-left: 16rpx;
		}
		
		.info-item {
			padding: 24rpx 20rpx;
		}
	}
</style>