<template>
	<view class="container">	
		<!-- 表单卡片 -->
		<view class="form-card">
			<view class="form-content">
				<!-- 基本信息 -->
				<view class="form-section">
					
					<view class="form-group">
						<text class="form-label">客户名称 *</text>
						<input 
							type="text" 
							v-model="formData.khmc" 
							placeholder="请输入客户姓名" 
							class="input"
							@input="validateForm"
						/>
					</view>
					<view class="form-group">
						<text class="form-label">手机号 *</text>
						<input 
							type="tel" 
							v-model="formData.sjh" 
							placeholder="请输入手机号" 
							class="input"
							@input="validateForm"
						/>
					</view>	
					<view class="form-group">
						<text class="form-label">性别</text>
						<picker 
							:value="genderIndex" 
							:range="genderOptions" 
							@change="onGenderChange"
						>
							<view class="picker-view">{{ genderOptions[genderIndex] || '请选择性别' }}</view>
						</picker>
					</view>
					
					<view class="form-group">
						<text class="form-label">出生日期</text>
						<picker 
							mode="date" 
							:value="formData.yanglsr" 
							@change="onBirthDateChange"
						>
							<view class="picker-view">{{ formData.yanglsr || '请选择出生日期' }}</view>
						</picker>
					</view>
				</view>
				
				<!-- 归属信息 -->
				<view class="form-section">
					
					<view class="form-group">
						<text class="form-label">归属门店 *</text>
						<view class="custom-select" @click="handleSelectClick('gsmd')" @tap="handleSelectClick('gsmd')">
							<text class="select-text">{{ formData.gsmd?getgsmdname(formData.gsmd):'请选择归属门店' }}</text>
							<text class="select-arrow">▼</text>
						</view>
					</view>
					
					
					<view class="form-group">
						<text class="form-label">健康师</text>
						<view class="custom-select" @click="handleSelectClick('mainHealthUser')" @tap="handleSelectClick('mainHealthUser')">
							<text class="select-text">{{ formData.mainHealthUserName || '请选择健康师' }}</text>
							<text class="select-arrow">▼</text>
						</view>
					</view>
					
					<view class="form-group">
						<text class="form-label">负责顾问</text>
						<view class="custom-select" @click="handleSelectClick('subHealthUser')" @tap="handleSelectClick('subHealthUser')">
							<text class="select-text">{{ formData.subHealthUserName || '请选择负责顾问' }}</text>
							<text class="select-arrow">▼</text>
						</view>
					</view>
				</view>
				
				<!-- 其他信息 -->
				<view class="form-section">

					
					<view class="form-group">
						<text class="form-label">联系地址</text>
						<input 
							type="text" 
							v-model="formData.lxdz" 
							placeholder="请输入详细联系地址" 
							class="input"
						/>
					</view>
					
					<view class="form-group">
						<text class="form-label">备注</text>
						<textarea 
							v-model="formData.bz" 
							placeholder="请输入备注信息" 
							class="textarea"
							maxlength="500"
						></textarea>
					</view>
				</view>
				
				<view class="btn-group">
					<button 
						type="default" 
						size="normal"
						@click="resetForm"
						class="btn btn-secondary"
					>
						重置
					</button>
					<button 
						type="primary" 
						size="normal"
						:disabled="!isFormValid"
						@click="updateMember"
						class="btn btn-primary"
					>
						{{ isSubmitting ? '更新中...' : '确定更新' }}
					</button>
				</view>
			</view>
		</view>
		
		<!-- 选择弹窗 -->
		<SearchSelectModal
			:show="showModal"
			:title="modalTitle"
			:options="currentOptions"
			:loading="modalLoading"
			:has-more="hasMoreData"
			:search-param="searchParam"
			@confirm="handleModalConfirm"
			@close="closeModal"
			@load-more="handleLoadMore"
			@refresh="handleRefresh"
			@search="handleSearch"
		/>
		
	</view>
</template>

<script>
	import SearchSelectModal from '@/components/SearchSelectModal.vue'
	
	export default {
		components: {
			SearchSelectModal
		},
		data() {
			return {
				// 表单数据
				formData: {
					id: '',
					khmc: '',
					sjh: '',
					dah: '',
					xb: '',
					yanglsr: '',
					gsmd: '',
					gsmdName: '',
					khlx: '1',
					mainHealthUser: '',
					mainHealthUserName: '',
					subHealthUser: '',
					subHealthUserName: '',
					jdqd: '自然到店',
					tjr: '',
					referrerName: '',
					zcsj: '',
					lxdz: '',
					bz: ''
				},
				
				// 选项数据
				genderOptions: ['男', '女'],
				genderIndex: null,
				memberTypeOptions: ['老客', '新客'],
				memberTypeIndex: 0,
				memberSourceOptions: ['19.9卡', '自然到店', '嘉宾', '售后', '直播间', '转店顾客', '美团', '联联', '三方拓客', '其他', '补录'],
				memberSourceIndex: 1, // 默认选择"自然到店"
				
				// 门店和人员选项
				storeOptions: [],
				healthUserOptions: [],
				advisorOptions: [],
				
				// 推荐人相关
				showReferrerGroup: false,
				referrerOptions: [],
				
				// 弹窗相关
				showModal: false,
				modalTitle: '选择',
				currentSelectField: '',
				currentOptions: [],
				modalLoading: false,
				hasMoreData: true,
				currentPage: 1,
				pageSize: 20,
				searchKeyword: '',
				searchParam: '',
				
				// 表单验证
				isFormValid: false,
				isSubmitting: false,
				
				// 用户信息
				userInfo: null,
				
				// 会员ID
				memberId: null
			}
		},
		
		onLoad(options) {
			if (options.id) {
				this.memberId = options.id;
				this.initializePage();
			} else {
				uni.showToast({
					title: '缺少会员ID参数',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		
		methods: {
            getgsmdname(id){
                return this.storeOptions.find(item => item.value === id)?.label || '';
            },
			// 处理选择器点击
			handleSelectClick(fieldId) {
				this.openSelectModal(fieldId);
			},
			
			// 初始化页面
			async initializePage() {
				try {
					// 获取用户信息
					this.userInfo = uni.getStorageSync('userInfo');
					if (!this.userInfo) {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}, 1500);
						return;
					}
					
					// 加载会员详情
					await this.loadMemberDetail();
					
					// 加载选项数据
					await this.loadInitialOptionsData();
					
				} catch (error) {
					console.error('初始化失败:', error);
					uni.showToast({
						title: '页面初始化失败',
						icon: 'none'
					});
				}
			},
			
			// 加载会员详情
			async loadMemberDetail() {
				try {
					const response = await this.API.getMemberDetail(this.memberId);
					
					if (response.code === 200 && response.data) {
						const member = response.data;
						
						// 填充表单数据
						this.formData = {
							id: member.id,
							khmc: member.khmc || '',
							sjh: member.sjh || '',
							dah: member.dah || '',
							xb: member.xb || '',
							yanglsr: member.yanglsr ? this.formatDate(member.yanglsr) : '',
							gsmd: member.gsmd || '',
							gsmdName: member.gsmdName || '',
							khlx: member.khlx || '1',
							mainHealthUser: member.mainHealthUser || '',
							mainHealthUserName: member.mainHealthUserName || '',
							subHealthUser: member.subHealthUser || '',
							subHealthUserName: member.subHealthUserName || '',
							jdqd: member.jdqd || '自然到店',
							tjr: member.tjr || '',
							referrerName: member.referrerName || '',
							zcsj: member.zcsj ? this.formatDate(member.zcsj) : '',
							lxdz: member.lxdz || '',
							bz: member.bz || ''
						};
						
						// 设置选择器索引
						this.genderIndex = this.genderOptions.indexOf(member.xb);
						if (this.genderIndex === -1) this.genderIndex = null;
						
						this.memberTypeIndex = member.khlx === '1' ? 0 : 1;
						
						this.memberSourceIndex = this.memberSourceOptions.indexOf(member.jdqd);
						if (this.memberSourceIndex === -1) this.memberSourceIndex = 1;
						
						// 检查是否需要显示推荐人
						if (member.jdqd === '嘉宾') {
							this.showReferrerGroup = true;
						}
						
						this.validateForm();
					} else {
						uni.showToast({
							title: '获取会员信息失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取会员详情失败:', error);
					uni.showToast({
						title: '获取会员信息失败',
						icon: 'none'
					});
				}
			},
			
			// 加载选项数据
			async loadInitialOptionsData() {
				try {
					// 加载门店选项
					await this.loadStoreOptions();
					
					// 如果已选择门店，加载健康师和顾问选项
					if (this.formData.gsmd) {
						await this.loadHealthUserOptions();
						await this.loadAdvisorOptions();
					}
				} catch (error) {
					console.error('加载选项数据失败:', error);
				}
			},
			
			// 加载门店选项
			async loadStoreOptions() {
				try {
					const response = await this.API.getStoreList();
					if (response.code === 200 && response.data) {
						// 将当前门店作为选项
						this.storeOptions = response.data.map(item => ({
							value: item.id,
							label: item.fullName
						}));
					}
				} catch (error) {
					console.error('获取门店选项失败:', error);
				}
			},
			
			// 加载健康师选项
			async loadHealthUserOptions() {
				if (!this.formData.gsmd) return;
				
				try {
					const response = await this.API.getHealthUserList({
						mdid: this.formData.gsmd,
						gw: '健康师'
					});
					if (response.code === 200 && response.data && response.data.list ) {
						this.healthUserOptions = response.data.list.map(item => ({
							value: item.id,
							label: item.realName || item.name || item.userName
						}));
					}
				} catch (error) {
					console.error('获取健康师选项失败:', error);
				}
			},
			
			// 加载顾问选项
			async loadAdvisorOptions() {
				if (!this.formData.gsmd) return;
				
				try {
					const response = await this.API.getAdvisorList({
						mdid: this.formData.gsmd,
						gw: '健康师'
					});
					if (response.code === 200 && response.data && response.data.list) {
						this.advisorOptions = response.data.list.map(item => ({
							value: item.id,
							label: item.realName || item.name || item.userName
						}));
					}
				} catch (error) {
					console.error('获取顾问选项失败:', error);
				}
			},
			
			// 性别变化
			onGenderChange(e) {
				this.genderIndex = e.detail.value;
				this.formData.xb = this.genderOptions[this.genderIndex];
			},
			
			// 客户类型变化
			onMemberTypeChange(e) {
				this.memberTypeIndex = e.detail.value;
				this.formData.khlx = this.memberTypeIndex === 0 ? '1' : '2';
			},
			
			// 客户来源变化
			onMemberSourceChange(e) {
				this.memberSourceIndex = e.detail.value;
				this.formData.jdqd = this.memberSourceOptions[this.memberSourceIndex];
				
				if (this.formData.jdqd === '嘉宾') {
					this.showReferrerGroup = true;
				} else {
					this.showReferrerGroup = false;
					this.formData.tjr = '';
					this.formData.referrerName = '';
				}
				this.validateForm();
			},
			
			// 出生日期变化
			onBirthDateChange(e) {
				this.formData.yanglsr = e.detail.value;
			},
			
			// 注册时间变化
			onRegisterDateChange(e) {
				this.formData.zcsj = e.detail.value;
			},
			
			// 打开选择弹窗
			async openSelectModal(fieldId) {
				this.currentSelectField = fieldId;
				this.showModal = true;
				this.modalTitle = '加载中...';
				this.modalLoading = true;
				this.currentPage = 1;
				this.hasMoreData = true;
				this.searchKeyword = '';
				
				// 设置搜索参数
				switch(fieldId) {
					case 'gsmd':
						this.searchParam = 'name';
						this.modalTitle = '选择归属门店';
						this.currentOptions = this.storeOptions;
						this.modalLoading = false;
						break;
					case 'mainHealthUser':
						this.searchParam = 'name';
						this.modalTitle = '选择健康师';
						this.currentOptions = this.healthUserOptions;
						this.modalLoading = false;
						break;
					case 'subHealthUser':
						this.searchParam = 'name';
						this.modalTitle = '选择负责顾问';
						this.currentOptions = this.advisorOptions;
						this.modalLoading = false;
						break;
					case 'referrer':
						this.searchParam = 'khmc';
						this.modalTitle = '选择推荐人';
						break;
				}
				
				try {
					if (fieldId === 'referrer') {
						await this.loadOptionsData(fieldId, 1);
					}
				} catch (error) {
					console.error('获取选项数据失败:', error);
					this.modalTitle = '加载失败';
					this.currentOptions = [];
					uni.showToast({
						title: '数据加载失败，请检查网络连接',
						icon: 'none'
					});
				} finally {
					if (fieldId === 'referrer') {
						this.modalLoading = false;
					}
				}
			},
			
			// 关闭弹窗
			closeModal() {
				this.showModal = false;
				this.currentSelectField = '';
				this.currentOptions = [];
				this.modalLoading = false;
			},
			
			// 加载选项数据
			async loadOptionsData(fieldId, page = 1, searchKeyword = '') {
				let options = [];
				
				switch(fieldId) {
					case 'referrer':
						options = await this.getMemberOptions(page, searchKeyword);
						break;
				}
				
				if (page === 1) {
					this.currentOptions = options;
				} else {
					this.currentOptions = [...this.currentOptions, ...options];
				}
				
				// 检查是否还有更多数据
				if (options.length < this.pageSize) {
					this.hasMoreData = false;
				}
			},
			
			// 处理弹窗确认选择
			handleModalConfirm(selectedOption) {
				if (this.currentSelectField && selectedOption) {
					switch(this.currentSelectField) {
						case 'gsmd':
							this.formData.gsmd = selectedOption.value;
							this.formData.gsmdName = selectedOption.label;
							// 重新加载健康师和顾问选项
							this.loadHealthUserOptions();
							this.loadAdvisorOptions();
							break;
						case 'mainHealthUser':
							this.formData.mainHealthUser = selectedOption.value;
							this.formData.mainHealthUserName = selectedOption.label;
							break;
						case 'subHealthUser':
							this.formData.subHealthUser = selectedOption.value;
							this.formData.subHealthUserName = selectedOption.label;
							break;
						case 'referrer':
							this.formData.tjr = selectedOption.value;
							this.formData.referrerName = selectedOption.label;
							break;
					}
					this.validateForm();
				}
			},
			
			// 处理加载更多
			async handleLoadMore(page) {
				if (this.currentSelectField && this.hasMoreData && !this.modalLoading) {
					this.modalLoading = true;
					try {
						await this.loadOptionsData(this.currentSelectField, page, this.searchKeyword);
					} catch (error) {
						console.error('加载更多数据失败:', error);
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						});
					} finally {
						this.modalLoading = false;
					}
				}
			},
			
			// 处理刷新
			async handleRefresh() {
				if (this.currentSelectField) {
					this.currentPage = 1;
					this.hasMoreData = true;
					this.searchKeyword = '';
					await this.loadOptionsData(this.currentSelectField, 1);
				}
			},
			
			// 处理搜索
			async handleSearch(searchKeyword) {
				if (this.currentSelectField) {
					this.searchKeyword = searchKeyword;
					this.currentPage = 1;
					this.hasMoreData = true;
					this.modalLoading = true;
					
					try {
						await this.loadOptionsData(this.currentSelectField, 1, searchKeyword);
					} catch (error) {
						console.error('搜索失败:', error);
						uni.showToast({
							title: '搜索失败',
							icon: 'none'
						});
					} finally {
						this.modalLoading = false;
					}
				}
			},
			
			// 获取会员选项
			async getMemberOptions(page = 1, searchKeyword = '') {
				try {
					const params = {
						currentPage: page,
						pageSize: this.pageSize
					};
					
					// 如果有搜索关键词，添加搜索参数
					if (searchKeyword && this.searchParam === 'khmc') {
						params.keyword = searchKeyword;
					}
					
					const response = await this.API.getMemberList(params);
					
					if (response.code === 200 && response.data) {
						return response.data.list.map(item => ({
							value: item.id,
							label: item.khmc,
							subtitle:'客户类型：'+(item.khlxName||'无')+'；手机号：'+(item.sjh||'无')+'；健康师：' +(item.mrsName || '无')+'；门店：'+ (item.gsmdName || '无')+'；',
							sjh: item.sjh,
							khlx: item.khlx
						}));
					}
					return [];
				} catch (error) {
					console.error('获取会员选项失败:', error);
					return [];
				}
			},
			
			// 格式化日期
			formatDate(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			
			// 验证表单
			validateForm() {
				const { khmc, sjh, gsmd, jdqd, tjr } = this.formData;
				
				// 基本验证
				if (!khmc || !sjh || !gsmd) {
					this.isFormValid = false;
					return;
				}
				
				// 手机号格式验证
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!phoneRegex.test(sjh)) {
					this.isFormValid = false;
					return;
				}
				
				// 如果是嘉宾，必须选择推荐人
				if (jdqd === '嘉宾' && !tjr) {
					this.isFormValid = false;
					return;
				}
				
				this.isFormValid = true;
			},
			
			// 重置表单
			resetForm() {
				uni.showModal({
					title: '确认重置',
					content: '确定要重置表单吗？',
					success: (res) => {
						if (res.confirm) {
							this.loadMemberDetail();
							uni.showToast({
								title: '表单已重置',
								icon: 'success'
							});
						}
					}
				});
			},
			
			// 更新会员
			async updateMember() {
				const { khmc, sjh, gsmd, jdqd, tjr } = this.formData;
				
				// 验证必填字段
				if (!khmc) {
					uni.showToast({
						title: '请输入客户名称',
						icon: 'none'
					});
					return;
				}
				
				if (!sjh) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				
				// 验证手机号格式
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!phoneRegex.test(sjh)) {
					uni.showToast({
						title: '请输入正确的手机号格式',
						icon: 'none'
					});
					return;
				}
				
				if (!gsmd) {
					uni.showToast({
						title: '请选择归属门店',
						icon: 'none'
					});
					return;
				}
				
				// 如果是嘉宾，必须选择推荐人
				if (jdqd === '嘉宾' && !tjr) {
					uni.showToast({
						title: '选择嘉宾时必须选择推荐人',
						icon: 'none'
					});
					return;
				}
				
				// 构建提交数据
				const memberData = {
					...this.formData,
					yanglsr: this.formData.yanglsr ? new Date(this.formData.yanglsr).getTime() : null,
					zcsj: this.formData.zcsj ? new Date(this.formData.zcsj).getTime() : null
				};
				
				try {
					this.isSubmitting = true;
					
					const response = await this.API.updateMember(this.memberId, memberData);
					
					console.log(response);
					
					if (response.code === 200) {
						uni.showToast({
							title: '会员信息更新成功！',
							icon: 'success'
						});
						
						// 延迟返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: `更新失败：${response.msg || '未知错误'}`,
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('更新失败:', error);
					uni.showToast({
						title: '网络错误，请检查连接后重试',
						icon: 'none'
					});
				} finally {
					this.isSubmitting = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// height: 100vh;
		background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.form-card {
		background: #fff;
		border-radius: 36rpx;
		box-shadow: 0 8rpx 48rpx 0 rgba(76, 175, 80, 0.10);
		border: 3rpx solid #c8e6c9;
		overflow: hidden;
	}
	
	.form-content {
		padding: 48rpx;
	}
	
	.form-section {
		margin-bottom: 48rpx;
	}
	
	.form-section:last-child {
		margin-bottom: 0;
	}
	
	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
		padding: 16rpx 24rpx;
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		border-radius: 20rpx;
		color: #fff;
		font-weight: bold;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		box-shadow: 0 4rpx 16rpx rgba(67, 233, 123, 0.3);
	}
	
	.title-icon {
		margin-right: 16rpx;
		font-size: 32rpx;
	}
	
	.title-text {
		flex: 1;
	}
	
	.form-group {
		margin-bottom: 40rpx;
	}
	
	.form-group:last-child {
		margin-bottom: 0;
	}
	
	.form-label {
		display: block;
		margin-bottom: 16rpx;
		font-weight: bold;
		color: #388e3c;
		letter-spacing: 2rpx;
		font-size: 28rpx;
	}
	
	.input {
		width: 100%;
		padding: 24rpx;
		border: 3rpx solid #c8e6c9;
		border-radius: 20rpx;
		font-size: 28rpx;
		background: #f9fff9;
		color: #2e7d32;
		box-sizing: border-box;
		min-height: 80rpx;
		display: flex;
		align-items: center;
	}
	
	.input:focus {
		border-color: #43a047;
		background: #fff;
	}
	
	.input::placeholder {
		color: #81c784;
	}
	
	.textarea {
		width: 100%;
		padding: 24rpx;
		border: 3rpx solid #c8e6c9;
		border-radius: 20rpx;
		font-size: 28rpx;
		background: #f9fff9;
		color: #2e7d32;
		box-sizing: border-box;
		min-height: 120rpx;
		resize: none;
	}
	
	.textarea:focus {
		border-color: #43a047;
		background: #fff;
	}
	
	.textarea::placeholder {
		color: #81c784;
	}
	
	.custom-select {
		position: relative;
		background: #f9fff9;
		border: 3rpx solid #c8e6c9;
		border-radius: 20rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		z-index: 10;
		min-height: 80rpx;
		box-sizing: border-box;
	}
	
	.select-text {
		font-size: 28rpx;
		color: #2e7d32;
		flex: 1;
	}
	
	.select-arrow {
		position: absolute;
		right: 24rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #6a9c6a;
		font-size: 24rpx;
		pointer-events: none;
	}
	
	.picker-view {
		width: 100%;
		padding: 24rpx;
		border: 3rpx solid #c8e6c9;
		border-radius: 20rpx;
		font-size: 28rpx;
		background: #f9fff9;
		color: #2e7d32;
		box-sizing: border-box;
	}
	
	.btn-group {
		display: flex;
		gap: 24rpx;
		margin-top: 48rpx;
	}
	
	.btn {
		flex: 1;
		border-radius: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
	}
	
	.btn-primary {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		color: #fff;
		box-shadow: 0 4rpx 16rpx rgba(67, 233, 123, 0.3);
	}
	
	.btn-primary:disabled {
		background: #e0e0e0;
		color: #999;
		box-shadow: none;
	}
	
	.btn-secondary {
		background: #f5f5f5;
		color: #666;
		border: 3rpx solid #ddd;
	}
	
	// @media (max-width: 750rpx) {
	// 	.form-content { 
	// 		padding: 40rpx; 
	// 	}
	// 	.btn-group { 
	// 		flex-direction: column; 
	// 	}
	// }
</style>
