<template>
	<view class="ciy-page">
		<!-- 顶部导航栏：复用框架标题样式 + 返回首页按钮 -->
		<view class="ciy-title mk rel bg3">
			<text class="abs l1 t0 txt9 tran5" @tap="goToHome">← 首页</text>
			<view class="title txt9">成员管理</view>
			<view class="right"></view>
		</view>

		<!-- 主体内容区 -->
		<view class="main">
			<!-- 搜索+新增区域：复用框架布局/按钮样式 -->
			<view class="flex flex-center px4 py2 bg1">
				<!-- 搜索框：复用框架背景/内边距样式 -->
				<view class="flex1 bg4 py1 px3 rounded-lg flex flex-center">
					<text class="txt3 mr2">🔍</text>
					<input 
						class="flex1 ciy-edit txt7" 
						v-model="searchKey" 
						placeholder="按姓名/头衔搜索"
						@input="handleSearch"
					/>
				</view>
				<!-- 新增按钮：复用框架btn样式 -->
				<view class="btn man cc ml3 sm" @tap="goToUserEdit">
					<text class="mr1">+</text>
					<text>新增</text>
				</view>
			</view>

			<!-- 分类标签栏：复用框架滚动/布局样式 -->
			<scroll-view scroll-x class="bg1">
				<view class="flex px4 py2">
					<view 
						class="px3 py1 mx1 rounded-lg tran5" 
						v-for="(tab, idx) in tabs" 
						:key="idx"
						:class="[activeTab === idx ? 'man txt-white' : 'bg4 txt6']"
						@tap="switchTab(idx)"
					>
						<text>{{tab.name}}</text>
					</view>
				</view>
			</scroll-view>

			<!-- 成员列表区域：复用框架网格/卡片样式 -->
			<scroll-view 
				class="flex1" 
				scroll-y
				@scrolltolower="loadMore"
				refresher-enabled="true"
				@refresherrefresh="refreshList"
			>
				<!-- 成员网格：复用框架九宫格样式 -->
				<view class="ciy-grid grid3 px4 py3 bg4">
					<!-- 成员卡片：复用框架列表/背景样式 -->
					<view 
						class="grid my2" 
						v-for="(item, idx) in filterMembers" 
						:key="item.id"
						@tap="goToUserEdit(item.id)"
					>
						<view class="bg1 rounded-lg p3 shadow-sm flex flexcol items-center">
							<!-- 头像 -->
							<image 
								class="w12 h12 rounded-full mb2" 
								:src="item.avatar || '/static/avatar-default.png'"
								mode="aspectFill"
								@error="handleImgError($event)"
							/>
							<!-- 姓名 -->
							<text class="txt8 txt-lg txt-wb">{{item.name}}</text>
							<!-- 头衔 -->
							<text class="txt5 txt-sm mt1">{{getTitleName(item.usertitle)}}</text>
							<!-- 负责人标签：复用框架警示样式 -->
							<text v-if="item.isLeader" class="warn txt-xs px2 py05 rounded mt1">负责人</text>
						</view>
					</view>
				</view>

				<!-- 空列表提示：复用框架提示样式 -->
				<view v-if="filterMembers.length === 0" class="ciy-tip txt-center py4">
					<text class="txt6">暂无{{tabs[activeTab].name}}类成员</text>
					<view class="btn succ sm cc mt3" @tap="goToUserEdit">
						<text>立即添加</text>
					</view>
				</view>

				<!-- 加载更多：复用框架文字/间距样式 -->
				<view v-if="hasMore && filterMembers.length > 0" class="txt-center py3 txt4">
					<text>加载更多...</text>
				</view>
			</scroll-view>
		</view>

		<!-- 底部固定区（框架默认） -->
		<view class="ciy-bottom"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKey: '', // 搜索关键词
			activeTab: 0, // 当前选中标签索引
			// 分类标签：匹配你的设计（负责人/科研秘书/在册/历史/外部）
			tabs: [
				{ name: '负责人', type: 'leader' },
				{ name: '科研秘书', type: 'secretary' },
				{ name: '在册成员', type: 'current' },
				{ name: '历史成员', type: 'history' },
				{ name: '外部成员', type: 'external' }
			],
			allMembers: [], // 所有成员数据
			page: 1, // 当前页码
			pageSize: 15, // 每页条数
			hasMore: true, // 是否有更多数据
			loading: false // 加载状态
		};
	},
	computed: {
		// 筛选后的成员列表（标签+搜索）
		filterMembers() {
			let list = [...this.allMembers];
			// 1. 按标签筛选
			const activeType = this.tabs[this.activeTab].type;
			list = list.filter(item => {
				switch(activeType) {
					case 'leader': return item.usertitle === 1; // 负责人
					case 'secretary': return item.usertitle === 2; // 科研秘书
					case 'current': return item.status === 1; // 在册
					case 'history': return item.status === 2; // 历史
					case 'external': return item.usertitle === 5; // 外部成员
					default: return true;
				}
			});
			// 2. 按搜索关键词筛选
			if (this.searchKey) {
				list = list.filter(item => {
					return item.name.includes(this.searchKey) || this.getTitleName(item.usertitle).includes(this.searchKey);
				});
			}
			return list;
		}
	},
	onLoad() {
		// 页面加载时获取成员列表
		this.getMemberList();
	},
	methods: {
		// 返回首页
		goToHome() {
			uni.switchTab({
				url: '/pages/main/index' // 你的首页实际路径
			});
		},

		// 获取头衔名称
		getTitleName(id) {
			const titleMap = {
				1: '负责人',
				2: '科研秘书',
				3: '在册成员',
				4: '历史成员',
				5: '外部成员'
			};
			return titleMap[id] || '未知';
		},

		// 获取成员列表（对接后端接口）
		async getMemberList() {
			if (this.loading) return;
			this.loading = true;
			try {
				// 调用后端接口（适配ambap目录）
				const [err, res] = await uni.request({
					url: '/ambap/member.php?act=member.list',
					method: 'POST',
					data: {
						page: this.page,
						pageSize: this.pageSize
					}
				});
				
				if (err) throw new Error('网络请求失败');
				const result = res.data || {};
				
				if (result.code === 1) {
					const newList = result.list || [];
					// 下拉刷新重置列表，上拉加载追加列表
					this.allMembers = this.page === 1 ? newList : [...this.allMembers, ...newList];
					// 判断是否有更多数据
					this.hasMore = newList.length >= this.pageSize;
				} else {
					uni.showToast({ title: result.errmsg || '获取列表失败', icon: 'none' });
				}
			} catch (err) {
				uni.showToast({ title: '加载失败', icon: 'none' });
				console.error('获取成员列表失败：', err);
			} finally {
				this.loading = false;
			}
		},

		// 搜索输入处理
		handleSearch() {
			// 实时筛选，无需额外请求
		},

		// 切换分类标签
		switchTab(idx) {
			this.activeTab = idx;
		},

		// 下拉刷新
		refreshList() {
			this.page = 1;
			this.hasMore = true;
			this.getMemberList().then(() => {
				uni.stopPullDownRefresh();
			});
		},

		// 加载更多
		loadMore() {
			if (!this.hasMore || this.loading) return;
			this.page++;
			this.getMemberList();
		},

		// 跳转到新增/编辑页
		goToUserEdit(id = 0) {
			uni.navigateTo({
				url: `/pages/lab/useredit?id=${id}`
			});
		},

		// 头像加载失败兜底
		handleImgError(e) {
			e.target.src = '/static/avatar-default.png';
		}
	}
};
</script>

<style scoped>
/* 完全复用框架样式，仅补充极少量必要样式 */
.rounded-lg {
	border-radius: 0.5rem;
}
.shadow-sm {
	box-shadow: 0 2px 4px var(--bg5);
}
.w12 {
	width: 3rem;
}
.h12 {
	height: 3rem;
}
.items-center {
	align-items: center;
}
.py05 {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}
.txt-xs {
	font-size: 0.7rem;
}
</style>