rtliveCompany/pages_speaker/gradeApplication.vue

<template>
	<view class="container">
		<scroll-view class="content" scroll-y>
			<!-- 驳回意见提示 -->
			<view class="rejection-banner" v-if="rejectionInfo">
				<view class="rejection-icon">✕</view>
				<view class="rejection-text">驳回意见: {{ rejectionInfo }}</view>
			</view>

			

			<!-- 基本信息 -->
			<view class="form-section">
				<!-- 动态表单（来自 formJson） -->
				<view v-if="formFields.length > 0">
					<view 
						class="form-item form-item-dynamic" 
						:class="{ column: isDynamicFieldColumn(field) }"
						v-for="(field, index) in formFields" 
						:key="getFieldKey(field, index)">
						<view class="form-label">
							<text class="required" v-if="field.__config__ && field.__config__.required">*</text>
							<text>{{ field.__config__ ? field.__config__.label : '' }}</text>
						</view>
						
						<template v-if="field.__config__.tag === 'el-input' && field.type !== 'textarea'">
							<input 
								class="form-input" 
								:value="formData[field.__vModel__] || ''" 
								@input="(e) => onInputChange(field, e)"
								:placeholder="field.placeholder || '请输入' + (field.__config__.label || '')"
								type="text"
								:disabled="field.disabled"
								placeholder-class="text-placeholder"
							/>
						</template>
						<template v-else-if="field.__config__.tag === 'el-input' && field.type === 'textarea'">
							<textarea 
								class="form-textarea" 
								:value="formData[field.__vModel__] || ''" 
								@input="(e) => onInputChange(field, e)"
								:placeholder="field.placeholder || '请输入' + (field.__config__.label || '')"
								:maxlength="field.maxlength"
								:disabled="field.disabled"
								placeholder-class="text-placeholder"
							/>
						</template>
						<template v-else-if="field.__config__.tag === 'el-input-number'">
							<view class="input-number-wrapper">
								<view class="input-number-btn" @click="(e) => decreaseNumber(field, index)" :class="{ disabled: isNumberMin(field) }">-</view>
								<input 
									class="form-input input-number-input" 
									:value="formData[field.__vModel__] != null ? formData[field.__vModel__] : ''" 
									@input="(e) => onNumberInputChange(field, e)"
									type="number"
									:placeholder="field.placeholder || '请输入'"
									:disabled="field.disabled"
									placeholder-class="text-placeholder"
								/>
								<view class="input-number-btn" @click="(e) => increaseNumber(field, index)" :class="{ disabled: isNumberMax(field) }">+</view>
							</view>
						</template>
						<template v-else-if="field.__config__.tag === 'el-select'">
							<picker 
								mode="selector" 
								:range="getSelectOptions(field)" 
								range-key="label"
								:value="getSelectIndex(field)"
								@change="(e) => onSelectChange(field, e)">
								<view class="form-input picker-input" :class="{ placeholder: !formData[field.__vModel__] }">
									{{ getSelectLabel(field) || field.placeholder || '请选择' }}
									<image class="w48 h48" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png" mode=""></image>
								</view>
							</picker>
						</template>
						<template v-else-if="field.__config__.tag === 'el-slider'">
							<view class="slider-wrapper">
								<slider 
									:value="formData[field.__vModel__] != null ? formData[field.__vModel__] : (field.__config__.defaultValue != null ? field.__config__.defaultValue : 0)"
									:min="field.min != null ? field.min : 0"
									:max="field.max != null ? field.max : 100"
									:step="field.step || 1"
									:show-value="true"
									activeColor="#388BFF"
									@change="(e) => onSliderChange(field, e)"
								/>
							</view>
						</template>
						<template v-else-if="field.__config__.tag === 'el-checkbox-group'">
							<checkbox-group @change="(e) => onCheckboxChange(field, e)" class="checkbox-group">
								<label 
									class="checkbox-item"
									v-for="(option, optIndex) in getSelectOptions(field)" 
									:key="optIndex">
									<checkbox 
										:value="option.value" 
										:checked="isCheckboxChecked(field, option.value)" 
										color="#388BFF" 
									/>
									<text>{{ option.label }}</text>
								</label>
							</checkbox-group>
						</template>
						<template v-else-if="field.__config__.tag === 'el-radio-group'">
							<radio-group @change="(e) => onRadioChange(field, e)" class="radio-group">
								<label 
									class="radio-item"
									v-for="(option, optIndex) in getSelectOptions(field)" 
									:key="optIndex">
									<radio 
										:value="option.value" 
										:checked="formData[field.__vModel__] == option.value" 
										color="#388BFF" 
									/>
									<text>{{ option.label }}</text>
								</label>
							</radio-group>
						</template>
						<template v-else-if="field.__config__.tag === 'el-upload'">
							<view class="upload-section">
								<view class="upload-item" v-for="(file, fileIndex) in getUploadFiles(field)" :key="fileIndex">
									<image class="uploaded-image" :src="file" mode="aspectFill" v-if="isImageFile(file)"></image>
									<view class="uploaded-file" v-else>
										<text class="file-name">{{ getFileName(file) }}</text>
									</view>
									<view class="delete-btn" @click="(e) => removeUploadFile(field, fileIndex, index)">×</view>
								</view>
								<view class="upload-item upload-placeholder" @click="(e) => chooseUploadFile(field, index)">
									<image class="w48 h48" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_camera.png" mode=""></image>
									<text class="upload-text">{{ field.__config__.buttonText || '点击上传' }}</text>
								</view>
							</view>
						</template>
						<template v-else-if="field.__config__.tag === 'el-switch'">
							<switch 
								:checked="formData[field.__vModel__] || false"
								:disabled="field.disabled"
								:color="field['active-color'] || '#388BFF'"
								@change="(e) => onSwitchChange(field, e)"
							/>
						</template>
						<template v-else-if="field.__config__.tag === 'el-time-picker' && !field['is-range']">
							<picker 
								mode="time" 
								:value="formData[field.__vModel__] || ''"
								@change="(e) => onTimePickerChange(field, e)">
								<view class="form-input picker-input" :class="{ placeholder: !formData[field.__vModel__] }">
									{{ formData[field.__vModel__] || field.placeholder || '请选择' }}
								</view>
							</picker>
						</template>
						<template v-else-if="field.__config__.tag === 'el-time-picker' && field['is-range']">
							<view class="time-range-wrapper">
								<picker 
									mode="time" 
									:value="getTimeRangeStart(field)"
									@change="(e) => onTimeRangeStartChange(field, e)">
									<view class="form-input picker-input time-range-input" :class="{ placeholder: !getTimeRangeStart(field) }">
										{{ getTimeRangeStart(field) || field['start-placeholder'] || '开始时间' }}
									</view>
								</picker>
								<text class="time-range-separator">{{ field['range-separator'] || '至' }}</text>
								<picker 
									mode="time" 
									:value="getTimeRangeEnd(field)"
									@change="(e) => onTimeRangeEndChange(field, e)">
									<view class="form-input picker-input time-range-input" :class="{ placeholder: !getTimeRangeEnd(field) }">
										{{ getTimeRangeEnd(field) || field['end-placeholder'] || '结束时间' }}
									</view>
								</picker>
							</view>
						</template>
						<template v-else-if="field.__config__.tag === 'el-date-picker' && field.type !== 'daterange'">
							<picker 
								mode="date" 
								:value="formData[field.__vModel__] || ''"
								:start="field['start-date'] || ''"
								:end="field['end-date'] || ''"
								@change="(e) => onDatePickerChange(field, e)">
								<view class="form-input picker-input" :class="{ placeholder: !formData[field.__vModel__] }">
									{{ formData[field.__vModel__] || field.placeholder || '请选择' }}
								</view>
							</picker>
						</template>
						<template v-else-if="field.__config__.tag === 'el-date-picker' && field.type === 'daterange'">
							<view class="date-range-wrapper">
								<picker 
									mode="date" 
									:value="getDateRangeStart(field)"
									@change="(e) => onDateRangeStartChange(field, e)">
									<view class="form-input picker-input date-range-input" :class="{ placeholder: !getDateRangeStart(field) }">
										{{ getDateRangeStart(field) || field['start-placeholder'] || '开始日期' }}
									</view>
								</picker>
								<text class="date-range-separator">{{ field['range-separator'] || '至' }}</text>
								<picker 
									mode="date" 
									:value="getDateRangeEnd(field)"
									@change="(e) => onDateRangeEndChange(field, e)">
									<view class="form-input picker-input date-range-input" :class="{ placeholder: !getDateRangeEnd(field) }">
										{{ getDateRangeEnd(field) || field['end-placeholder'] || '结束日期' }}
									</view>
								</picker>
							</view>
						</template>
						<template v-else-if="field.__config__.tag === 'el-rate'">
							<view class="rate-wrapper">
								<view 
									class="rate-star" 
									v-for="(star, starIndex) in (field.max || 5)" 
									:key="starIndex"
									@click="(e) => setRate(field, starIndex + 1, index)"
									:class="{ active: (formData[field.__vModel__] || 0) >= (starIndex + 1) }">
									★
								</view>
								<text class="rate-text" v-if="field['show-score']">{{ formData[field.__vModel__] || 0 }}分</text>
							</view>
						</template>
					</view>
				</view>
				<!-- <view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>学术头衔</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.academicTitle }"
						@click="showPicker('学术头衔', 'doctor_academic_title')">
						{{ formData.academicTitle || '请选择' }}
						<image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view> -->

				<!-- <view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>学术任职（多选）</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.academicPositions }"
						@click="showPicker('学术任职', 'doctor_academic_position')">
						{{ formData.academicPositions || '请选择' }}
						<image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view> -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>国际性期刊论文/著作数</text>
					</view>
					<input type="number" class="input" v-model="formData.internationalPapers"></input>
				</view>
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>全国性期刊论文/著作数</text>
					</view>
					<input type="number" class="input" v-model="formData.nationalPapers"></input>
				</view>
				<!-- <view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>学术研究（多选）</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.researchAreas }"
						@click="showPicker('学术研究', 'doctor_research_area')">
						{{ formData.researchAreas || '请选择' }}
						<image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view> -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>临床工作经验年数</text>
					</view>
					<input type="number" class="input" v-model="formData.clinicalExperience"></input>
				</view>
				<!-- <view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>学位</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.degree }"
						@click="showPicker('学位', 'doctor_degree')">
						{{ formData.degree || '请选择' }}
						<image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view> -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>申请级别</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.applicationLevelLabel }"
						@click="showPicker('申请级别', 'doctor_apply_level')">
						{{ formData.applicationLevelLabel || '请选择' }}
						<image class="icon" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_more.png"></image>
					</view>
				</view>

				<view class="form-item column">
					<view class="form-label">
						<text class="required">*</text>
						<text>证明材料</text>
					</view>
					<view class="form-tips">如医院官网简介、论文截图、聘书等</view>
					<view class="upload-proof" @click="chooseProofImages">
						<view v-if="formData.proofImages && formData.proofImages.length > 0" class="uploaded-images">
							<view v-for="(image, index) in formData.proofImages" :key="index"
								class="uploaded-image-item">
								<image :src="image" mode="aspectFill"></image>
								<view class="image-delete" @click.stop="deleteProofImage(index)">×</view>
							</view>
							<view class="upload-placeholder">
								<image src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_camera.png" mode="aspectFill"></image>
							</view>
						</view>
						<view v-else class="upload-placeholder">
							<image src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/image/icon_camera.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="next-button" @click="submitForm">提交</view>
		<u-picker v-if="showPickerVisible" :title='pickerTitle' :show="true" confirmColor='#576B95' ref="uPicker"
			:columns="pickerData" @confirm="confirm" @cancel="cancel">
		</u-picker>

		<!-- 多选弹窗 -->
		<u-popup :show="showMultiSelectPopup" mode="bottom" round="20rpx" :closeable="false">
			<view class="u-popup-content">
				<view class="popup-header">
					<text class="popup-title">{{ multiSelectTitle }}</text>
					<text class="popup-close" @click="closeMultiSelectPopup">×</text>
				</view>
				<view class="popup-body">
					<view class="tag-group">
						<view v-for="(item, index) in multiSelectData" :key="index" class="tag-item"
							:class="{ active: selectedItems.includes(item) }" @click="toggleItem(item)">
							{{ item }}
						</view>
					</view>
				</view>
				<view class="popup-footer">
					<view class="popup-btn cancel-btn" @click="closeMultiSelectPopup">取消</view>
					<view class="popup-btn confirm-btn" @click="confirmMultiSelect">确定</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import utils from '@/utils/common.js'

	import {
		apply,
		getCompanyDoctorLevelApplyQuestionnaire,
		getDoctorDataList
	} from '@/api/speaker';
	export default {
		data() {
			return {
				academicTitle: [], //学术头衔
				academicPosition: [], //学术任职
				academicResearch: [], //学术研究
				degree: [], //学位
				applyLevel: [], //申请级别


				showPickerVisible: false,
				pickerData: [],
				pickerTitle: '',
				// 多选相关
				showMultiSelectPopup: false,
				multiSelectTitle: '',
				multiSelectData: [],
				selectedItems: [],
				currentMultiSelectType: '',
				// 申请级别选项
				applicationLevelColumns: [
					['一级', '二级', '三级', '四级']
				],
				userInfo :uni.getStorageSync('userInfo') || '{}',
				rejectionInfo: '',
				formTitle: '',
				formFields: [],
				formData: {
					// 学术信息
					academicTitle: '', // 学术头衔
					academicPositions: '', // 学术任职
					internationalPapers: null, // 国际性期刊论文/著作数
					nationalPapers: null, // 全国性期刊论文/著作数
					researchAreas: '', // 学术研究
					clinicalExperience: null, // 临床工作经验年数
					degree: '', // 学位
					applicationLevel: '', // 申请级别（提交用 dictValue）
					applicationLevelLabel: '', // 申请级别展示用 dictLabel
					proofImages: [] // 证明材料图片
				},
				pickerTitle: '默认标题',
				doctorId: null
			}
		},
		onLoad: async function(options) {
			try {
				this.doctorId = options.doctorId;
				// this.applyLevel = await utils.getDicts("doctor_apply_level"); //申请级别
			} catch (e) {
				console.log('获取字典数据失败:', e)
			}


			if (options.rejectionInfo) {
				this.rejectionInfo = decodeURIComponent(options.rejectionInfo)
			}
			// 获取用户信息
			
			if (typeof this.userInfo === 'string') {
				try {
					this.userInfo = JSON.parse(this.userInfo) || {}
				} catch (e) {
					this.userInfo = {}
				}
			}
			await this.getCompanyDoctorLevelApplyQuestionnaire()

		},
		onShow() {
			this.getDoctorDataList()
		},
		methods: {
			buildApplyPayload() {
				const materials = (this.formData.proofImages || []).map((url, index) => ({
					id: 0,
					companyId: (this.userInfo && this.userInfo.companyId) || 0,
					applyId: 0,
					fileUrl: url,
					fileName: `proof_${index + 1}.jpg`,
					fileSize: 0,
					fileType: 'image/jpeg',
					sortOrder: index + 1,
					deleted: 0
				}))
				return {
					id: null,
					doctorId: this.doctorId || '',
					companyId: (this.userInfo && this.userInfo.companyId) || 0,
					questionnaireVersionId: this.formData.questionnaireId,
					internationalPapers: parseInt(this.formData.internationalPapers) || 0,
					nationalPapers: parseInt(this.formData.nationalPapers) || 0,
					clinicalExperienceYears: parseInt(this.formData.clinicalExperience) || 0,
					applyLevel: this.formData.applicationLevel,
					materials
				}
			},
			//申请级别
			getDoctorDataList(){
				getDoctorDataList(
					{
						companyId: this.userInfo.companyId,
					}
				).then(res => {
					if (res.code === 200) {
						const rows = Array.isArray(res.rows) ? res.rows : []
						this.applyLevel = rows.map(it => ({
							dictLabel: it.levelName,
							dictValue: it.sort
						}))
					}
				})
			},

			async getCompanyDoctorLevelApplyQuestionnaire() {
				try {
					const res = await getCompanyDoctorLevelApplyQuestionnaire({
						companyId: this.userInfo.companyId
					})
					if (res.code === 200) {
						// 从 res.data.formJson 获取动态表单配置
						let formConfigData = res.data.formJson || null
						if (typeof formConfigData === 'string') {
							try {
								formConfigData = JSON.parse(formConfigData)
							} catch (e) {
								console.error('解析表单配置 JSON 失败', e)
								formConfigData = null
							}
						}
						if (formConfigData && formConfigData.fields && Array.isArray(formConfigData.fields)) {
							this.formFields = formConfigData.fields
							this.formTitle = formConfigData.formTitle || formConfigData.title || '补充信息'
							this.initFormData()
						}
						if (res.data.formData) {
							Object.assign(this.formData, res.data.formData)
						}
						this.formData.questionnaireId=res.data.versionId
					}
				} catch (e) {
				}
			},
			// ---------- 动态表单（formJson）相关方法 ----------
			getFieldKey(field, index) {
				return field && field.__config__ && field.__config__.formId ? field.__config__.formId : `field_${index}`
			},
			isDynamicFieldColumn(field) {
				if (!field || !field.__config__) return false
				const tag = field.__config__.tag
				if (tag === 'el-input' && field.type === 'textarea') return true
				if (tag === 'el-checkbox-group' || tag === 'el-radio-group') return true
				if (tag === 'el-upload' || tag === 'el-slider' || tag === 'el-rate') return true
				if (tag === 'el-time-picker' && field['is-range']) return true
				if (tag === 'el-date-picker' && field.type === 'daterange') return true
				return false
			},
			initFormData() {
				this.formFields.forEach(field => {
					const vModel = field.__vModel__
					if (!vModel) return
					if (this.formData[vModel] !== undefined && this.formData[vModel] !== null) return
					const tag = field.__config__.tag
					const defaultValue = field.__config__.defaultValue
					switch (tag) {
						case 'el-input':
							this.$set(this.formData, vModel, defaultValue !== undefined ? defaultValue : '')
							break
						case 'el-input-number':
							if (defaultValue !== undefined) {
								this.$set(this.formData, vModel, Number(defaultValue))
							} else {
								const minValue = field.min !== undefined ? Number(field.min) : null
								this.$set(this.formData, vModel, minValue)
							}
							break
						case 'el-select':
							this.$set(this.formData, vModel, defaultValue !== undefined ? defaultValue : '')
							break
						case 'el-slider':
							this.$set(this.formData, vModel, defaultValue !== undefined ? Number(defaultValue) : (field.min !== undefined ? Number(field.min) : 0))
							break
						case 'el-checkbox-group':
							this.$set(this.formData, vModel, defaultValue !== undefined && Array.isArray(defaultValue) ? [...defaultValue] : [])
							break
						case 'el-radio-group':
							this.$set(this.formData, vModel, defaultValue !== undefined ? defaultValue : '')
							break
						case 'el-upload':
							if (defaultValue !== undefined && Array.isArray(defaultValue)) {
								this.$set(this.formData, vModel, [...defaultValue])
							} else if (defaultValue !== undefined && typeof defaultValue === 'string') {
								this.$set(this.formData, vModel, defaultValue.split(',').filter(item => item.trim()))
							} else {
								this.$set(this.formData, vModel, [])
							}
							break
						case 'el-switch':
							this.$set(this.formData, vModel, defaultValue !== undefined ? Boolean(defaultValue) : false)
							break
						case 'el-time-picker':
							if (field['is-range']) {
								this.$set(this.formData, vModel, defaultValue !== undefined && Array.isArray(defaultValue) ? [...defaultValue] : ['', ''])
							} else {
								this.$set(this.formData, vModel, defaultValue !== undefined ? defaultValue : '')
							}
							break
						case 'el-date-picker':
							if (field.type === 'daterange') {
								this.$set(this.formData, vModel, defaultValue !== undefined && Array.isArray(defaultValue) ? [...defaultValue] : ['', ''])
							} else {
								this.$set(this.formData, vModel, defaultValue !== undefined ? defaultValue : '')
							}
							break
						case 'el-rate':
							this.$set(this.formData, vModel, defaultValue !== undefined ? Number(defaultValue) : 0)
							break
						default:
							this.$set(this.formData, vModel, defaultValue !== undefined ? defaultValue : '')
							break
					}
				})
			},
			getSelectOptions(field) {
				return field.__slot__ && field.__slot__.options ? field.__slot__.options : []
			},
			getSelectIndex(field) {
				const value = this.formData[field.__vModel__]
				const options = this.getSelectOptions(field)
				const index = options.findIndex(opt => opt.value == value)
				return index >= 0 ? index : 0
			},
			getSelectLabel(field) {
				const value = this.formData[field.__vModel__]
				const options = this.getSelectOptions(field)
				const option = options.find(opt => opt.value == value)
				return option ? option.label : ''
			},
			onInputChange(field, e) {
				const value = e.detail && e.detail.value !== undefined ? e.detail.value : (e.target && e.target.value !== undefined ? e.target.value : '')
				this.$set(this.formData, field.__vModel__, value)
			},
			onNumberInputChange(field, e) {
				const value = e.detail && e.detail.value !== undefined ? e.detail.value : (e.target && e.target.value !== undefined ? e.target.value : '')
				const numValue = value === '' ? null : Number(value)
				if (value !== '' && isNaN(numValue)) return
				this.$set(this.formData, field.__vModel__, numValue)
			},
			onSelectChange(field, e) {
				const options = this.getSelectOptions(field)
				const index = e.detail.value
				if (options[index]) {
					this.$set(this.formData, field.__vModel__, options[index].value)
				}
			},
			onSliderChange(field, e) {
				this.$set(this.formData, field.__vModel__, e.detail.value)
			},
			onCheckboxChange(field, e) {
				this.$set(this.formData, field.__vModel__, e.detail.value)
			},
			onRadioChange(field, e) {
				this.$set(this.formData, field.__vModel__, e.detail.value)
			},
			isCheckboxChecked(field, value) {
				const checkedValues = this.formData[field.__vModel__] || []
				return checkedValues.includes(value)
			},
			getUploadFiles(field) {
				if (!field || !field.__vModel__) return []
				const files = this.formData[field.__vModel__] || []
				return Array.isArray(files) ? files : []
			},
			isImageFile(file) {
				if (typeof file === 'string') {
					return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(file) || file.startsWith('data:image')
				}
				return false
			},
			getFileName(file) {
				if (typeof file === 'string') {
					const parts = file.split('/')
					return parts[parts.length - 1]
				}
				return '文件'
			},
			chooseUploadFile(field, formIndex) {
				if (!field && formIndex !== undefined) field = this.formFields[formIndex]
				if (!field || !field.__vModel__) return
				const maxCount = field.multiple ? 9 : 3
				const currentFiles = this.getUploadFiles(field)
				const remaining = maxCount - currentFiles.length
				if (remaining <= 0) {
					uni.showToast({ icon: 'none', title: '已达到最大上传数量' })
					return
				}
				const vm = this
				uni.chooseImage({
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						if (!res.tempFilePaths || res.tempFilePaths.length === 0) return
						uni.showLoading({ title: '上传中...' })
						const files = vm.formData[field.__vModel__] || []
						const requestPath = uni.getStorageSync('requestPath')
						const totalCount = res.tempFilePaths.length
						let completedCount = 0
						const uploadedUrls = []
						res.tempFilePaths.forEach((filePath) => {
							uni.uploadFile({
								url: `${requestPath}/app/common/uploadOSS`,
								filePath: filePath,
								name: 'file',
								formData: {},
								success: (uploadRes) => {
									completedCount++
									try {
										const result = typeof uploadRes.data === 'string' ? JSON.parse(uploadRes.data) : uploadRes.data
										if (result.code == 200 && result.data && result.data.url) {
											uploadedUrls.push(result.data.url)
										} else if (result.code == 200 && result.url) {
											uploadedUrls.push(result.url)
										}
									} catch (e) {}
									if (completedCount === totalCount) {
										uni.hideLoading()
										if (uploadedUrls.length > 0) {
											vm.$set(vm.formData, field.__vModel__, [...files, ...uploadedUrls])
											uni.showToast({ icon: 'success', title: uploadedUrls.length === totalCount ? '上传成功' : `成功上传${uploadedUrls.length}/${totalCount}个文件` })
										} else {
											uni.showToast({ icon: 'none', title: '上传失败' })
										}
									}
								},
								fail: () => {
									completedCount++
									if (completedCount === totalCount) {
										uni.hideLoading()
										if (uploadedUrls.length > 0) {
											vm.$set(vm.formData, field.__vModel__, [...files, ...uploadedUrls])
											uni.showToast({ icon: 'none', title: `成功上传${uploadedUrls.length}/${totalCount}个文件` })
										} else {
											uni.showToast({ icon: 'none', title: '上传失败' })
										}
									}
								}
							})
						})
					},
					fail: () => {
						uni.showToast({ icon: 'none', title: '选择文件失败' })
					}
				})
			},
			removeUploadFile(field, fileIndex, formIndex) {
				if (!field && formIndex !== undefined) field = this.formFields[formIndex]
				if (!field || !field.__vModel__) return
				const files = this.formData[field.__vModel__] || []
				if (fileIndex >= 0 && fileIndex < files.length) {
					files.splice(fileIndex, 1)
					this.$set(this.formData, field.__vModel__, files)
				}
			},
			decreaseNumber(field, index) {
				if (!field && index !== undefined) field = this.formFields[index]
				if (!field || !field.__vModel__) return
				if (this.isNumberMin(field)) return
				const current = Number(this.formData[field.__vModel__] || 0)
				const step = field.step || 1
				const min = field.min !== undefined ? field.min : 0
				this.$set(this.formData, field.__vModel__, Math.max(min, current - step))
			},
			increaseNumber(field, index) {
				if (!field && index !== undefined) field = this.formFields[index]
				if (!field || !field.__vModel__) return
				if (this.isNumberMax(field)) return
				const current = Number(this.formData[field.__vModel__] || 0)
				const step = field.step || 1
				const max = field.max !== undefined ? field.max : Infinity
				this.$set(this.formData, field.__vModel__, Math.min(max, current + step))
			},
			isNumberMin(field) {
				if (!field || !field.__vModel__) return false
				const current = Number(this.formData[field.__vModel__] || 0)
				const min = field.min !== undefined ? field.min : 0
				return current <= min
			},
			isNumberMax(field) {
				if (!field || !field.__vModel__) return false
				const current = Number(this.formData[field.__vModel__] || 0)
				const max = field.max !== undefined ? field.max : Infinity
				return current >= max
			},
			onSwitchChange(field, e) {
				this.$set(this.formData, field.__vModel__, e.detail.value)
			},
			onTimePickerChange(field, e) {
				this.$set(this.formData, field.__vModel__, e.detail.value)
			},
			getTimeRangeStart(field) {
				const value = this.formData[field.__vModel__]
				return Array.isArray(value) && value.length > 0 ? value[0] : ''
			},
			getTimeRangeEnd(field) {
				const value = this.formData[field.__vModel__]
				return Array.isArray(value) && value.length > 1 ? value[1] : ''
			},
			onTimeRangeStartChange(field, e) {
				const value = this.formData[field.__vModel__] || []
				value[0] = e.detail.value
				this.$set(this.formData, field.__vModel__, [...value])
			},
			onTimeRangeEndChange(field, e) {
				const value = this.formData[field.__vModel__] || []
				value[1] = e.detail.value
				this.$set(this.formData, field.__vModel__, [...value])
			},
			onDatePickerChange(field, e) {
				this.$set(this.formData, field.__vModel__, e.detail.value)
			},
			getDateRangeStart(field) {
				const value = this.formData[field.__vModel__]
				return Array.isArray(value) && value.length > 0 ? value[0] : ''
			},
			getDateRangeEnd(field) {
				const value = this.formData[field.__vModel__]
				return Array.isArray(value) && value.length > 1 ? value[1] : ''
			},
			onDateRangeStartChange(field, e) {
				const value = this.formData[field.__vModel__] || []
				value[0] = e.detail.value
				this.$set(this.formData, field.__vModel__, [...value])
			},
			onDateRangeEndChange(field, e) {
				const value = this.formData[field.__vModel__] || []
				value[1] = e.detail.value
				this.$set(this.formData, field.__vModel__, [...value])
			},
			setRate(field, value, formIndex) {
				if (!field && formIndex !== undefined) field = this.formFields[formIndex]
				if (!field || !field.__vModel__) return
				if (field.disabled) return
				this.$set(this.formData, field.__vModel__, value)
			},
			validateDynamicForm() {
				for (let field of this.formFields) {
					const value = this.formData[field.__vModel__]
					const fieldLabel = field.__config__.label || '该字段'
					const tag = field.__config__.tag
					const isRequired = field.__config__.required
					if (isRequired) {
						if (tag === 'el-checkbox-group' || tag === 'el-upload') {
							const arr = tag === 'el-upload' ? this.getUploadFiles(field) : value
							if (!arr || !Array.isArray(arr) || arr.length === 0) {
								return { valid: false, message: tag === 'el-upload' ? `请上传${fieldLabel}` : `请选择${fieldLabel}` }
							}
						} else if ((tag === 'el-time-picker' && field['is-range']) || (tag === 'el-date-picker' && field.type === 'daterange')) {
							const range = value || []
							if (!Array.isArray(range) || range.length < 2 || !range[0] || !range[1]) {
								return { valid: false, message: `请选择${fieldLabel}` }
							}
						} else if (tag === 'el-select' || tag === 'el-radio-group' || (tag === 'el-time-picker' && !field['is-range']) || (tag === 'el-date-picker' && field.type !== 'daterange')) {
							if (!value && value !== 0 && value !== '0' && value !== false) {
								return { valid: false, message: `请选择${fieldLabel}` }
							}
						} else if (tag === 'el-input') {
							if (!value || (typeof value === 'string' && value.trim() === '')) {
								return { valid: false, message: `请输入${fieldLabel}` }
							}
						} else if (tag === 'el-input-number' || tag === 'el-slider') {
							if (value === null || value === undefined || value === '') {
								return { valid: false, message: tag === 'el-slider' ? `请设置${fieldLabel}` : `请输入${fieldLabel}` }
							}
						} else if (tag === 'el-rate') {
							if (!value || value === 0) {
								return { valid: false, message: `请为${fieldLabel}评分` }
							}
						} else if (!value && value !== 0 && value !== false) {
							return { valid: false, message: `请填写${fieldLabel}` }
						}
					}
					if (value !== null && value !== undefined && value !== '') {
						if (tag === 'el-input' && typeof value === 'string') {
							if (field.maxlength && value.length > field.maxlength) {
								return { valid: false, message: `${fieldLabel}不能超过${field.maxlength}个字符` }
							}
							if (field.minlength && value.length < field.minlength) {
								return { valid: false, message: `${fieldLabel}不能少于${field.minlength}个字符` }
							}
						} else if (tag === 'el-input-number' || tag === 'el-slider') {
							const numValue = Number(value)
							if (!isNaN(numValue)) {
								if (field.min !== undefined && numValue < field.min) {
									return { valid: false, message: `${fieldLabel}不能小于${field.min}` }
								}
								if (field.max !== undefined && numValue > field.max) {
									return { valid: false, message: `${fieldLabel}不能大于${field.max}` }
								}
							}
						}
					}
				}
				return { valid: true }
			},
			// 选择证明材料图片
			chooseProofImages() {
				uni.chooseImage({
					count: 9, // 最多选择9张
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// 上传图片
						this.uploadImages(res.tempFilePaths)
					}
				})
			},
			// 上传图片
			async uploadImages(tempFilePaths) {
				try {
					uni.showLoading({
						title: '上传中...'
					})
					const uploadedImages = []
					// 从storage获取动态域名
					const baseUrl = uni.getStorageSync('requestPath')
					// 逐个上传图片
					for (const tempFilePath of tempFilePaths) {
						// 使用uni.uploadFile上传图片
						const uploadRes = await new Promise((resolve, reject) => {
							uni.uploadFile({
								url: `${baseUrl}/system/file/upload`,
								filePath: tempFilePath,
								name: 'file',
								formData: {
									bizType: 'DOCTOR_APPLY'
								},
								header: {
									'AppToken': uni.getStorageSync('AppToken')
								},
								success: (res) => {
									// 解析上传结果
									const data = JSON.parse(res.data)
									if (data.code === 200) {
										
										resolve(data.data)
									} else {
										reject(new Error(data.message || '上传失败'))
									}
								},
								fail: (err) => {
									reject(err)
								}
							})
						})
						// 将上传成功的图片路径添加到数组
						uploadedImages.push(uploadRes.fileUrl)
					}
					// 更新表单数据
					this.formData.proofImages = [...this.formData.proofImages, ...uploadedImages]
					uni.hideLoading()
					uni.showToast({
						icon: 'success',
						title: '上传成功'
					})
				} catch (e) {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '上传失败'
					})
				}
			},

			// 删除证明材料图片
			deleteProofImage(index) {
				this.formData.proofImages.splice(index, 1)
			},

			// 显示选择器
			showPicker(title, type) {
				// 处理多选情况
				if (type === 'doctor_academic_position' || type === 'doctor_research_area') {
					// 获取数据
					let dictData = []
					if (type === 'doctor_academic_position') {
						dictData = this.academicPosition.map(item => item.dictLabel)
					} else if (type === 'doctor_research_area') {
						dictData = this.academicResearch.map(item => item.dictLabel)
					}

					// 设置多选数据
					this.multiSelectData = dictData
					this.multiSelectTitle = title
					this.currentMultiSelectType = type

					// 初始化已选项
					if (type === 'doctor_academic_position') {
						this.selectedItems = this.formData.academicPositions ? this.formData.academicPositions.split(',') :
							[]
					} else if (type === 'doctor_research_area') {
						this.selectedItems = this.formData.researchAreas ? this.formData.researchAreas.split(',') : []
					}

					// 显示多选弹窗
					this.showMultiSelectPopup = true
				} else {
					// 单选情况，保持原有逻辑
					// 先隐藏选择器，确保下次显示时重新创建
					this.showPickerVisible = false

					// 根据字典类型获取对应的数据
					let dictData = []
					// if (type === 'doctor_academic_title') {
					// 	dictData = this.academicTitle.map(item => item.dictLabel)
					// } else if (type === 'doctor_degree') {
					// 	dictData = this.degree.map(item => item.dictLabel)
					// } else if (type === 'doctor_apply_level') {
					// 	dictData = this.applyLevel.map(item => item.dictLabel)
					// }
                    if (type === 'doctor_apply_level') {
						dictData = this.applyLevel.map(item => item.dictLabel)
					}
					// 设置数据
					this.pickerData = [dictData]
					this.pickerTitle = title

					// 延迟显示选择器，确保数据已更新
					setTimeout(() => {
						this.showPickerVisible = true
					}, 50)
				}
			},

			// 选择器确认
			confirm(e) {
				
				if (e.value && e.value.length > 0) {
					if (this.pickerTitle === '申请级别') {
						const item = this.applyLevel.find(a => a.dictLabel === e.value[0])
						if (item) {
							this.formData.applicationLevel = item.dictValue
							this.formData.applicationLevelLabel=item.dictLabel
						}
					}
				}
				this.showPickerVisible = false
			},

			// 选择器取消
			cancel() {
				// 关闭选择器
				this.showPickerVisible = false
			},

			// 多选相关方法
			// 切换选项
			toggleItem(item) {
				const index = this.selectedItems.indexOf(item)
				if (index > -1) {
					// 取消选择
					this.selectedItems.splice(index, 1)
				} else {
					// 添加选择
					this.selectedItems.push(item)
				}
			},

			// 关闭多选弹窗
			closeMultiSelectPopup() {
				this.showMultiSelectPopup = false
			},

			// 确认多选结果
			confirmMultiSelect() {
				const selectedValues = this.selectedItems.join(',')

				if (this.currentMultiSelectType === 'doctor_academic_position') {
					this.formData.academicPositions = selectedValues
				} else if (this.currentMultiSelectType === 'doctor_research_area') {
					this.formData.researchAreas = selectedValues
				}

				this.showMultiSelectPopup = false
			},

			// 提交表单
			submitForm() {
				if (this.formFields.length > 0) {
					const validation = this.validateDynamicForm()
					if (!validation.valid) {
						uni.showToast({
							icon: 'none',
							title: validation.message
						})
						return
					}
				}
				// 验证静态表单数据
				// if (!this.formData.academicTitle) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请选择学术头衔'
				// 	})
				// 	return
				// }
				// if (!this.formData.degree) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请选择学位'
				// 	})
				// 	return
				// }
				if (this.formData.internationalPapers==null||this.formData.internationalPapers==0) {
					uni.showToast({
						icon: 'none',
						title: '请输入国际性期刊论文/著作数'
					})
					return
				}
				if (this.formData.nationalPapers==null||this.formData.nationalPapers==0) {
					uni.showToast({
						icon: 'none',
						title: '请输入全国性期刊论文/著作数'
					})
					return
				}
				if (this.formData.clinicalExperience==null||this.formData.clinicalExperience==0) {
					uni.showToast({
						icon: 'none',
						title: '请输入临床工作经验年数'
					})
					return
				}
				if (!this.formData.applicationLevel) {
					uni.showToast({
						icon: 'none',
						title: '请选择申请级别'
					})
					return
				}
				if (this.formData.proofImages && this.formData.proofImages.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '请上传证明材料'
					})
					return
				}
               
				// 构建表单数据（静态字段）
				const formData = this.buildApplyPayload()
				// 动态表单字段放入 dynamicFormData 传到接口
				const dynamicFormData = {}
				if (this.formFields && this.formFields.length > 0) {
					this.formFields.forEach(field => {
						const vModel = field.__vModel__
						if (!vModel) return
						if (!field.__config__) return
						let value = this.formData[vModel]
						if (field.__config__.tag === 'el-upload') {
							dynamicFormData[vModel] = Array.isArray(value) && value.length > 0 ? value.join(',') : (value || '')
						} else if (field.__config__.tag === 'el-checkbox-group') {
							dynamicFormData[vModel] = Array.isArray(value) && value.length > 0 ? value.join(',') : (value || '')
						} else {
							dynamicFormData[vModel] = value
						}
					})
					formData.dynamicFormData = dynamicFormData
				}

				uni.showLoading({
					title: '提交中...'
				})
				apply(formData).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						uni.showToast({
							icon: 'success',
							title: '提交成功'
						})
						uni.redirectTo({
							url: '/pages_task/success'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg||res.message
						})
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '网络错误，请重试'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text-placeholder {
		color: #C8C9CC !important;
	}
	checkbox .wx-checkbox-input {
		border-radius: 0 !important;
	}
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border-radius: 0 !important;
	}

	.container {
		min-height: 100vh;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		position: relative;

		.content {
			flex: 1;
			box-sizing: border-box;

			.rejection-banner {
				display: flex;
				align-items: center;
				padding: 24rpx;
				background: #FF5030;
				color: #fff;
				margin: 24rpx;
				border-radius: 8rpx;

				.rejection-icon {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.3);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					margin-right: 16rpx;
				}

				.rejection-text {
					flex: 1;
					font-size: 28rpx;
					line-height: 1.5;
				}
			}

			.form-header {
				margin: 20rpx 20rpx 0;
				padding-bottom: 16rpx;
				.form-title {
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
				}
			}

			.form-section, .dynamic-form-section {
				background: #fff;
				// margin: 20rpx;
				border-radius: 16rpx;
				padding: 32rpx;

				.form-item, .form-item-dynamic {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #EBEDF0;
					padding: 30rpx 0;

					&:last-child {
						border-bottom: 0;
					}

					&.column {
						display: flex;
						flex-direction: column;
						justify-content: baseline;
						align-items: baseline;
					}

					.input {
						text-align: end;
						font-size: 28rpx;
						color: #333;
					}

					.form-label {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #333;

						.required {
							color: #CF3546;
							margin-right: 4rpx;
						}
					}

					.form-tips {
						font-size: 24rpx;
						color: #999999;
						margin: 12rpx 0 24rpx;
					}

					.upload-proof {
						margin-top: 16rpx;

						.uploaded-images {
							display: flex;
							flex-wrap: wrap;
							gap: 20rpx;

							.uploaded-image-item {
								width: 160rpx;
								height: 160rpx;
								border-radius: 16rpx;
								position: relative;

								image {
									width: 100%;
									height: 100%;
									border-radius: 12rpx;
								}

								.image-delete {
									position: absolute;
									top: -12rpx;
									right: -12rpx;
									width: 40rpx;
									height: 40rpx;
									background: rgba(0, 0, 0, 0.6);
									color: #FFFFFF;
									border-radius: 50%;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 32rpx;
									font-weight: bold;
									z-index: 1;
								}
							}


						}

						.upload-placeholder {
							width: 160rpx;
							height: 160rpx;
							background: #F7F8FA;
							border-radius: 16rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							image {
								width: 48rpx;
								height: 48rpx;
							}

							.camera-icon {
								font-size: 48rpx;
								color: #CCCCCC;
								margin-bottom: 16rpx;
							}

							.upload-text {
								font-size: 24rpx;
								color: #999999;
							}
						}
					}

					.txt {
						font-size: 28rpx;
						color: #333333;
					}

					.form-input {
						flex: 1;
						font-size: 28rpx;
						color: #333;

						&.placeholder {
							color: #C8C9CC;
						}

						&.picker-input {
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}

						.icon {
							width: 36rpx;
							height: 36rpx;
						}
					}

					/* 动态表单项控件（与现有样式一致） */
					.form-textarea {
						flex: 1;
						width: 100%;
						min-height: 160rpx;
						padding: 16rpx;
						border-radius: 12rpx;
						border: 2rpx solid #EBEDF0;
						font-size: 28rpx;
						color: #333;
						box-sizing: border-box;
					}
					.input-number-wrapper {
						display: flex;
						align-items: center;
						gap: 16rpx;
						flex: 1;
						justify-content: flex-end;
						.input-number-btn {
							width: 60rpx;
							height: 60rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border: 2rpx solid #EBEDF0;
							border-radius: 8rpx;
							font-size: 32rpx;
							color: #333;
							background: #fff;
							&.disabled {
								opacity: 0.5;
								color: #C8C9CC;
							}
						}
						.input-number-input {
							width: 120rpx;
							text-align: center;
							font-size: 28rpx;
							color: #333;
						}
					}
					.slider-wrapper {
						flex: 1;
						padding: 0 0 0 24rpx;
					}
					.checkbox-group, .radio-group {
						flex: 1;
						display: flex;
						flex-direction: column;
						gap: 24rpx;
						.checkbox-item, .radio-item {
							display: flex;
							align-items: center;
							gap: 16rpx;
							font-size: 28rpx;
							color: #333;
						}
					}
					.upload-section {
						flex: 1;
						display: flex;
						flex-wrap: wrap;
						gap: 20rpx;
						.upload-item {
							width: 160rpx;
							height: 160rpx;
							border-radius: 16rpx;
							overflow: hidden;
							position: relative;
							box-sizing: border-box;
							.uploaded-image {
								width: 100%;
								height: 100%;
							}
							.uploaded-file {
								width: 100%;
								height: 100%;
								background: #F7F8FA;
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 16rpx;
								.file-name {
									font-size: 24rpx;
									color: #666;
									word-break: break-all;
								}
							}
							.delete-btn {
								position: absolute;
								top: -12rpx;
								right: -12rpx;
								width: 40rpx;
								height: 40rpx;
								background: rgba(0, 0, 0, 0.6);
								color: #FFFFFF;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 32rpx;
								font-weight: bold;
								z-index: 1;
							}
							&.upload-placeholder {
								width: 160rpx;
								height: 160rpx;
								background: #F7F8FA;
								border-radius: 16rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								gap: 8rpx;
								image {
									width: 48rpx;
									height: 48rpx;
								}
								.upload-text {
									font-size: 24rpx;
									color: #999999;
								}
							}
						}
					}
					.time-range-wrapper, .date-range-wrapper {
						flex: 1;
						display: flex;
						align-items: center;
						gap: 16rpx;
						.time-range-input, .date-range-input {
							flex: 1;
						}
						.time-range-separator, .date-range-separator {
							font-size: 28rpx;
							color: #666;
						}
					}
					.rate-wrapper {
						flex: 1;
						display: flex;
						align-items: center;
						gap: 16rpx;
						.rate-star {
							font-size: 40rpx;
							color: #E0E0E0;
							&.active {
								color: #FFD700;
							}
						}
						.rate-text {
							font-size: 28rpx;
							color: #666;
						}
					}
					.w48.h48 {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}

		.next-button {
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
			height: 88rpx;
			line-height: 88rpx;
			background: #388BFF;
			border-radius: 200rpx;
			margin: 32rpx;
		}

		/* 多选弹窗样式 */
		.u-popup-content {
			background: #fff;
			border-radius: 20rpx 20rpx 0 0;
			max-height: 80vh;
			display: flex;
			flex-direction: column;
			width: 100%;
		}

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;
			border-bottom: 1px solid #EBEDF0;
		}

		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.popup-close {
			font-size: 40rpx;
			color: #999;
			cursor: pointer;
		}

		.popup-body {
			padding: 32rpx;
			flex: 1;
			overflow-y: auto;
		}

		.tag-group {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;
		}

		.tag-item {
			padding: 16rpx 32rpx;
			border: 2rpx solid #DCDFE6;
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #666;
			cursor: pointer;
			transition: all 0.3s;
			white-space: nowrap;
		}

		.tag-item.active {
			background: #388BFF;
			border-color: #388BFF;
			color: #fff;
		}

		.popup-footer {
			display: flex;
		}

		.popup-btn {
			flex: 1;
			gap: 20rpx;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			border: none;
			font-size: 28rpx;
			cursor: pointer;
			border-radius: 40rpx;
		}

		.cancel-btn {
			background: #fff;
			color: #666;
			border: 2rpx solid #DCDFE6;
		}

		.confirm-btn {
			background: #388BFF;
			color: #fff;
		}
	}

	::v-deep .u-popup__content {
		border-radius: 40rpx 40rpx 0 0 !important;
	}


	.popup-content {
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		height: 70vh;
		background-color: #fff;

		.popup-header {
			padding: 40rpx 30rpx 20rpx;
			text-align: center;

			.close-icon {
				width: 44rpx;
				height: 44rpx;
				position: absolute;
				right: 32rpx;
			}

			flex-shrink: 0;

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

			.popup-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
		}

		.search-box {
			display: flex;
			align-items: center;
			background: #F7F8FA;
			border-radius: 38rpx;
			padding: 16rpx 28rpx;
			margin-bottom: 24rpx;

			.icon {
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
		}

		.project-list {
			height: calc(100% - 200rpx);

			.project-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 28rpx 0;
				font-size: 28rpx;
				border-bottom: 1rpx solid #eee;

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

				&.active {
					.project-name {
						font-weight: 500;
						color: #388BFF;
					}

					.icon {
						opacity: 1;
					}
				}

				.project-name {
					color: #333;
					transition: all 0.2s ease;
				}

				.icon {
					width: 36rpx;
					height: 36rpx;
					opacity: 0;
					transition: opacity 0.2s ease;
				}
			}
		}

		.two-level-container {
			display: flex;
			flex: 1;
			border-top: 1rpx solid #f5f5f5;

			.primary-list {
				width: 40%;
				background-color: #f8f9fa;

				.primary-item {
					padding: 28rpx 20rpx;
					background: #F2F3F5;

					&:active {
						background: #FFFFFF;
					}

					&.primary-active {
						position: relative;
						background-color: #fff;

						&::before {
							content: '';
							position: absolute;
							top: 50%;
							left: 0;
							transform: translateY(-50%);
							width: 8rpx;
							height: 32rpx;
							background: #388BFF;
						}

						.primary-text {
							font-weight: 500;
						}
					}

					.primary-text {
						font-size: 28rpx;
						color: #666;
					}
				}
			}

			.secondary-list {
				width: 60%;
				padding: 0 20rpx;

				.secondary-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 28rpx 10rpx;
					font-size: 28rpx;
					color: #333;

					&.secondary-active {
						font-weight: 500;
						color: #388BFF;
					}
				}
			}
		}

		.popup-footer {
			padding: 20rpx 30rpx 40rpx;
			background-color: #fff;
			border-top: 1rpx solid #f5f5f5;
			flex-shrink: 0;

			.confirm-btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background-color: #2979ff;
				color: #fff;
				font-size: 32rpx;
				border-radius: 200rpx 200rpx 200rpx 200rpx;

				&:active {
					opacity: 0.8;
				}
			}
		}
	}

	@media (prefers-color-scheme: dark) {
		.popup-content {
			background-color: #1e1e1e;

			.popup-header {

				.title,
				.popup-title {
					color: #fff;
				}
			}

			.two-level-container {
				.primary-list {
					background-color: #2d2d2d;
					border-right-color: #3d3d3d;

					.primary-item {
						border-bottom-color: #3d3d3d;

						&:active {
							background-color: #3d3d3d;
						}

						&.primary-active {
							background-color: #3d3d3d;

							.primary-text {
								color: #2979ff;
							}
						}

						.primary-text {
							color: #ccc;
						}
					}
				}

				.secondary-list {
					.secondary-item {
						border-bottom-color: #3d3d3d;

						&:active {
							background-color: #3d3d3d;
						}

						&.secondary-active {
							background-color: #2d2d2d;
						}

						.secondary-text {
							color: #fff;
						}
					}
				}
			}

			.popup-footer {
				background-color: #1e1e1e;
				border-top-color: #3d3d3d;
			}
		}
	}
</style>