<template>
	<view class="ciy-page">
		<!-- 顶部导航栏：复用框架标题样式 -->
		<view class="ciy-title mk rel bg3">
			<text class="abs l1 t0 txt9 tran5" @tap="goBack">← 返回</text>
			<view class="title txt9">{{isEdit ? '编辑成员' : '新增成员'}}</view>
			<view class="right">
				<text class="btn man sm cc px3" @tap="submitForm">{{isEdit ? '保存' : '提交'}}</text>
			</view>
		</view>

		<!-- 主体内容区：滚动表单 -->
		<view class="main overflow-auto">
			<!-- 表单容器：复用框架卡片/间距样式 -->
			<view class="ciy-card my3 mx4">
				<!-- 基础信息标题：复用框架标题样式 -->
				<view class="title mk">基础信息</view>
				<view class="content">
					<!-- 姓名输入项：复用框架表单样式 -->
					<view class="ciy-form char4 mb3">
						<label class="imp txt7">姓名：</label>
						<view>
							<input 
								class="ciy-edit txt7 bg4 py2 px3 rounded-md w-full" 
								v-model="formData.name" 
								placeholder="请输入姓名"
							/>
						</view>
					</view>

					<!-- 手机号输入项：复用框架表单样式 -->
					<view class="ciy-form char4 mb3">
						<label class="imp txt7">手机号：</label>
						<view>
							<input 
								class="ciy-edit txt7 bg4 py2 px3 rounded-md w-full" 
								v-model="formData.mobile" 
								type="number"
								placeholder="请输入手机号"
								:disabled="isEdit"
							/>
						</view>
					</view>

					<!-- 头衔选择项：复用框架表单样式 -->
					<view class="ciy-form char4 mb3">
						<label class="imp txt7">头衔：</label>
						<view>
							<picker 
								class="bg4 py2 px3 rounded-md w-full txt7" 
								:range="titleList" 
								range-key="name"
								:value="titleIndex"
								@change="handleTitleChange"
							>
								<view class="flex justify-between items-center">
									<text>{{titleIndex >= 0 ? titleList[titleIndex].name : '请选择头衔'}}</text>
									<text class="txt3">▼</text>
								</view>
							</picker>
						</view>
					</view>

					<!-- 状态选择项：复用框架表单样式 -->
					<view class="ciy-form char4 mb3">
						<label class="imp txt7">状态：</label>
						<view>
							<picker 
								class="bg4 py2 px3 rounded-md w-full txt7" 
								:range="statusList" 
								range-key="name"
								:value="statusIndex"
								@change="handleStatusChange"
							>
								<view class="flex justify-between items-center">
									<text>{{statusIndex >= 0 ? statusList[statusIndex].name : '请选择状态'}}</text>
									<text class="txt3">▼</text>
								</view>
							</picker>
						</view>
					</view>

					<!-- 性别选择项：复用框架表单样式 -->
					<view class="ciy-form char4 mb3">
						<label class="txt7">性别：</label>
						<view>
							<picker 
								class="bg4 py2 px3 rounded-md w-full txt7" 
								:range="sexList" 
								range-key="name"
								:value="sexIndex"
								@change="handleSexChange"
							>
								<view class="flex justify-between items-center">
									<text>{{sexIndex >= 0 ? sexList[sexIndex].name : '请选择性别'}}</text>
									<text class="txt3">▼</text>
								</view>
							</picker>
						</view>
					</view>

					<!-- 邮箱输入项：复用框架表单样式 -->
					<view class="ciy-form char4 mb3">
						<label class="txt7">邮箱：</label>
						<view>
							<input 
								class="ciy-edit txt7 bg4 py2 px3 rounded-md w-full" 
								v-model="formData.email" 
								type="email"
								placeholder="请输入邮箱"
							/>
						</view>
					</view>
				</view>
			</view>

			<!-- 密码设置：仅新增显示，复用框架卡片样式 -->
			<view v-if="!isEdit" class="ciy-card my3 mx4">
				<view class="title mk">密码设置</view>
				<view class="content">
					<!-- 初始密码 -->
					<view class="ciy-form char4 mb3">
						<label class="imp txt7">初始密码：</label>
						<view>
							<input 
								class="ciy-edit txt7 bg4 py2 px3 rounded-md w-full" 
								v-model="formData.pass" 
								type="password"
								placeholder="请设置初始密码（不少于6位）"
							/>
						</view>
					</view>

					<!-- 确认密码 -->
					<view class="ciy-form char4 mb3">
						<label class="imp txt7">确认密码：</label>
						<view>
							<input 
								class="ciy-edit txt7 bg4 py2 px3 rounded-md w-full" 
								v-model="formData.pass2" 
								type="password"
								placeholder="请再次输入密码"
							/>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部固定区 -->
		<view class="ciy-bottom"></view>
	</view>
</template>

<script>
// 优先使用相对路径引入md5
import md5 from '../../util/md5.js';

export default {
	data() {
		return {
			isEdit: false, // 是否编辑模式
			formData: {
				id: 0,
				name: '',
				mobile: '',
				usertitle: 1, // 默认负责人
				status: 1, // 默认在册
				sex: 0, // 默认未知
				email: '',
				pass: '',
				pass2: ''
			},
			// 头衔列表
			titleList: [
				{id: 1, name: '负责人'},
				{id: 2, name: '科研秘书'},
				{id: 3, name: '在册成员'},
				{id: 4, name: '历史成员'},
				{id: 5, name: '外部成员'}
			],
			titleIndex: 0, // 默认选中第一个
			// 状态列表
			statusList: [
				{id: 1, name: '在册'},
				{id: 2, name: '历史'}
			],
			statusIndex: 0, // 默认选中第一个
			// 性别列表
			sexList: [
				{id: 0, name: '未知'},
				{id: 1, name: '男'},
				{id: 2, name: '女'}
			],
			sexIndex: 0, // 默认选中第一个
			submitting: false // 提交状态
		};
	},
	onLoad(options) {
		if (options.id && options.id > 0) {
			this.isEdit = true;
			this.formData.id = parseInt(options.id);
			this.getMemberDetail();
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},

		// 获取成员详情（编辑时）
		async getMemberDetail() {
			try {
				const [err, res] = await uni.request({
					url: '/ambap/member.php?act=member.detail',
					method: 'POST',
					data: { id: this.formData.id }
				});
				
				if (err) throw new Error('加载详情失败');
				const result = res.data || {};
				
				if (result.code === 1) {
					const data = result.data;
					this.formData = { ...this.formData, ...data };
					// 兼容找不到匹配项的情况
					this.titleIndex = this.titleList.findIndex(item => item.id === data.usertitle) || 0;
					this.statusIndex = this.statusList.findIndex(item => item.id === data.status) || 0;
					this.sexIndex = this.sexList.findIndex(item => item.id === data.sex) || 0;
				} else {
					uni.showToast({ title: result.errmsg || '成员不存在', icon: 'none' });
					this.goBack();
				}
			} catch (err) {
				uni.showToast({ title: '加载详情失败', icon: 'none' });
				console.error('获取详情失败：', err);
				this.goBack();
			}
		},

		// 头衔选择
		handleTitleChange(e) {
			this.titleIndex = e.detail.value;
			this.formData.usertitle = this.titleList[this.titleIndex].id;
		},

		// 状态选择
		handleStatusChange(e) {
			this.statusIndex = e.detail.value;
			this.formData.status = this.statusList[this.statusIndex].id;
		},

		// 性别选择
		handleSexChange(e) {
			this.sexIndex = e.detail.value;
			this.formData.sex = this.sexList[this.sexIndex].id;
		},

		// 表单验证
		validateForm() {
			// 姓名验证
			if (!this.formData.name.trim()) {
				uni.showToast({ title: '请输入姓名', icon: 'none' });
				return false;
			}
			// 手机号验证
			const mobileReg = /^1[3-9]\d{9}$/;
			if (!this.formData.mobile) {
				uni.showToast({ title: '请输入手机号', icon: 'none' });
				return false;
			}
			if (!mobileReg.test(this.formData.mobile)) {
				uni.showToast({ title: '手机号格式错误', icon: 'none' });
				return false;
			}
			// 头衔验证
			if (this.titleIndex === -1) {
				uni.showToast({ title: '请选择头衔', icon: 'none' });
				return false;
			}
			// 状态验证
			if (this.statusIndex === -1) {
				uni.showToast({ title: '请选择状态', icon: 'none' });
				return false;
			}
			// 新增时验证密码
			if (!this.isEdit) {
				if (!this.formData.pass) {
					uni.showToast({ title: '请设置初始密码', icon: 'none' });
					return false;
				}
				if (this.formData.pass.length < 6) {
					uni.showToast({ title: '密码不少于6位', icon: 'none' });
					return false;
				}
				if (this.formData.pass !== this.formData.pass2) {
					uni.showToast({ title: '两次密码不一致', icon: 'none' });
					return false;
				}
			}
			return true;
		},

		// 提交表单
		async submitForm() {
			if (this.submitting) return;
			if (!this.validateForm()) return;

			this.submitting = true;
			try {
				// 构造提交数据
				const submitData = { ...this.formData };
				// 新增时加密密码（兼容md5不同导出格式）
				if (!this.isEdit) {
					const tokenSalt = getApp()?.globalData?.tokensalt || 'default_salt';
					submitData.password = typeof md5 === 'function' 
						? md5(submitData.pass + tokenSalt) 
						: md5.md5(submitData.pass + tokenSalt);
					delete submitData.pass;
					delete submitData.pass2;
				}

				// 调用后端接口
				const [err, res] = await uni.request({
					url: this.isEdit ? '/ambap/member.php?act=member.edit' : '/ambap/member.php?act=member.add',
					method: 'POST',
					data: submitData
				});
				
				if (err) throw new Error('提交失败，请检查网络');
				const result = res.data || {};
				
				if (result.code === 1) {
					uni.showToast({ title: this.isEdit ? '修改成功' : '新增成功', icon: 'success' });
					// 返回列表页并刷新
					setTimeout(() => {
						uni.navigateBack({
							success: () => {
								const pages = getCurrentPages();
								const listPage = pages[pages.length - 2];
								if (listPage && typeof listPage.refreshList === 'function') {
									listPage.refreshList();
								}
							}
						});
					}, 1000);
				} else {
					uni.showToast({ title: result.errmsg || '操作失败', icon: 'none' });
				}
			} catch (err) {
				uni.showToast({ title: err.message || '提交失败', icon: 'none' });
				console.error('提交表单失败：', err);
			} finally {
				this.submitting = false;
			}
		}
	}
};
</script>

<style scoped>
/* 仅补充框架未覆盖的极少量通用样式 */
.rounded-md {
	border-radius: 0.3rem;
}
.w-full {
	width: 100%;
}
.justify-between {
	justify-content: space-between;
}
.items-center {
	align-items: center;
}
.overflow-auto {
	overflow: auto;
}
.mb3 {
	margin-bottom: 0.75rem;
}
</style>