<template>
	<view class="edit-container">
	

		<!-- 加载状态 -->
		<view v-if="loading" class="loading-state">
			<text>加载中...</text>
		</view>

		<!-- 编辑表单 -->
		<view v-else class="form-wrapper">
			<!-- 患者基本信息 -->
			<view class="form-section">
				<text class="section-title">患者基本信息</text>
				
				<view class="form-group">
					<text class="form-label">患者姓名</text>
					<input 
						v-model="formData.patient_name" 
						class="form-input"
						placeholder="请输入患者姓名"
						maxlength="50"
					/>
				</view>

				<view class="form-group">
					<text class="form-label">性别</text>
					<view class="gender-group">
						<view 
							class="gender-btn"
							:class="{ active: formData.gender === 1 }"
							@click="formData.gender = 1"
						>
							男
						</view>
						<view 
							class="gender-btn"
							:class="{ active: formData.gender === 0 }"
							@click="formData.gender = 0"
						>
							女
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">年龄</text>
					<input 
						v-model.number="formData.age" 
						class="form-input"
						type="number"
						placeholder="请输入年龄"
						min="0"
						max="150"
					/>
				</view>

				<!-- <view class="form-group">
					<text class="form-label">诊断日期</text>
					<view class="date-input" @click="showDatePicker = true">
						<text>{{ formData.diagnosis_date || '请选择日期' }}</text>
						<text class="date-icon">📅</text>
					</view>
				</view> -->
			</view>

			<!-- 诊断信息 -->
			<!-- <view class="form-section">
				<text class="section-title">诊断信息</text>
				
				<view class="form-group">
					<text class="form-label">诊断类型</text>
					<picker 
						:range="diagnosisTypeOptions" 
						range-key="name"
						@change="onDiagnosisTypeChange"
					>
						<view class="picker-input">
							<text>{{ getDiagnosisTypeName(formData.diagnosis_type) || '请选择' }}</text>
							<text class="picker-icon">▼</text>
						</view>
					</picker>
				</view>

				<view class="form-group">
					<text class="form-label">证型</text>
					<picker 
						:range="syndromeTypeOptions" 
						range-key="name"
						@change="onSyndromeTypeChange"
					>
						<view class="picker-input">
							<text>{{ getSyndromeTypeName(formData.syndrome_type) || '请选择' }}</text>
							<text class="picker-icon">▼</text>
						</view>
					</picker>
				</view>

				<view class="form-group">
					<text class="form-label">糖尿病期数</text>
					<picker 
						:range="diabetesTypeOptions" 
						range-key="name"
						@change="onDiabetesTypeChange"
					>
						<view class="picker-input">
							<text>{{ getDiabetesTypeName(formData.diabetes_type) || '请选择' }}</text>
							<text class="picker-icon">▼</text>
						</view>
					</picker>
				</view>
			</view> -->

			<!-- 现病史 -->
			<view class="form-section">
				<text class="section-title">现病史</text>
				
				<view class="form-group">
					<text class="form-label">口腔感觉</text>
					<view class="checkbox-group">
						<view 
							v-for="item in appetiteOptions"
							:key="item.value"
							class="checkbox-item"
							:class="{ active: formData.appetite === item.value }"
							@click="formData.appetite = item.value"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">每日饮水量</text>
					<view class="checkbox-group">
						<view 
							v-for="item in waterIntakeOptions"
							:key="item.value"
							class="checkbox-item"
							:class="{ active: formData.water_intake === item.value }"
							@click="formData.water_intake = item.value"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">体重变化</text>
					<view class="checkbox-group">
						<view 
							v-for="item in weightChangeOptions"
							:key="item.value"
							class="checkbox-item"
							:class="{ active: formData.weight_change === item.value }"
							@click="formData.weight_change = item.value"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">脂肪肝程度</text>
					<view class="checkbox-group">
						<view 
							v-for="item in fattyLiverDegreeOptions"
							:key="item.value"
							class="checkbox-item"
							:class="{ active: formData.fatty_liver_degree === item.value }"
							@click="formData.fatty_liver_degree = item.value"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">饮食情况</text>
					<view class="multi-checkbox-group">
						<view 
							v-for="item in dietConditionOptions"
							:key="item.value"
							class="multi-checkbox-item"
							:class="{ active: formData.diet_condition.includes(item.value) }"
							@click="toggleMultiCheckbox('diet_condition', item.value)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">肢体感觉</text>
					<view class="multi-checkbox-group">
						<view 
							v-for="item in bodyFeelingOptions"
							:key="item.value"
							class="multi-checkbox-item"
							:class="{ active: formData.body_feeling.includes(item.value) }"
							@click="toggleMultiCheckbox('body_feeling', item.value)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">睡眠情况</text>
					<view class="multi-checkbox-group">
						<view 
							v-for="item in sleepConditionOptions"
							:key="item.value"
							class="multi-checkbox-item"
							:class="{ active: formData.sleep_condition.includes(item.value) }"
							@click="toggleMultiCheckbox('sleep_condition', item.value)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">眼睛情况</text>
					<view class="multi-checkbox-group">
						<view 
							v-for="item in eyeConditionOptions"
							:key="item.value"
							class="multi-checkbox-item"
							:class="{ active: formData.eye_condition.includes(item.value) }"
							@click="toggleMultiCheckbox('eye_condition', item.value)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">头部感觉</text>
					<view class="multi-checkbox-group">
						<view 
							v-for="item in headFeelingOptions"
							:key="item.value"
							class="multi-checkbox-item"
							:class="{ active: formData.head_feeling.includes(item.value) }"
							@click="toggleMultiCheckbox('head_feeling', item.value)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">出汗情况</text>
					<view class="multi-checkbox-group">
						<view 
							v-for="item in sweatConditionOptions"
							:key="item.value"
							class="multi-checkbox-item"
							:class="{ active: formData.sweat_condition.includes(item.value) }"
							@click="toggleMultiCheckbox('sweat_condition', item.value)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">皮肤情况</text>
					<view class="multi-checkbox-group">
						<view 
							v-for="item in skinConditionOptions"
							:key="item.value"
							class="multi-checkbox-item"
							:class="{ active: formData.skin_condition.includes(item.value) }"
							@click="toggleMultiCheckbox('skin_condition', item.value)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">小便情况</text>
					<view class="multi-checkbox-group">
						<view 
							v-for="item in urineConditionOptions"
							:key="item.value"
							class="multi-checkbox-item"
							:class="{ active: formData.urine_condition.includes(item.value) }"
							@click="toggleMultiCheckbox('urine_condition', item.value)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">大便情况</text>
					<view class="multi-checkbox-group">
						<view 
							v-for="item in stoolConditionOptions"
							:key="item.value"
							class="multi-checkbox-item"
							:class="{ active: formData.stool_condition.includes(item.value) }"
							@click="toggleMultiCheckbox('stool_condition', item.value)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">腰肾情况</text>
					<view class="multi-checkbox-group">
						<view 
							v-for="item in kidneyConditionOptions"
							:key="item.value"
							class="multi-checkbox-item"
							:class="{ active: formData.kidney_condition.includes(item.value) }"
							@click="toggleMultiCheckbox('kidney_condition', item.value)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>

			<!-- 既往史 -->
			<view class="form-section">
				<text class="section-title">既往史</text>
				
				<view class="form-group">
					<text class="form-label">既往史</text>
					<view class="multi-checkbox-group">
						<view 
							v-for="item in pastHistoryOptions"
							:key="item.value"
							class="multi-checkbox-item"
							:class="{ active: formData.past_history.includes(item.value) }"
							@click="toggleMultiCheckbox('past_history', item.value)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">外伤史</text>
					<view class="radio-group">
						<view 
							class="radio-item"
							:class="{ active: formData.trauma_history === 1 }"
							@click="formData.trauma_history = 1"
						>
							有
						</view>
						<view 
							class="radio-item"
							:class="{ active: formData.trauma_history === 0 }"
							@click="formData.trauma_history = 0"
						>
							无
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">手术史</text>
					<view class="radio-group">
						<view 
							class="radio-item"
							:class="{ active: formData.surgery_history === 1 }"
							@click="formData.surgery_history = 1"
						>
							有
						</view>
						<view 
							class="radio-item"
							:class="{ active: formData.surgery_history === 0 }"
							@click="formData.surgery_history = 0"
						>
							无
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">过敏史</text>
					<view class="radio-group">
						<view 
							class="radio-item"
							:class="{ active: formData.allergy_history === 1 }"
							@click="formData.allergy_history = 1"
						>
							有
						</view>
						<view 
							class="radio-item"
							:class="{ active: formData.allergy_history === 0 }"
							@click="formData.allergy_history = 0"
						>
							无
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">家族病史</text>
					<view class="radio-group">
						<view 
							class="radio-item"
							:class="{ active: formData.family_history === 1 }"
							@click="formData.family_history = 1"
						>
							有
						</view>
						<view 
							class="radio-item"
							:class="{ active: formData.family_history === 0 }"
							@click="formData.family_history = 0"
						>
							无
						</view>
					</view>
				</view>

				<view class="form-group">
					<text class="form-label">妊娠哺乳史</text>
					<view class="radio-group">
						<view 
							class="radio-item"
							:class="{ active: formData.pregnancy_history === 1 }"
							@click="formData.pregnancy_history = 1"
						>
							有
						</view>
						<view 
							class="radio-item"
							:class="{ active: formData.pregnancy_history === 0 }"
							@click="formData.pregnancy_history = 0"
						>
							无
						</view>
					</view>
				</view>
			</view>

			<!-- 临床信息 -->
			<view class="form-section">
				<text class="section-title">临床信息</text>
				
				<view class="form-group">
					<text class="form-label">症状</text>
					<textarea 
						v-model="formData.symptoms" 
						class="form-textarea"
						placeholder="请输入症状描述"
						maxlength="1500"
					/>
				</view>

				<view class="form-group">
					<text class="form-label">舌苔</text>
					<textarea  
						v-model="formData.tongue_coating" 
						class="form-textarea"
						placeholder="请输入舌苔描述"
						maxlength="1500"
					/>
				</view>

				<view class="form-group">
					<text class="form-label">脉象</text>
					<textarea  
						v-model="formData.pulse" 
						class="form-textarea"
						placeholder="请输入脉象描述"
						maxlength="1500"
					/>
				</view>
			</view>

			<!-- 治疗信息 -->
			<!-- <view class="form-section">
				<text class="section-title">治疗信息</text>
				
				<view class="form-group">
					<text class="form-label">治则</text>
					<input 
						v-model="formData.treatment_principle" 
						class="form-input"
						placeholder="请输入治则"
						maxlength="100"
					/>
				</view>

				<view class="form-group">
					<text class="form-label">处方</text>
					<textarea 
						v-model="formData.prescription" 
						class="form-textarea"
						placeholder="请输入处方"
						maxlength="500"
					/>
				</view>

				<view class="form-group">
					<text class="form-label">医嘱</text>
					<textarea 
						v-model="formData.doctor_advice" 
						class="form-textarea"
						placeholder="请输入医嘱"
						maxlength="500"
					/>
				</view>
			</view> -->

			<!-- 备注 -->
			<view class="form-section">
				<view class="form-group">
					<text class="form-label">备注</text>
					<textarea 
						v-model="formData.remark" 
						class="form-textarea"
						placeholder="请输入备注"
						maxlength="500"
					/>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="button-group">
				<button class="btn btn-cancel" @click="goBack">取消</button>
				<button class="btn btn-submit" @click="submitForm" :disabled="submitting">
					{{ submitting ? '保存中...' : '保存修改' }}
				</button>
			</view>
		</view>

		<!-- 日期选择器 -->
		<view v-if="showDatePicker" class="date-picker-overlay">
			<view class="date-picker-container">
				<view class="date-picker-header">
					<text class="date-btn-cancel" @click="showDatePicker = false">取消</text>
					<text class="date-btn-confirm" @click="confirmDate">确定</text>
				</view>
				<picker-view 
					:value="datePickerValue"
					@change="onDateChange"
					class="date-picker-view"
				>
					<picker-view-column>
						<view v-for="year in yearRange" :key="year" class="picker-item">{{ year }}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="month in monthRange" :key="month" class="picker-item">{{ String(month).padStart(2, '0') }}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="day in dayRange" :key="day" class="picker-item">{{ String(day).padStart(2, '0') }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

// 数据
const loading = ref(false)
const submitting = ref(false)
const showDatePicker = ref(false)
const diagnosisId = ref(null)
const patientId = ref(null)

// 表单数据
const formData = ref({
	patient_name: '',
	gender: 1,
	age: '',
	diagnosis_date: '',
	diagnosis_type: '',
	syndrome_type: '',
	diabetes_type: '',
	// 现病史
	appetite: '',
	water_intake: '',
	diet_condition: [],
	weight_change: '',
	body_feeling: [],
	sleep_condition: [],
	eye_condition: [],
	head_feeling: [],
	sweat_condition: [],
	skin_condition: [],
	urine_condition: [],
	stool_condition: [],
	kidney_condition: [],
	fatty_liver_degree: '',
	// 既往史
	past_history: [],
	trauma_history: 0,
	surgery_history: 0,
	allergy_history: 0,
	family_history: 0,
	pregnancy_history: 0,
	// 临床信息
	symptoms: '',
	tongue_coating: '',
	pulse: '',
	treatment_principle: '',
	prescription: '',
	doctor_advice: '',
	remark: ''
})

// 字典选项
const diagnosisTypeOptions = ref([])
const syndromeTypeOptions = ref([])
const diabetesTypeOptions = ref([])
const pastHistoryOptions = ref([])
// 现病史选项
const appetiteOptions = ref([])
const waterIntakeOptions = ref([])
const dietConditionOptions = ref([])
const weightChangeOptions = ref([])
const bodyFeelingOptions = ref([])
const sleepConditionOptions = ref([])
const eyeConditionOptions = ref([])
const headFeelingOptions = ref([])
const sweatConditionOptions = ref([])
const skinConditionOptions = ref([])
const urineConditionOptions = ref([])
const stoolConditionOptions = ref([])
const kidneyConditionOptions = ref([])
const fattyLiverDegreeOptions = ref([])

// 日期选择器
const datePickerValue = ref([0, 0, 0])
const yearRange = ref([])
const monthRange = ref(Array.from({ length: 12 }, (_, i) => i + 1))
const dayRange = ref(Array.from({ length: 31 }, (_, i) => i + 1))

// 页面加载
onMounted(() => {
	loadDictOptions()
	loadCardDetail()
	initDatePicker()
})

// 获取字典选项
const loadDictOptions = async () => {
	try {
		const dictTypes = [
			'diagnosis_type',
			'syndrome_type',
			'diabetes_type',
			'past_history',
			'appetite',
			'water_intake',
			'diet_condition',
			'weight_change',
			'body_feeling',
			'sleep_condition',
			'eye_condition',
			'head_feeling',
			'sweat_condition',
			'skin_condition',
			'urine_condition',
			'stool_condition',
			'kidney_condition',
			'fatty_liver_degree'
		]

		// 并行请求所有字典数据
		const results = await Promise.all(
			dictTypes.map(type =>
				proxy.apiUrl({
					url: '/api/tcm/getDict',
					method: 'GET',
					data: { type }
				})
			)
		)

		// 处理返回的数据
		results.forEach((res, index) => {
			const type = dictTypes[index]
			if (res.code === 1 && res.data) {
				const data = res.data[type] || []
				// 转换数据格式
				const options = Array.isArray(data) ? data : Object.entries(data).map(([key, value]) => ({
					value: key,
					name: value
				}))

				// 根据类型赋值
				switch (type) {
					case 'diagnosis_type':
						diagnosisTypeOptions.value = options
						break
					case 'syndrome_type':
						syndromeTypeOptions.value = options
						break
					case 'diabetes_type':
						diabetesTypeOptions.value = options
						break
					case 'past_history':
						pastHistoryOptions.value = options
						break
					case 'appetite':
						appetiteOptions.value = options
						break
					case 'water_intake':
						waterIntakeOptions.value = options
						break
					case 'diet_condition':
						dietConditionOptions.value = options
						break
					case 'weight_change':
						weightChangeOptions.value = options
						break
					case 'body_feeling':
						bodyFeelingOptions.value = options
						break
					case 'sleep_condition':
						sleepConditionOptions.value = options
						break
					case 'eye_condition':
						eyeConditionOptions.value = options
						break
					case 'head_feeling':
						headFeelingOptions.value = options
						break
					case 'sweat_condition':
						sweatConditionOptions.value = options
						break
					case 'skin_condition':
						skinConditionOptions.value = options
						break
					case 'urine_condition':
						urineConditionOptions.value = options
						break
					case 'stool_condition':
						stoolConditionOptions.value = options
						break
					case 'kidney_condition':
						kidneyConditionOptions.value = options
						break
					case 'fatty_liver_degree':
						fattyLiverDegreeOptions.value = options
						break
				}
			}
		})
	} catch (err) {
		console.error('加载字典数据失败:', err)
	}
}

// 初始化日期选择器
const initDatePicker = () => {
	const currentYear = new Date().getFullYear()
	yearRange.value = Array.from({ length: 100 }, (_, i) => currentYear - 50 + i)
}

// 加载就诊卡详情
const loadCardDetail = async () => {
	loading.value = true
	try {
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		diagnosisId.value = currentPage.options.id

		if (!diagnosisId.value) {
			uni.showToast({ title: '诊单ID不存在', icon: 'none' })
			setTimeout(() => uni.navigateBack(), 1500)
			return
		}

		const userData = uni.getStorageSync('userData')
		patientId.value = userData?.diagnosis?.patient_id

		if (!patientId.value) {
			uni.showToast({ title: '请先登录', icon: 'none' })
			setTimeout(() => uni.redirectTo({ url: '/pages/login/login' }), 1500)
			return
		}

		const res = await proxy.apiUrl({
			url: '/api/tcm/diagnosisDetail',
			method: 'GET',
			data: {
				id: diagnosisId.value,
				user_id: patientId.value
			}
		})

		if (res.code === 1) {
			const diagnosis = res.data

			if (diagnosis.patient_id !== patientId.value) {
				uni.showToast({ title: '无权限编辑此诊单', icon: 'none' })
				setTimeout(() => uni.navigateBack(), 1500)
				return
			}

			// 处理数组字段
			const arrayFields = ['diet_condition', 'body_feeling', 'sleep_condition', 'eye_condition', 'head_feeling', 'sweat_condition', 'skin_condition', 'urine_condition', 'stool_condition', 'kidney_condition', 'past_history']
			arrayFields.forEach(field => {
				if (typeof diagnosis[field] === 'string' && diagnosis[field]) {
					diagnosis[field] = diagnosis[field].split(',')
				} else if (!diagnosis[field]) {
					diagnosis[field] = []
				}
			})

			formData.value = diagnosis
		} else {
			uni.showToast({ title: res.msg || '获取失败', icon: 'none' })
			setTimeout(() => uni.navigateBack(), 1500)
		}
	} catch (err) {
		console.error('加载诊单详情失败:', err)
		uni.showToast({ title: '加载失败', icon: 'none' })
		setTimeout(() => uni.navigateBack(), 1500)
	} finally {
		loading.value = false
	}
}

// 多选框切换
const toggleMultiCheckbox = (field, value) => {
	const index = formData.value[field].indexOf(value)
	if (index > -1) {
		formData.value[field].splice(index, 1)
	} else {
		formData.value[field].push(value)
	}
}

const onDiagnosisTypeChange = (e) => {
	formData.value.diagnosis_type = diagnosisTypeOptions.value[e.detail.value].value
}

const onSyndromeTypeChange = (e) => {
	formData.value.syndrome_type = syndromeTypeOptions.value[e.detail.value].value
}

const onDiabetesTypeChange = (e) => {
	formData.value.diabetes_type = diabetesTypeOptions.value[e.detail.value].value
}

const getDiagnosisTypeName = (type) => {
	const item = diagnosisTypeOptions.value.find(i => i.value === type)
	return item ? item.name : ''
}

const getSyndromeTypeName = (type) => {
	const item = syndromeTypeOptions.value.find(i => i.value === type)
	return item ? item.name : ''
}

const getDiabetesTypeName = (type) => {
	const item = diabetesTypeOptions.value.find(i => i.value === type)
	return item ? item.name : ''
}

const onDateChange = (e) => {
	datePickerValue.value = e.detail.value
}

const confirmDate = () => {
	const year = yearRange.value[datePickerValue.value[0]]
	const month = String(monthRange.value[datePickerValue.value[1]]).padStart(2, '0')
	const day = String(dayRange.value[datePickerValue.value[2]]).padStart(2, '0')
	formData.value.diagnosis_date = `${year}-${month}-${day}`
	showDatePicker.value = false
}

const submitForm = async () => {
	if (!formData.value.patient_name) {
		uni.showToast({ title: '患者姓名不能为空', icon: 'none' })
		return
	}

	if (!formData.value.diagnosis_date) {
		uni.showToast({ title: '诊断日期不能为空', icon: 'none' })
		return
	}

	if (!formData.value.diagnosis_type) {
		uni.showToast({ title: '诊断类型不能为空', icon: 'none' })
		return
	}

	if (!formData.value.syndrome_type) {
		uni.showToast({ title: '证型不能为空', icon: 'none' })
		return
	}

	submitting.value = true
	try {
		// 处理数组字段，转换为逗号分隔的字符串
		const submitData = { ...formData.value }
		const arrayFields = ['diet_condition', 'body_feeling', 'sleep_condition', 'eye_condition', 'head_feeling', 'sweat_condition', 'skin_condition', 'urine_condition', 'stool_condition', 'kidney_condition', 'past_history']
		arrayFields.forEach(field => {
			if (Array.isArray(submitData[field])) {
				submitData[field] = submitData[field].join(',')
			}
		})

		const res = await proxy.apiUrl({
			url: '/api/tcm/updateCard',
			method: 'POST',
			data: {
				id: diagnosisId.value,
				patient_id: patientId.value,
				...submitData
			}
		})

		if (res.code === 1) {
			uni.showToast({ title: '保存成功', icon: 'success' })
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		} else {
			uni.showToast({ title: res.msg || '保存失败', icon: 'none' })
		}
	} catch (err) {
		console.error('保存失败:', err)
		uni.showToast({ title: '保存失败', icon: 'none' })
	} finally {
		submitting.value = false
	}
}

const goBack = () => {
	uni.navigateBack()
}
</script>

<style scoped>
.edit-container {
	min-height: 100vh;
	background: #f5f5f5;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #ffffff;
	padding: 20rpx 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.header-back {
	font-size: 40rpx;
	color: #1890ff;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	flex: 1;
	text-align: center;
}

.header-placeholder {
	width: 60rpx;
}

.loading-state {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	font-size: 28rpx;
	color: #999999;
}

.form-wrapper {
	padding: 30rpx;
}

.form-section {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #1890ff;
	margin-bottom: 24rpx;
	display: block;
	padding-bottom: 16rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.form-group {
	margin-bottom: 24rpx;
}

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

.form-label {
	display: block;
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
	margin-bottom: 16rpx;
	line-height: 1.5;
}

.form-input {
	width: 100%;
	padding: 20rpx;
	border: 2rpx solid #e8e8e8;
	border-radius: 12rpx;
	font-size: 28rpx;
	line-height: 1.5;
	color: #333333;
	background: #ffffff;
	box-sizing: border-box;
	display: block;
	height: auto;
	min-height: 60rpx;
}

.form-input::placeholder {
	color: #cccccc;
}

.form-textarea {
	width: 100%;
	padding: 20rpx;
	border: 2rpx solid #e8e8e8;
	border-radius: 12rpx;
	font-size: 28rpx;
	line-height: 1.6;
	color: #333333;
	background: #ffffff;
	box-sizing: border-box;
	min-height: 140rpx;
	display: block;
	font-family: inherit;
}

.form-textarea::placeholder {
	color: #cccccc;
}

.gender-group {
	display: flex;
	gap: 20rpx;
}

.gender-btn {
	flex: 1;
	padding: 20rpx;
	border: 2rpx solid #e8e8e8;
	border-radius: 12rpx;
	text-align: center;
	font-size: 28rpx;
	line-height: 1.5;
	color: #666666;
	background: #ffffff;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60rpx;
}

.gender-btn.active {
	border-color: #1890ff;
	background: #e6f7ff;
	color: #1890ff;
	font-weight: bold;
}

.radio-group {
	display: flex;
	gap: 20rpx;
}

.radio-item {
	flex: 1;
	padding: 16rpx 20rpx;
	border: 2rpx solid #e8e8e8;
	border-radius: 12rpx;
	text-align: center;
	font-size: 26rpx;
	color: #666666;
	background: #ffffff;
	transition: all 0.3s;
}

.radio-item.active {
	border-color: #1890ff;
	background: #e6f7ff;
	color: #1890ff;
	font-weight: bold;
}

.checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
}

.checkbox-item {
	padding: 12rpx 20rpx;
	border: 2rpx solid #e8e8e8;
	border-radius: 20rpx;
	font-size: 26rpx;
	color: #666666;
	background: #ffffff;
	transition: all 0.3s;
}

.checkbox-item.active {
	border-color: #1890ff;
	background: #e6f7ff;
	color: #1890ff;
	font-weight: bold;
}

.multi-checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
}

.multi-checkbox-item {
	padding: 12rpx 20rpx;
	border: 2rpx solid #e8e8e8;
	border-radius: 20rpx;
	font-size: 26rpx;
	color: #666666;
	background: #ffffff;
	transition: all 0.3s;
}

.multi-checkbox-item.active {
	border-color: #1890ff;
	background: #e6f7ff;
	color: #1890ff;
	font-weight: bold;
}

.date-input {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border: 2rpx solid #e8e8e8;
	border-radius: 12rpx;
	background: #ffffff;
	font-size: 28rpx;
	line-height: 1.5;
	color: #333333;
	min-height: 60rpx;
}

.date-icon {
	font-size: 32rpx;
	margin-left: 12rpx;
}

.picker-input {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border: 2rpx solid #e8e8e8;
	border-radius: 12rpx;
	background: #ffffff;
	font-size: 28rpx;
	line-height: 1.5;
	color: #333333;
	min-height: 60rpx;
}

.picker-icon {
	font-size: 20rpx;
	color: #999999;
	margin-left: 12rpx;
}

.button-group {
	display: flex;
	gap: 20rpx;
	margin-top: 40rpx;
	margin-bottom: 40rpx;
}

.btn {
	flex: 1;
	padding: 20rpx;
	border-radius: 12rpx;
	font-size: 32rpx;
	font-weight: bold;
	border: none;
	cursor: pointer;
	transition: all 0.3s;
}

.btn:active {
	transform: scale(0.98);
}

.btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.btn-cancel {
	background: #f0f0f0;
	color: #666666;
}

.btn-submit {
	background: #1890ff;
	color: #ffffff;
}

.btn-submit:active:not(:disabled) {
	background: #0050b3;
}

.date-picker-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	z-index: 999;
}

.date-picker-container {
	background: #ffffff;
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;
}

.date-picker-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.date-btn-cancel,
.date-btn-confirm {
	font-size: 28rpx;
	color: #1890ff;
	font-weight: bold;
}

.date-picker-view {
	height: 300rpx;
}

.picker-item {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	font-size: 28rpx;
	color: #333333;
}
</style>
