<template>
	<view class="applyform">
		<u-form :model="submitForm" ref="submitForms" label-position="top" :label-width="140" :label-align="'left'"
			:error-type="['message']">
			<block v-for="(item,index) in course_forms">
				<u-form-item :label="item.name" :prop="item.field"
					:required="item.rule?item.rule.indexOf('required')!==-1:false">
					<block v-if="item.edit_input==='text'">
						<!-- <block v-if="item.field==='introduce'
						|| item.field==='company_product' || item.field==='company_introduce'">
							<u-input type="textarea" :placeholder="item.help?item.help:'请输入'" v-model="item.value" />
						</block> -->
						<u-input v-if="item.field==='company_name'" 
						@click="showCompanySelector = true" type="select" v-model="item.value" border :placeholder="item.help?item.help:'请选择公司名称'" />
						
						<u-input v-else :type="item.field==='introduce'||
						item.field==='company_fund'|| item.field==='company_product'||
						item.field==='company_introduce'?'textarea':'text'" maxlength="9999" :placeholder="item.help?item.help:'请输入'" v-model="item.value" />
					</block>
					<block v-if="item.edit_input==='textarea'">
						<!-- <block v-if="item.field==='introduce'
						|| item.field==='company_product' || item.field==='company_introduce'">
							<u-input type="textarea" :placeholder="item.help?item.help:'请输入'" v-model="item.value" />
						</block> -->
						<u-input :type="'textarea'" maxlength="9999" :placeholder="item.help?item.help:'请输入'" v-model="item.value" />
					</block>
					<block v-else-if="item.edit_input==='radio'">
						<u-input :placeholder="item.help?item.help:'请选择'" v-model="item.value" :type="'select'"
							@click="showSelect(item,index)" />
					</block>
					<block v-else-if="item.edit_input==='checkbox'">
						<u-input 
							:value="getCheckboxDisplayValue(item)" 
							:placeholder="item.help?item.help:'请选择'" 
							type="select" 
							@click="openCheckboxModal(item, index)"
							border
						/>
					</block>
					<block v-else-if="item.edit_input==='date'">
						<u-input :placeholder="item.help?item.help:'请选择'" v-model="item.value" :type="'select'"
							@click="showDate(item,index)" />
					</block>
					<block v-else-if="item.edit_input==='datetime'">
						<u-input :placeholder="item.help?item.help:'请选择'" v-model="item.value" :type="'select'"
							@click="showDateTime(item,index)" />
					</block>
					<block v-else-if="item.edit_input==='files'">
						<view class="file-upload-wrapper">
							<view class="file-upload-btn" @click="chooseFile(item)">
								<u-icon name="plus" size="40" color="#2979ff" />
								<text class="file-upload-btn__text">上传文件</text>
							</view>
							<!-- 文件/图片列表展示 -->
							<view
								class="file-list"
								v-if="item.fileListArr && item.fileListArr.length > 0"
							>
								<block v-for="(file, fIndex) in item.fileListArr" :key="fIndex">
									<!-- 图片预览 -->
									<view
										v-if="isImageFile(file)"
										class="file-list__image-wrapper"
										@click="previewImageFile(file, item)"
									>
										<image
											class="file-list__image"
											:src="getFileUrl(file)"
											mode="aspectFill"
										/>
										<view class="file-list__delete" @click.stop="removeFile(fIndex, item)">
											<u-icon name="close" size="20" color="#fff" />
										</view>
									</view>
									<!-- 普通文件预览 -->
									<view
										v-else
										class="file-list__file"
									>
										<u-icon name="file-text" size="36" color="#2979ff" />
										<text class="file-list__file-name">{{ getFileName(file) }}</text>
										<view class="file-list__delete" @click.stop="removeFile(fIndex, item)">
											<u-icon name="close" size="20" color="#fff" />
										</view>
									</view>
								</block>
							</view>
						</view>
					</block>
				</u-form-item>
			</block>
		</u-form>
		<view class="form-btn">
			<view @click="submit" type="primary">提交</view>
		</view>
		<!-- 单选 -->
		<u-picker @confirm="selectConfirm" v-model="selectShow" :range="selectList" range-key="value"
			mode="selector"></u-picker>
		<!-- 日期 -->
		<u-picker @confirm="dateConfirm" mode="time" v-model="dateShow" :params="dateParams"></u-picker>
		<!-- 日期时间 -->
		<u-picker @confirm="dateTimeConfirm" mode="time" v-model="dateTimeShow" :params="dateTimeParams"></u-picker>
		<!-- 公司选择器 -->
		<company-selector v-model="showCompanySelector" @confirm="handleCompanyConfirm" @no-data="handleNoCompanyData"></company-selector>
		<!-- 手动输入公司名称 -->
		<view class="modal">
			<u-popup v-model="showCompanyInput" mode="bottom">
				<view class="modal-tip">输入公司名称</view>
				<view class="modal-content" style="height:400rpx">
					<view class="login-form">
						<view>
							<u-input :custom-style="inputStyle" :clearable="true" v-model="manualCompanyName"
								placeholder="请输入公司全称"></u-input>
						</view>
					</view>
				</view>
				<view class="form-btn">
					<view @click="confirmManualCompany" type="primary">确定</view>
				</view>
			</u-popup>
		</view>
		<!-- 多选弹窗 -->
		<u-popup v-model="showCheckboxModal" mode="bottom" border-radius="20">
			<view class="checkbox-modal">
				<view class="checkbox-modal__header">
					<text class="checkbox-modal__title">{{ currentCheckboxItem.name || '请选择' }}</text>
					<text class="checkbox-modal__close" @click="showCheckboxModal = false">完成</text>
				</view>
				<scroll-view 
					class="checkbox-modal__content" 
					scroll-y="true"
					:style="{ height: checkboxContentHeight + 'px' }"
				>
					<checkbox-group @change="(e)=>{checkboxGroupChange(e, currentCheckboxItem)}">
						<label 
							class="checkbox-modal__item" 
							v-for="(checkboxitem, checkboxindex) in currentCheckboxItem.select_item" 
							:key="checkboxindex"
						>
							<checkbox 
								class="checkbox-modal__control" 
								:value="checkboxitem.value" 
								:checked="checkboxitem.checked" 
							/>
							<text class="checkbox-modal__label">{{checkboxitem.value}}</text>
						</label>
					</checkbox-group>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import { watch } from "vue"
	import {
		ROOTPATH as baseUrl
	} from "@/common/config.js"
	import CompanySelector from '@/components/company-selector/company-selector.vue'
	export default {
		components: {
			CompanySelector
		},
		props: {
			course_forms: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
			showCompanySelector: false,
				showCompanyInput: false,
				manualCompanyName: '',
				submitForm: {},
				now_fileld: 0, // 当前所操作的 filed index值 
				// 单选
				selectShow: false,
				selectList: [],
				// 多选弹窗
				showCheckboxModal: false,
				currentCheckboxItem: {},
				currentCheckboxIndex: 0,
				checkboxContentHeight: 400, // 多选弹窗内容区域高度，单位px
				// 日期
				dateShow: false,
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				// 日期时间
				dateTimeShow: false,
				dateTimeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				// 文件上传
				action: `${baseUrl}/api/mobile/upload-file`,
				fileList: [],
				formData: {},
				rules: {},
				// 手动输入公司名称样式
				inputStyle: {
					'padding': '0rpx 30rpx',
					'height': '80rpx',
					'border': '1rpx solid #dad8d8;',
					'border-radius': '20rpx'
				},


			}
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
			let token = uni.getStorageSync("stbc1_lifeData").vuex_token
			console.log("token", token)
			this.formData = {
				token: token
			}
			this.calculateCheckboxHeight()
		},
		onLoad() {

		},
		methods: {
			// 处理公司选择确认事件
			handleCompanyConfirm(company) {
				console.log('选中的公司:', company);
				this.course_forms.map(item1 => {
					if (item1.field === 'company_name') {
						this.$set(item1,'value',company.enterpriseName||'')
					}
					if (item1.field === 'company_date') {
						this.$set(item1,'value',company.startDate||'')
					}
					if (item1.field === 'company_product') {
						this.$set(item1,'value',company.businessScope||'')
					}
					if (item1.field === 'company_type') {
						const company_type = company.tagList && Array.isArray(company.tagList)?company.tagList.join(','):''
						const _arr = company_type.split(',')
						this.$set(item1,'value',company_type)
						item1.select_item.forEach(item2 => {
							console.log("item2",item2)
							// 检查 item.value 是否存在于数组 b 中
							const exists = _arr.includes(item2.value);
							// 根据检查结果设置 checked 属性
							item2.checked = exists;
							this.$set(item2,'checked',exists)
						});
						
					}
					if (item1.field === 'company_area') {
						this.$set(item1,'value',company.country||'')
					}
					if (item1.field === 'company_address') {
						this.$set(item1,'value',company.address||'')
					}
					if (item1.field === 'is_yuanhe') {
						this.$set(item1,'value',company.isYhInvested?'是':'否')
					}
				})
				console.log("this.course_forms",this.course_forms)
			},
			// 处理搜索无数据事件
			handleNoCompanyData(searchKeyword) {
				uni.showModal({
					title: '提示',
					content: '当前没有查询到公司信息，是否输入公司全称？',
					success: (res) => {
						if (res.confirm) {
							// 关闭搜索窗口
							this.showCompanySelector = false;
							// 设置默认值为搜索关键词
							this.manualCompanyName = searchKeyword || '';
							// 打开输入框
							this.showCompanyInput = true;
						}
					}
				});
			},
			// 确认手动输入的公司名称
			confirmManualCompany() {
				if (this.base.isNull(this.manualCompanyName)) {
					this.base.toast('请输入公司名称');
					return;
				}
				// 将输入的公司名称赋给 course_forms 中 field === 'company_name' 的项的 value
				this.course_forms.map(item1 => {
					if (item1.field === 'company_name') {
						this.$set(item1, 'value', this.manualCompanyName.trim());
					}
				});
				// 关闭输入框
				this.showCompanyInput = false;
				// 清空输入
				this.manualCompanyName = '';
			},
			// 单选
			showSelect(item, index) {
				this.selectList = item.select_item
				this.now_fileld = index
				this.selectShow = true
			},
			selectConfirm(e) {
				this.course_forms[this.now_fileld]['value'] = this.selectList[e[0]].value
			},
			// 多选 - 获取显示值
			getCheckboxDisplayValue(item) {
				if (!item.value || this.base.isNull(item.value)) {
					return ''
				}
				const selectedValues = item.value.split(',')
				// 最多显示3个，超过显示"等X项"
				if (selectedValues.length <= 3) {
					return selectedValues.join('、')
				} else {
					return selectedValues.slice(0, 3).join('、') + `等${selectedValues.length}项`
				}
			},
			// 显示多选弹窗
			openCheckboxModal(item, index) {
				this.currentCheckboxItem = item
				this.currentCheckboxIndex = index
				this.showCheckboxModal = true
				this.$nextTick(() => {
					this.calculateCheckboxHeight()
				})
			},
			// 计算多选弹窗内容区域高度
			calculateCheckboxHeight() {
				uni.getSystemInfo({
					success: (res) => {
						// 屏幕高度的 60%，减去 header 的高度
						const maxHeight = res.windowHeight * 0.6
						// header 大约 100rpx，转换为 px
						const headerHeight = 100 * (res.windowWidth / 750)
						// content 高度 = 最大高度 - header - 底部 padding
						this.checkboxContentHeight = maxHeight - headerHeight - 80
					}
				})
			},
			// 多选
			checkboxGroupChange(e, item) {
				const selectedValues = e.detail.value || []
				if (selectedValues.length > 0) {
					item.value = selectedValues.join(",")
				} else {
					item.value = ''
				}
				// 更新checked状态
				item.select_item.forEach(option => {
					option.checked = selectedValues.includes(option.value)
					this.$set(option, 'checked', selectedValues.includes(option.value))
				})
			},
			// 日期
			showDate(item, index) {
				this.now_fileld = index
				this.dateShow = true
			},
			dateConfirm(e) {
				console.log("date", e)
				this.course_forms[this.now_fileld]['value'] = e.year + '-' + e.month + '-' + e.day
			},
			// 日期时间
			showDateTime(item, index) {
				this.now_fileld = index
				this.dateTimeShow = true
			},
			dateTimeConfirm(e) {
				console.log("date", e)
				this.course_forms[this.now_fileld]['value'] = e.year + '-' + e.month + '-' + e.day +
					' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			// 根据文件对象获取真实 url
			getFileUrl(file) {
				if (!file) return ''
				let url = ''
				if (file.response && file.response.url) {
					url = file.response.url
				} else if (file.url) {
					url = file.url
				}
				// 如果是相对路径，补全域名
				if (url && url.indexOf('http') !== 0) {
					url = baseUrl + url
				}
				return url || ''
			},
			// 判断是否为图片文件
			isImageFile(file) {
				if (!file) return false
				const url = this.getFileUrl(file)
				if (!url) return false
				return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url)
			},
			// 预览图片
			previewImageFile(file, item) {
				const current = this.getFileUrl(file)
				const urls = (item.fileListArr || [])
					.filter(f => this.isImageFile(f))
					.map(f => this.getFileUrl(f))
				if (!urls.length) return
				uni.previewImage({
					current,
					urls
				})
			},
			// 获取文件名
			getFileName(file) {
				// 优先使用 original_name，其次使用 name，最后从 url 提取
				if (file.response && file.response.original_name) {
					return file.response.original_name
				}
				if (file.name) {
					return file.name
				}
				const url = this.getFileUrl(file)
				if (!url) return '未知文件'
				const parts = url.split('/')
				return parts[parts.length - 1]
			},
			// 打开普通文件（pdf/doc/xls 等）
			openFile(file) {
				const url = this.getFileUrl(file)
				if (!url) return
				uni.showLoading({
					title: '打开中...',
					mask: true
				})
				uni.downloadFile({
					url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.openDocument({
								filePath: res.tempFilePath,
								success: () => {},
								fail: (err) => {
									console.error('openDocument 失败', err)
									this.base && this.base.toast && this.base.toast('无法打开文件')
								},
								complete: () => {
									uni.hideLoading()
								}
							})
						} else {
							uni.hideLoading()
							this.base && this.base.toast && this.base.toast('文件下载失败')
						}
					},
					fail: (err) => {
						console.error('downloadFile 失败', err)
						uni.hideLoading()
						this.base && this.base.toast && this.base.toast('文件下载失败')
					}
				})
			},
			// 选择文件（支持图片和普通文件）
			chooseFile(item) {
				uni.showActionSheet({
					itemList: ['选择图片', '选择文件'],
					success: (res) => {
						if (res.tapIndex === 0) {
							// 选择图片
							uni.chooseImage({
								count: 9 - (item.fileListArr ? item.fileListArr.length : 0),
								success: (res) => {
									this.uploadFiles(res.tempFilePaths, item, 'image')
								}
							})
						} else if (res.tapIndex === 1) {
							// 选择文件 - 使用平台特定的API
							const maxCount = 9 - (item.fileListArr ? item.fileListArr.length : 0)
							// #ifdef MP-WEIXIN
							// 微信小程序使用 wx.chooseMessageFile
							if (typeof wx !== 'undefined' && wx.chooseMessageFile) {
								wx.chooseMessageFile({
									count: maxCount,
									type: 'file',
									success: (res) => {
										const filePaths = res.tempFiles.map(f => f.path)
										this.uploadFiles(filePaths, item, 'file')
									},
									fail: (err) => {
										console.error('选择文件失败', err)
										this.base && this.base.toast && this.base.toast('选择文件失败')
									}
								})
							} else {
								// 降级方案：提示用户使用图片选择
								uni.showModal({
									title: '提示',
									content: '当前平台暂不支持选择文件，请使用图片上传功能',
									showCancel: false
								})
							}
							// #endif
							// #ifndef MP-WEIXIN
							// 其他平台尝试使用 uni.chooseFile（如果支持）
							if (typeof uni.chooseFile === 'function') {
								uni.chooseFile({
									count: maxCount,
									success: (res) => {
										const filePaths = res.tempFiles ? res.tempFiles.map(f => f.path) : []
										this.uploadFiles(filePaths, item, 'file')
									},
									fail: (err) => {
										console.error('选择文件失败', err)
										// 降级：使用图片选择API
										uni.showModal({
											title: '提示',
											content: '当前平台暂不支持选择文件，请使用图片上传功能',
											showCancel: false
										})
									}
								})
							} else {
								// 不支持文件选择，提示用户
								uni.showModal({
									title: '提示',
									content: '当前平台暂不支持选择文件，请使用图片上传功能',
									showCancel: false
								})
							}
							// #endif
						}
					}
				})
			},
			// 上传文件
			uploadFiles(filePaths, item, type) {
				// 找到对应的 course_forms 中的 item
				const formItem = this.course_forms.find(f => f.field === item.field)
				if (!formItem) {
					console.error('找不到对应的表单字段', item.field)
					return
				}
				
				if (!formItem.fileListArr) {
					this.$set(formItem, 'fileListArr', [])
				}
				
				let uploadCount = 0
				let successCount = 0
				const totalCount = filePaths.length
				
				if (totalCount === 0) return
				
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				
				filePaths.forEach((filePath, index) => {
					uni.uploadFile({
						url: this.action,
						filePath: filePath,
						name: 'file',
						formData: this.formData,
						success: (res) => {
							uploadCount++
							try {
								const result = JSON.parse(res.data)
								// 兼容两种返回格式：
								// 1. 直接返回对象 {id, url, ...}
								// 2. 包装格式 {code: 200, data: {id, url, ...}}
								let data = result
								if (result.code === 200 && result.data) {
									data = result.data
								}
								
								if (data && data.url) {
									const fileObj = {
										url: data.url,
										response: data,
										name: data.original_name || filePath.split('/').pop()
									}
									// 确保 fileListArr 存在
									if (!formItem.fileListArr) {
										this.$set(formItem, 'fileListArr', [])
									}
									// 使用 Vue.set 确保响应式更新
									formItem.fileListArr.push(fileObj)
									// 强制触发视图更新 - 创建新数组引用
									this.$set(formItem, 'fileListArr', formItem.fileListArr.slice())
									// 强制更新视图
									this.$forceUpdate()
									successCount++
									
									console.log('上传成功', fileObj)
									console.log('formItem.fileListArr', formItem.fileListArr)
									console.log('formItem.field', formItem.field)
									console.log('item.field', item.field)
								} else {
									console.error('上传响应格式错误，缺少url字段', result)
									if (uploadCount === totalCount) {
										this.base && this.base.toast && this.base.toast('部分文件上传失败')
									}
								}
							} catch (e) {
								console.error('解析上传响应失败', e, res.data)
								if (uploadCount === totalCount) {
									this.base && this.base.toast && this.base.toast('部分文件上传失败')
								}
							}
							
							// 所有文件上传完成
							if (uploadCount === totalCount) {
								uni.hideLoading()
								if (successCount > 0) {
									this.base && this.base.toast && this.base.toast(`成功上传${successCount}个文件`)
								}
							}
						},
						fail: (err) => {
							uploadCount++
							console.error('上传失败', err)
							if (uploadCount === totalCount) {
								uni.hideLoading()
								this.base && this.base.toast && this.base.toast('上传失败')
							}
						}
					})
				})
			},
			// 删除文件
			removeFile(index, item) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这个文件吗？',
					success: (res) => {
						if (res.confirm) {
							// 找到对应的 course_forms 中的 item
							const formItem = this.course_forms.find(f => f.field === item.field)
							if (formItem && formItem.fileListArr) {
								formItem.fileListArr.splice(index, 1)
								// 强制触发视图更新
								this.$set(formItem, 'fileListArr', [...formItem.fileListArr])
								console.log('删除文件后', formItem.fileListArr)
							}
						}
					}
				})
			},
			// 提交
			submit() {
				console.log("course_forms", this.course_forms)
				let errorCount = 0
				this.course_forms.map(item => {
					if (item.rule) {
						// 不能为空
						if (item.rule.indexOf('required') !== -1) {
							if (this.base.isNull(item.value)) {
								this.base.toast(`${item.name}不能为空`)
								errorCount++
								return
							}
						}
						// 手机号
						if (!this.base.isNull(item.value) && item.rule.indexOf('mobile') !== -1) {
							if (!this.base.isMobile(item.value)) {
								this.base.toast(`${item.name}不正确`)
								errorCount++
								return
							}
						}
						// 身份证
						if (!this.base.isNull(item.value) && item.rule.indexOf('idcard') !== -1) {
							if (!this.$u.test.idCard(item.value)) {
								this.base.toast(`${item.name}不正确`)
								errorCount++
								return
							}
						}
						// 邮箱
						if (item.rule.indexOf('email') !== -1) {
							if (!this.base.isNull(item.value) && !this.base.isMail(item.value)) {
								this.base.toast(`${item.name}不正确`)
								errorCount++
								return
							}
						}
						// 整数
						if (item.rule.indexOf('integer') !== -1) {
							if (!this.base.isNull(item.value) && !this.base.isInteger(item.value)) {
								this.base.toast(`${item.name}必须为整数`)
								errorCount++
								return
							}
						}
						// 数字
						if (item.rule.indexOf('numeric') !== -1) {
							if (!this.base.isNull(item.value) && !this.base.isNumber(item.value)) {
								this.base.toast(`${item.name}必须为数字`)
								errorCount++
								return
							}
						}
					}
					
					// 文件上传处理
					if(item.edit_input==='files'){
						let valueArr = []
						let fileListArr = []
						console.log("item.fileListArr",item.fileListArr)
						if(item.fileListArr && item.fileListArr.length>0){
							item.fileListArr.map(f=>{
								if(f.response){
									valueArr.push(f.response.url.replace(baseUrl, ''))
									fileListArr.push(f.response)
								}else{
									valueArr.push(f.url.replace(baseUrl, ''))
									fileListArr.push(f)
								}
							})
						}else{
							item.fileListArr = []
						}
						item.value = valueArr.join(",")
						item.fileList = fileListArr
						console.log("submit---",valueArr,fileListArr)
					}
				})
				if (errorCount > 0) {
					return
				} else {
					// return
					this.$emit("backForm", this.course_forms)
				}
			},
		},
		watch: {
			course_forms(newval) {
				if (newval) {
					// 验证规则
					let that = this
					let _rule = {}
					newval.map(item => {
						if (item.edit_input === 'checkbox') {
							// 修改有值的时候 先split
							let _arr = []
							if (!this.base.isNull(item.value)) {
								_arr = item.value.split(",")
								console.log("_arr", _arr)
								item.select_item.forEach(item1 => {
									// 检查 item.value 是否存在于数组 b 中
									const exists = _arr.includes(item1.value);
									// 根据检查结果设置 checked 属性
									item1.checked = exists;
								});
							}
						}
						if (item.edit_input === 'files') {
							item.fileListArr = this.base.deepCopy(item.fileList)
						}
					})

				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.applyform {
		position: relative;
		z-index: 99
	}

	.form-btn {
		width: 100%;
		position: relative;
		padding: 60rpx 0;

		&>view {
			width: 70%;
			text-align: center;
			margin: 0 auto;
			color: #fff;
			background: linear-gradient(to right, #5e5fbc, #0d0398);
			border-radius: 30rpx;
			padding: 20rpx;
		}
	}

	.modal {
		::v-deep .u-drawer-bottom {
			border-radius: 40rpx;
		}

		&-tip {
			text-align: center;
			padding: 30rpx;
			font-size: 32rpx;
		}

		&-content {
			padding: 0 30rpx;
		}
	}

	.login-form {
		margin: 100rpx 50rpx;

		&>view {
			border-radius: 20rpx;
		}
	}

	/* 多选项布局优化 */
	.checkbox-group {
		display: flex;
		flex-wrap: wrap;
	}

	.checkbox-item {
		width: 48%;
		margin-bottom: 16rpx;
		display: flex;
		align-items: center;
		padding: 12rpx 20rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		border: 1rpx solid #e0e0e0;
		background-color: #f9f9f9;
	}

	.checkbox-item__control {
		transform: scale(0.9);
	}

	.checkbox-item__label {
		margin-left: 12rpx;
		font-size: 26rpx;
		color: #333;
	}

	/* 多选弹窗样式 */
	.checkbox-modal {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		max-height: 80vh;

		&__header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
		}

		&__title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}

		&__close {
			font-size: 28rpx;
			color: #2979ff;
		}

		&__content {
			padding: 20rpx 30rpx 40rpx;
			box-sizing: border-box;
		}

		&__item {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
			padding-left: 10rpx; // 增加左侧 padding，确保 checkbox 不被遮挡
			border-bottom: 1rpx solid #f5f5f5;
			box-sizing: border-box;

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

		&__control {
			transform: scale(1.1);
			flex-shrink: 0; // 防止 checkbox 被压缩
		}

		&__label {
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #333;
			flex: 1;
		}
	}

	/* 文件上传样式 */
	.file-upload-wrapper {
		width: 100%;
	}

	.file-upload-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 160rpx;
		height: 160rpx;
		border: 2rpx dashed #d0d0d0;
		border-radius: 12rpx;
		background-color: #fafafa;
		margin-bottom: 20rpx;

		&__text {
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #666;
		}
	}

	.file-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-top: 20rpx;

		&__image-wrapper {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			border-radius: 12rpx;
			overflow: hidden;
		}

		&__image {
			width: 100%;
			height: 100%;
		}

		&__file {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 160rpx;
			height: 160rpx;
			border: 1rpx solid #e0e0e0;
			border-radius: 12rpx;
			background-color: #f9f9f9;
			padding: 20rpx;
			box-sizing: border-box;
		}

		&__file-name {
			margin-top: 10rpx;
			font-size: 22rpx;
			color: #666;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 100%;
		}

		&__delete {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			width: 40rpx;
			height: 40rpx;
			background-color: #ff4444;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>