<template>
	<view class="personnel-form-container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav">
			<view class="nav-left" @click="goBack">
				<text class="iconfont icon-arrow-left"></text>
			</view>
			<view class="nav-title">新员工信息填写</view>
			<view class="nav-right"></view>
		</view>

		<!-- 进度条 -->
		<view class="progress-container">
			<view class="progress-bar">
				<view class="progress-step" :class="currentStep >= 1 ? 'active' : ''">
					<text class="step-number">1</text>
					<text class="step-text">基本信息</text>
				</view>
				<view class="progress-line" :class="currentStep >= 2 ? 'active' : ''"></view>
				<view class="progress-step" :class="currentStep >= 2 ? 'active' : ''">
					<text class="step-number">2</text>
					<text class="step-text">详细信息</text>
				</view>
				<view class="progress-line" :class="currentStep >= 3 ? 'active' : ''"></view>
				<view class="progress-step" :class="currentStep >= 3 ? 'active' : ''">
					<text class="step-number">3</text>
					<text class="step-text">确认提交</text>
				</view>
			</view>
		</view>

		<!-- 表单内容 -->
		<view class="form-content">
			<!-- 第一步：基本信息 -->
			<view v-if="currentStep === 1" class="step-content">
				<view class="section-title">基本信息</view>
				
				<!-- 头像上传 -->
				<view class="form-item">
					<view class="label">头像</view>
					<view class="avatar-upload" @click="chooseAvatar">
						<image v-if="formData.head_img" :src="formData.head_img" class="avatar-preview"></image>
						<view v-else class="avatar-placeholder">
							<text class="iconfont icon-camera"></text>
							<text class="placeholder-text">点击上传头像</text>
						</view>
					</view>
				</view>

				<!-- 姓名 -->
				<view class="form-item required">
					<view class="label">姓名</view>
					<input class="form-input" v-model="formData.name" placeholder="请输入姓名" />
				</view>

				<!-- 性别 -->
				<view class="form-item required">
					<view class="label">性别</view>
					<view class="radio-group">
						<label class="radio-item" @click="formData.gender = 1">
							<view class="radio" :class="formData.gender === 1 ? 'checked' : ''"></view>
							<text>男</text>
						</label>
						<label class="radio-item" @click="formData.gender = 0">
							<view class="radio" :class="formData.gender === 0 ? 'checked' : ''"></view>
							<text>女</text>
						</label>
					</view>
				</view>

				<!-- 生日 -->
				<view class="form-item">
					<view class="label">出生日期</view>
					<picker mode="date" :value="formData.birthday" @change="onBirthdayChange">
						<view class="picker-input">
							{{formData.birthday || '请选择出生日期'}}
						</view>
					</picker>
				</view>

				<!-- 手机号 -->
				<view class="form-item required">
					<view class="label">手机号码</view>
					<input class="form-input" v-model="formData.phone" placeholder="请输入手机号码" type="number" />
				</view>

				<!-- 邮箱 -->
				<view class="form-item">
					<view class="label">邮箱</view>
					<input class="form-input" v-model="formData.email" placeholder="请输入邮箱地址" />
				</view>

				<!-- 微信号 -->
				<view class="form-item">
					<view class="label">微信号</view>
					<input class="form-input" v-model="formData.wx" placeholder="请输入微信号" />
				</view>

				<!-- 账号类型 -->
				<view class="form-item required">
					<view class="label">职位类型</view>
					<view class="radio-group">
						<label class="radio-item" @click="formData.account_type = 'teacher'">
							<view class="radio" :class="formData.account_type === 'teacher' ? 'checked' : ''"></view>
							<text>教师</text>
						</label>
						<label class="radio-item" @click="formData.account_type = 'market'">
							<view class="radio" :class="formData.account_type === 'market' ? 'checked' : ''"></view>
							<text>市场</text>
						</label>
					</view>
				</view>

				<!-- 入职时间 -->
				<view class="form-item">
					<view class="label">入职时间</view>
					<picker mode="date" :value="formData.join_time" @change="onJoinTimeChange">
						<view class="picker-input">
							{{formData.join_time || '请选择入职时间'}}
						</view>
					</picker>
				</view>
			</view>

			<!-- 第二步：详细信息 -->
			<view v-if="currentStep === 2" class="step-content">
				<view class="section-title">详细信息</view>

				<!-- 民族 -->
				<view class="form-item">
					<view class="label">民族</view>
					<input class="form-input" v-model="detailData.ethnicity" placeholder="请输入民族" />
				</view>

				<!-- 年龄 -->
				<view class="form-item">
					<view class="label">年龄</view>
					<input class="form-input" v-model.number="detailData.age" placeholder="请输入年龄" type="number" />
				</view>

				<!-- 政治面貌 -->
				<view class="form-item">
					<view class="label">政治面貌</view>
					<picker :range="politicsOptions" @change="onPoliticsChange">
						<view class="picker-input">
							{{detailData.politics || '请选择政治面貌'}}
						</view>
					</picker>
				</view>

				<!-- 毕业院校 -->
				<view class="form-item">
					<view class="label">毕业院校</view>
					<input class="form-input" v-model="detailData.university" placeholder="请输入毕业院校" />
				</view>

				<!-- 学历 -->
				<view class="form-item">
					<view class="label">学历</view>
					<picker :range="educationOptions" @change="onEducationChange">
						<view class="picker-input">
							{{detailData.education || '请选择学历'}}
						</view>
					</picker>
				</view>

				<!-- 专业 -->
				<view class="form-item">
					<view class="label">专业</view>
					<input class="form-input" v-model="detailData.major" placeholder="请输入专业" />
				</view>

				<!-- 毕业日期 -->
				<view class="form-item">
					<view class="label">毕业日期</view>
					<picker mode="date" :value="detailData.graduation_date" @change="onGraduationDateChange">
						<view class="picker-input">
							{{detailData.graduation_date || '请选择毕业日期'}}
						</view>
					</picker>
				</view>

				<!-- 籍贯 -->
				<view class="form-item">
					<view class="label">籍贯</view>
					<input class="form-input" v-model="detailData.native_place" placeholder="请输入籍贯" />
				</view>

				<!-- 户口所在地 -->
				<view class="form-item">
					<view class="label">户口所在地</view>
					<input class="form-input" v-model="detailData.household_place" placeholder="请输入户口所在地" />
				</view>

				<!-- 户口性质 -->
				<view class="form-item">
					<view class="label">户口性质</view>
					<picker :range="householdTypeOptions" @change="onHouseholdTypeChange">
						<view class="picker-input">
							{{detailData.household_type || '请选择户口性质'}}
						</view>
					</picker>
				</view>

				<!-- 户籍地址 -->
				<view class="form-item">
					<view class="label">户籍地址</view>
					<textarea class="form-textarea" v-model="detailData.household_address" placeholder="请输入户籍地址"></textarea>
				</view>

				<!-- 现居地址 -->
				<view class="form-item">
					<view class="label">现居地址</view>
					<textarea class="form-textarea" v-model="detailData.current_address" placeholder="请输入现居地址"></textarea>
				</view>

				<!-- 紧急联系人 -->
				<view class="form-item">
					<view class="label">紧急联系人</view>
					<input class="form-input" v-model="detailData.emergency_contact" placeholder="请输入紧急联系人姓名" />
				</view>

				<!-- 紧急联系电话 -->
				<view class="form-item">
					<view class="label">紧急联系电话</view>
					<input class="form-input" v-model="detailData.emergency_phone" placeholder="请输入紧急联系电话" type="number" />
				</view>

				<!-- 婚姻状况 -->
				<view class="form-item">
					<view class="label">婚姻状况</view>
					<picker :range="maritalStatusOptions" @change="onMaritalStatusChange">
						<view class="picker-input">
							{{detailData.marital_status || '请选择婚姻状况'}}
						</view>
					</picker>
				</view>

				<!-- 银行卡号 -->
				<view class="form-item">
					<view class="label">银行卡号</view>
					<input class="form-input" v-model="detailData.bank_card" placeholder="请输入银行卡号" type="number" />
				</view>

				<!-- 开户银行 -->
				<view class="form-item">
					<view class="label">开户银行</view>
					<input class="form-input" v-model="detailData.bank_name" placeholder="请输入开户银行" />
				</view>

				<!-- 备注 -->
				<view class="form-item">
					<view class="label">备注</view>
					<textarea class="form-textarea" v-model="detailData.remark" placeholder="请输入备注信息"></textarea>
				</view>
			</view>

			<!-- 第三步：确认信息 -->
			<view v-if="currentStep === 3" class="step-content">
				<view class="section-title">确认信息</view>

				<!-- 审批流程提示 -->
				<view class="approval-section">
					<view class="section-title">审批流程</view>
					<view class="approval-info">
						<view class="info-item">
							<text class="info-label">审批流程：</text>
							<text class="info-value">{{currentApprovalConfigName}}</text>
						</view>
						<view class="info-note">
							<text>提交后将进入审批流程，请等待审批完成</text>
						</view>
					</view>
				</view>

				<view class="confirm-info">
					<view class="info-section">
						<view class="info-title">基本信息</view>
						<view class="info-item">
							<text class="info-label">姓名：</text>
							<text class="info-value">{{formData.name}}</text>
						</view>
						<view class="info-item">
							<text class="info-label">性别：</text>
							<text class="info-value">{{formData.gender === 1 ? '男' : '女'}}</text>
						</view>
						<view class="info-item">
							<text class="info-label">手机：</text>
							<text class="info-value">{{formData.phone}}</text>
						</view>
						<view class="info-item">
							<text class="info-label">职位：</text>
							<text class="info-value">{{formData.account_type === 'teacher' ? '教师' : '市场'}}</text>
						</view>
					</view>

					<view class="info-section">
						<view class="info-title">详细信息</view>
						<view class="info-item" v-if="detailData.education">
							<text class="info-label">学历：</text>
							<text class="info-value">{{detailData.education}}</text>
						</view>
						<view class="info-item" v-if="detailData.university">
							<text class="info-label">毕业院校：</text>
							<text class="info-value">{{detailData.university}}</text>
						</view>
						<view class="info-item" v-if="detailData.emergency_contact">
							<text class="info-label">紧急联系人：</text>
							<text class="info-value">{{detailData.emergency_contact}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer-buttons">
			<button v-if="currentStep > 1" class="btn btn-secondary" @click="prevStep">上一步</button>
			<button v-if="currentStep < 3" class="btn btn-primary" @click="nextStep">下一步</button>
			<button v-if="currentStep === 3" class="btn btn-primary" @click="submitForm" :loading="submitting">提交</button>
		</view>

		<!-- 加载提示 -->
		<uni-load-more v-if="submitting" status="loading" content-text="正在提交..."></uni-load-more>
	</view>
</template>

<script>
import apiRoute from '@/common/axios.js'

export default {
	data() {
		return {
			currentStep: 1,
			submitting: false,
			// 基本信息
			formData: {
				name: '',
				head_img: '',
				gender: null,
				birthday: '',
				phone: '',
				email: '',
				wx: '',
				account_type: '',
				join_time: ''
			},
			// 详细信息
			detailData: {
				ethnicity: '',
				age: null,
				politics: '',
				university: '',
				education: '',
				major: '',
				graduation_date: '',
				native_place: '',
				household_place: '',
				household_type: '',
				household_address: '',
				current_address: '',
				emergency_contact: '',
				emergency_phone: '',
				marital_status: '',
				bank_card: '',
				bank_name: '',
				remark: ''
			},
			// 审批流程相关
			approvalData: {
				useApproval: true,  // 默认启用审批流程
				selectedConfig: null,
				selectedIndex: 0
			},
			approvalConfigs: [],
			// 选项数据
			politicsOptions: ['群众', '共青团员', '中共党员', '民主党派', '无党派人士'],
			educationOptions: ['高中', '中专', '大专', '本科', '硕士', '博士'],
			householdTypeOptions: ['城镇', '农村'],
			maritalStatusOptions: ['未婚', '已婚', '离异', '丧偶']
		}
	},
	computed: {
		// 当前审批配置名称
		currentApprovalConfigName() {
			if (this.approvalData.selectedConfig && this.approvalData.selectedConfig.config_name) {
				return this.approvalData.selectedConfig.config_name
			}
			return '新入职申请'
		},
		// 是否显示审批配置加载失败
		shouldShowApprovalError() {
			return this.currentStep === 3 && this.approvalData.useApproval && 
				   !this.approvalData.selectedConfig && this.approvalConfigs.length === 0
		}
	},
	onLoad() {
		// 设置当前日期为默认入职时间
		const today = new Date()
		const year = today.getFullYear()
		const month = String(today.getMonth() + 1).padStart(2, '0')
		const day = String(today.getDate()).padStart(2, '0')
		this.formData.join_time = `${year}-${month}-${day}`

		// 加载审批配置
		this.loadApprovalConfigs()
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},

		// 选择头像
		chooseAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0]
					this.uploadAvatar(tempFilePath)
				}
			})
		},

		// 上传头像
		async uploadAvatar(filePath) {
			uni.showLoading({ title: '上传中...' })

			try {
				// 使用封装的上传方法
				const response = await apiRoute.uploadFile({
					url: 'uploadImage', // 使用员工端图片上传接口
					filePath: filePath,
					name: 'file'
				})

				if (response.data.code === 1) {
					this.formData.head_img = response.data.data.url
					uni.showToast({
						title: '头像上传成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: response.data.msg || '上传失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('头像上传失败:', error)
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},

		// 日期选择事件
		onBirthdayChange(e) {
			this.formData.birthday = e.detail.value
			// 自动计算年龄
			this.calculateAge()
		},

		onJoinTimeChange(e) {
			this.formData.join_time = e.detail.value
		},

		onGraduationDateChange(e) {
			this.detailData.graduation_date = e.detail.value
		},

		// 下拉选择事件
		onPoliticsChange(e) {
			this.detailData.politics = this.politicsOptions[e.detail.value]
		},

		onEducationChange(e) {
			this.detailData.education = this.educationOptions[e.detail.value]
		},

		onHouseholdTypeChange(e) {
			this.detailData.household_type = this.householdTypeOptions[e.detail.value]
		},

		onMaritalStatusChange(e) {
			this.detailData.marital_status = this.maritalStatusOptions[e.detail.value]
		},

		// 计算年龄
		calculateAge() {
			if (this.formData.birthday) {
				const birthDate = new Date(this.formData.birthday)
				const today = new Date()
				let age = today.getFullYear() - birthDate.getFullYear()
				const monthDiff = today.getMonth() - birthDate.getMonth()
				
				if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
					age--
				}
				
				this.detailData.age = age
			}
		},

		// 步骤控制
		nextStep() {
			if (this.validateCurrentStep()) {
				this.currentStep++
			}
		},

		prevStep() {
			this.currentStep--
		},

		// 验证当前步骤
		validateCurrentStep() {
			if (this.currentStep === 1) {
				if (!this.formData.name) {
					uni.showToast({ title: '请输入姓名', icon: 'none' })
					return false
				}
				if (this.formData.gender === null) {
					uni.showToast({ title: '请选择性别', icon: 'none' })
					return false
				}
				if (!this.formData.phone) {
					uni.showToast({ title: '请输入手机号码', icon: 'none' })
					return false
				}
				if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
					uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
					return false
				}
				if (!this.formData.account_type) {
					uni.showToast({ title: '请选择职位类型', icon: 'none' })
					return false
				}
			}
			return true
		},

		// 加载审批配置
		async loadApprovalConfigs() {
			try {
				const response = await apiRoute.get('personnel/approval-configs', {
					business_type: 'personnel_add'
				})
				if (response.code === 1) {
					this.approvalConfigs = response.data || []
					// 自动选择第一个可用的审批配置
					if (this.approvalConfigs.length > 0) {
						this.approvalData.selectedConfig = this.approvalConfigs[0]
						this.approvalData.selectedIndex = 0
					}
					console.log('审批配置加载成功:', this.approvalConfigs)
				} else {
					console.error('审批配置加载失败:', response.msg)
					// 如果加载失败，设置默认配置以避免阻塞提交
					this.approvalData.selectedConfig = {
						id: 0,
						config_name: '新入职申请',
						description: '新入职申请',
						business_type: 'personnel_add'
					}
				}
			} catch (error) {
				console.error('加载审批配置失败:', error)
				// 网络错误时也设置默认配置
				this.approvalData.selectedConfig = {
					id: 0,
					config_name: '新入职申请',
					description: '新入职申请',
					business_type: 'personnel_add'
				}
			}
		},

		// 审批配置选择变化
		onApprovalConfigChange(e) {
			const index = e.detail.value
			this.approvalData.selectedIndex = index
			this.approvalData.selectedConfig = this.approvalConfigs[index]
		},

		// 获取职位类型文本
		getAccountTypeText(type) {
			const typeMap = {
				'teacher': '教师',
				'market': '市场',
				'admin': '管理员',
				'other': '其他'
			}
			return typeMap[type] || type
		},

		// 提交表单
		async submitForm() {
			if (!this.validateCurrentStep()) {
				return
			}

			console.log('开始提交表单...')
			console.log('当前审批配置:', this.approvalData.selectedConfig)

			// 确保有审批配置（如果配置还没加载完，等待一下或使用默认值）
			if (this.approvalData.useApproval && !this.approvalData.selectedConfig) {
				console.log('审批配置未加载，尝试重新加载...')
				await this.loadApprovalConfigs()
				
				// 如果还是没有配置，使用默认配置继续提交
				if (!this.approvalData.selectedConfig) {
					this.approvalData.selectedConfig = {
						id: 0,
						config_name: '新入职申请',
						description: '新入职申请',
						business_type: 'personnel_add'
					}
					console.log('使用默认审批配置:', this.approvalData.selectedConfig)
				}
			}

			this.submitting = true

			try {
				// 处理字段值：空字符串转为null或空字符串，避免数据库错误
				const processField = (value, allowEmpty = true) => {
					if (value === null || value === undefined) {
						return null
					}
					if (typeof value === 'string') {
						const trimmed = value.trim()
						return trimmed === '' ? (allowEmpty ? '' : null) : trimmed
					}
					return value
				}

				// 处理日期字段：空字符串必须转为null
				const processDateField = (dateValue) => {
					return processField(dateValue, false) // 日期字段不允许空字符串
				}

				// 处理数字字段：空值转为null
				const processNumberField = (numberValue) => {
					if (numberValue === null || numberValue === undefined || numberValue === '') {
						return null
					}
					return numberValue
				}

				const submitData = {
					// 基本信息（必填字段保持原值）
					name: this.formData.name,
					gender: this.formData.gender,
					phone: this.formData.phone,
					account_type: this.formData.account_type,
					
					// 基本信息（非必填字段）
					head_img: processField(this.formData.head_img),
					birthday: processDateField(this.formData.birthday),
					email: processField(this.formData.email),
					wx: processField(this.formData.wx),
					join_time: processDateField(this.formData.join_time),
					
					// 详细信息（全部非必填）
					ethnicity: processField(this.detailData.ethnicity),
					age: processNumberField(this.detailData.age),
					politics: processField(this.detailData.politics),
					university: processField(this.detailData.university),
					education: processField(this.detailData.education),
					major: processField(this.detailData.major),
					graduation_date: processDateField(this.detailData.graduation_date),
					native_place: processField(this.detailData.native_place),
					household_place: processField(this.detailData.household_place),
					household_type: processField(this.detailData.household_type),
					household_address: processField(this.detailData.household_address),
					current_address: processField(this.detailData.current_address),
					emergency_contact: processField(this.detailData.emergency_contact),
					emergency_phone: processField(this.detailData.emergency_phone),
					marital_status: processField(this.detailData.marital_status),
					bank_card: processField(this.detailData.bank_card),
					bank_name: processField(this.detailData.bank_name),
					remark: processField(this.detailData.remark),
					
					// 处理审批配置
					use_approval: this.approvalData.useApproval,
					approval_config_id: this.approvalData.selectedConfig ? this.approvalData.selectedConfig.id : 0
				}

				console.log('提交数据:', submitData)

				const response = await apiRoute.post('personnel/add', submitData)

				console.log('提交响应:', response)
				console.log('响应数据结构:', response.data || response)
				console.log('响应码:', response.code, '类型:', typeof response.code)

				if (response.code === 1) {
					console.log('提交成功:', response.msg)
					uni.showToast({
						title: '入职申请已提交，等待审批',
						icon: 'success',
						duration: 2000
					})

					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				} else {
					console.error('提交失败:', response.msg)
					uni.showToast({
						title: response.msg || '提交失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('提交员工信息失败:', error)
				// 提供更详细的错误信息
				let errorMsg = '网络错误，请稍后重试'
				if (error.response) {
					errorMsg = error.response.msg || `服务器错误(${error.response.status})`
				} else if (error.message) {
					errorMsg = error.message
				}
				
				uni.showToast({
					title: errorMsg,
					icon: 'none',
					duration: 3000
				})
			} finally {
				this.submitting = false
			}
		}
	}
}
</script>

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

/* 自定义导航栏 */
.custom-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 32rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #e5e5e5;
	position: sticky;
	top: 0;
	z-index: 100;

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

		.iconfont {
			font-size: 36rpx;
			color: #333;
		}
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.nav-right {
		width: 80rpx;
	}
}

/* 进度条 */
.progress-container {
	background-color: #fff;
	padding: 40rpx 32rpx;
	margin-bottom: 20rpx;
}

.progress-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;

	.step-number {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: #e5e5e5;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 600;
		margin-bottom: 12rpx;
	}

	.step-text {
		font-size: 24rpx;
		color: #999;
	}

	&.active {
		.step-number {
			background-color: #007ACC;
			color: #fff;
		}

		.step-text {
			color: #007ACC;
		}
	}
}

.progress-line {
	flex: 1;
	height: 4rpx;
	background-color: #e5e5e5;
	margin: 0 20rpx;
	margin-top: -30rpx;

	&.active {
		background-color: #007ACC;
	}
}

/* 表单内容 */
.form-content {
	background-color: #fff;
	margin: 0 20rpx 20rpx;
	border-radius: 16rpx;
	padding: 32rpx;
}

.section-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 40rpx;
	border-left: 8rpx solid #007ACC;
	padding-left: 20rpx;
}

.form-item {
	margin-bottom: 40rpx;

	&.required .label::before {
		content: '*';
		color: #ff4d4f;
		margin-right: 8rpx;
	}

	.label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	.form-input,
	.picker-input {
		width: 100%;
		height: 88rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 28rpx;
		color: #333;
		background-color: #fff;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		&:focus {
			border-color: #007ACC;
		}
	}

	.form-textarea {
		width: 100%;
		min-height: 120rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 12rpx;
		padding: 20rpx 24rpx;
		font-size: 28rpx;
		color: #333;
		background-color: #fff;
		box-sizing: border-box;
		resize: none;

		&:focus {
			border-color: #007ACC;
		}
	}

	.picker-input {
		color: #999;
		cursor: pointer;
	}
}

/* 头像上传 */
.avatar-upload {
	width: 120rpx;
	height: 120rpx;
	border: 2rpx solid #e5e5e5;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: pointer;

	.avatar-preview {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.avatar-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #999;

		.iconfont {
			font-size: 32rpx;
			margin-bottom: 8rpx;
		}

		.placeholder-text {
			font-size: 20rpx;
		}
	}
}

/* 单选按钮组 */
.radio-group {
	display: flex;
	gap: 60rpx;
}

.radio-item {
	display: flex;
	align-items: center;
	cursor: pointer;

	.radio {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 50%;
		margin-right: 16rpx;
		position: relative;

		&.checked {
			border-color: #007ACC;

			&::after {
				content: '';
				width: 16rpx;
				height: 16rpx;
				background-color: #007ACC;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	text {
		font-size: 28rpx;
		color: #333;
	}
}

/* 审批流程部分 */
.approval-section {
	background-color: #fff;
	margin: 24rpx 32rpx;
	padding: 32rpx;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 24rpx;
		border-left: 6rpx solid #007ACC;
		padding-left: 16rpx;
	}

	.approval-info {
		.info-item {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;

			.info-label {
				font-size: 28rpx;
				color: #666;
				margin-right: 16rpx;
			}

			.info-value {
				font-size: 28rpx;
				color: #007ACC;
				font-weight: 500;
			}
		}

		.info-note {
			padding: 16rpx;
			background-color: #f8f9fa;
			border-radius: 8rpx;
			border-left: 4rpx solid #007ACC;

			text {
				font-size: 24rpx;
				color: #666;
				line-height: 1.5;
			}
		}
	}
}

/* 确认信息 */
.confirm-info {
	.info-section {
		margin-bottom: 40rpx;

		.info-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 24rpx;
			border-left: 6rpx solid #007ACC;
			padding-left: 16rpx;
		}

		.info-item {
			display: flex;
			margin-bottom: 16rpx;

			.info-label {
				font-size: 28rpx;
				color: #666;
				width: 120rpx;
				flex-shrink: 0;
			}

			.info-value {
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}
		}
	}
}

/* 底部按钮 */
.footer-buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 24rpx 32rpx 24rpx;
	border-top: 1rpx solid #e5e5e5;
	display: flex;
	gap: 24rpx;
	z-index: 100;

	.btn {
		flex: 1;
		height: 88rpx;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 600;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;

		&.btn-primary {
			background-color: #007ACC;
			color: #fff;

			&:active {
				background-color: #0056b3;
			}
		}

		&.btn-secondary {
			background-color: #f5f5f5;
			color: #666;

			&:active {
				background-color: #e5e5e5;
			}
		}
	}
}

/* 步骤内容动画 */
.step-content {
	animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateX(20rpx);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
</style>