<template>
	<view class="complete-page">
		<!-- 顶部导航栏 -->
		<custom-navbar :title="identity == '1' ? '个人资料' : '店铺资料'" :show-back="true"></custom-navbar>

		<!-- 表单内容 -->
		<view class="form-content">
			<!-- 个人信息标题 -->
			<view class="section-title">
				<view class="title-bar"></view>
				<text>{{identity == '1' ? '个人信息' : '店铺信息'}}</text>
			</view>

			<!-- 工装头像 -->
			<view class="form-item box-cont">
				<text class="label required">{{identity == '1' ? '工装头像' : '店铺logo'}}</text>
				<view class="upload-box" @click="chooseImage('avatar')">
					<image v-if="formData.head_photo" :src="formData.head_photo" mode="aspectFill" class="avatar-image">
					</image>
					<image src="/static/images/upload-img.png" mode="aspectFit" class="upload-img" v-else></image>
				</view>
				<text class="upload-tip"
					v-if="identity == '1'">注:头像即为服务人寰形象照，是用户下单选择服务人员时的重要参考，请上传正面半身免冠照。尺寸需大于750*750像素，背景为浅色</text>
			</view>

			<!-- 真实姓名 -->
			<view class="form-item-one box-cont">
				<text class="label required">{{identity == '1' ? '真实姓名' : '店铺名称'}}</text>
				<input type="text" v-model="formData.name" :placeholder="identity == '1' ? '请输入真实姓名' : '请输入店铺名称'"
					placeholder-class="placeholder" class="input" />
			</view>
			<view class="form-item-one box-cont" v-if="identity == '2'">
				<text class="label required">法人姓名</text>
				<input type="text" v-model="formData.legal_name" placeholder="请输入法人姓名" placeholder-class="placeholder"
					class="input" />
			</view>
			<!-- 联系方式 -->
			<view class="form-item-one box-cont" v-if="identity == '1'">
				<text class="label required">联系方式</text>
				<input type="number" v-model="formData.account" placeholder="请输入联系方式" disabled
					placeholder-class="placeholder" class="input disabled" />
			</view>
			<view class="form-item-one box-cont" v-else>
				<text class="label required">法人联系方式</text>
				<input type="number" v-model="formData.legal_phone" placeholder="请输入法人联系方式"
					placeholder-class="placeholder" class="input" />
			</view>

			<!-- 身份证号码 -->
			<view class="box-cont form-upimgs" v-if="identity == '1'">
				<view class="form-item-one form-item-tit">
					<text class="label required">身份证号码</text>
					<input type="idcard" v-model="formData.idcard_num" placeholder="请输入身份号码"
						placeholder-class="placeholder" class="input" />
				</view>
				<!-- 身份证照片 -->
				<view class="form-upimg">
					<view class="upload-box" @click="chooseImage('idcard_positive')">
						<view class="upload-camera img1">
							<image v-if="formData.idcard_positive" :src="formData.idcard_positive" mode="aspectFill"
								class="preview-image"></image>
							<image v-else src="/static/images/camera.png" mode="aspectFit" class="camera-icon"></image>
						</view>
					</view>
					<text class="label required">请上传身份证正面(人像面)</text>
				</view>

				<view class="form-upimg">
					<view class="upload-box" @click="chooseImage('idcard_negative')">
						<view class="upload-camera img2">
							<image v-if="formData.idcard_negative" :src="formData.idcard_negative" mode="aspectFill"
								class="preview-image"></image>
							<image v-else src="/static/images/camera.png" mode="aspectFit" class="camera-icon"></image>
						</view>
					</view>
					<text class="label required">请上传身份证反面(国徽面)</text>
				</view>


				<!-- 手持身份证照 -->
				<view class="form-upimg">
					<view class="upload-box" @click="chooseImage('idcard_hands')">
						<view class="upload-camera img3">
							<image v-if="formData.idcard_hands" :src="formData.idcard_hands" mode="aspectFill"
								class="preview-image"></image>
							<image v-else src="/static/images/camera.png" mode="aspectFit" class="camera-icon"></image>
						</view>
					</view>
					<text class="label required">手持身份证照</text>
				</view>

				<!-- 健康证照片 -->
				<view class="form-upimg">
					<view class="upload-box" @click="chooseImage('health_card')">
						<view class="upload-camera img4">
							<image v-if="formData.health_card" :src="formData.health_card" mode="aspectFill"
								class="preview-image"></image>
							<image v-else src="/static/images/camera.png" mode="aspectFit" class="camera-icon"></image>
						</view>
					</view>
					<text class="label required">请上传健康照</text>
				</view>
			</view>
			<!-- 商家法人区域 -->
			<view class="box-cont form-upimgs" v-else>
				<view class="form-item-one form-item-tit">
					<text class="label required">法人身份证号码</text>
					<input type="idcard" v-model="formData.legal_idcard_num" placeholder="请输入法人身份号码"
						placeholder-class="placeholder" class="input" />
				</view>
				<!-- 身份证照片 -->
				<view>
					<view class="form-upimg">
						<view class="upload-box" @click="chooseImage('legal_idcard_positive')">
							<view class="upload-camera img1">
								<image v-if="formData.legal_idcard_positive" :src="formData.legal_idcard_positive"
									mode="aspectFill" class="preview-image"></image>
								<image v-else src="/static/images/camera.png" mode="aspectFit" class="camera-icon">
								</image>
							</view>
						</view>
						<text class="label required">请上传法人身份证正面(人像面)</text>
					</view>

					<view class="form-upimg">
						<view class="upload-box" @click="chooseImage('legal_idcard_negative')">
							<view class="upload-camera img2">
								<image v-if="formData.legal_idcard_negative" :src="formData.legal_idcard_negative"
									mode="aspectFill" class="preview-image"></image>
								<image v-else src="/static/images/camera.png" mode="aspectFit" class="camera-icon"></image>
							</view>
						</view>
						<text class="label required">请上传法人身份证反面(国徽面)</text>
					</view>
				</view>


			</view>
			<!-- 营业执照 -->
			<view class="box-cont form-upimgs form-upimg">
				<view class="upload-box" @click="chooseImage('uscc_photo')">
					<view class="upload-camera img4">
						<image v-if="formData.uscc_photo" :src="formData.uscc_photo" mode="aspectFill"
							class="preview-image"></image>
						<image v-else src="/static/images/camera.png" mode="aspectFit" class="camera-icon"></image>
					</view>
				</view>
				<text class="label required">请上传营业执照</text>
			</view>

			<!-- 门头照片 -->
			<view class="box-cont form-upimgs form-upimg" v-if="identity == '1'">
				<view class="upload-box" @click="chooseImage('shop_photo')">
					<view class="upload-camera img4">
						<image v-if="formData.shop_photo" :src="formData.shop_photo" mode="aspectFill"
							class="preview-image"></image>
						<image v-else src="/static/images/camera.png" mode="aspectFit" class="camera-icon"></image>
					</view>
				</view>
				<text class="label required">请上传门头照片</text>
			</view>
			<!-- 资质证书 -->
			<view class="section-card box-cont" v-if="identity == '1'">
				<text class="label">请上传资质照片</text>
				<view class="upload-grid">
					<!-- <image 
	        v-for="(item, index) in formData.qualifications" 
	        :key="index"
	        :src="item"
	        class="upload-image"
	        mode="aspectFill"
	        @click="previewImage(item, formData.qualifications)"
	      ></image>
	      <view 
	        class="upload-item" 
	        @click="chooseImage('qualifications')"
	        v-if="formData.qualifications.length < 9"
	      >
	        <image src="/static/images/upload-img.png" class="upload-icon" mode="aspectFit"></image>
	      </view> -->
					<ali-oss-uploader v-model="formData.qualifications" :max-count="9" :max-size="5" :width="'668rpx'"
						:type="identity+1" :user-id="userId" button-text="上传图片" tips="最多上传3张图片，每张不超过5MB"
						@success="onUploadSuccess" @error="onUploadError" @delete="onFileDelete"
						@ckeckisShowPer="ckeckisShowPer" @ckecknowQer="ckecknowQer">
					</ali-oss-uploader>
				</view>
			</view>

			<!-- 个人介绍 -->
			<view class="form-item-data box-cont" v-if="identity == '1'">
				<text class="label required">个人介绍</text>
				<textarea v-model="formData.detail" placeholder="请输入个人介绍" placeholder-class="placeholder"
					class="textarea-input" />
			</view>

			<!-- 所在地 -->
			<view class="form-item-two box-cont" @click="openPicker('dependency')">
				<text class="label required">所在地</text>
				<view class="picker-content">
					<text
						:class="formData.dependency ? 'picker-value' : 'placeholder'">{{formData.dependency || '请选择'}}</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 详细地址 -->
			<view class="form-item-two box-cont">
				<text class="label required">详细地址</text>
				<!-- <input 
          type="text"
          v-model="formData.address"
          placeholder="请输入详细地址"
          placeholder-class="placeholder"
          class="input"
        /> -->
				<view class="picker-content" @click="getAddressInfo">
					<text
						:class="formData.address ? 'picker-value' : 'placeholder'">{{formData.address || '请选择'}}</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 备用联系方式 -->
			<view class="form-item-one box-cont" v-if="identity == '1'">
				<text class="label required">备用联系方式</text>
				<input type="text" v-model="formData.second_phone" placeholder="请输入备用联系方式"
					placeholder-class="placeholder" class="input" />
			</view>
			<!-- 所属店铺 -->
			<view class="form-item-one box-cont" v-if="identity == '1'">
				<text class="label required">所属店铺</text>
				<input type="text" v-model="formData.for_shop" placeholder="请输入所属店铺" placeholder-class="placeholder"
					class="input" />
			</view>
			<!-- 获取消息方式 -->
			<view class="form-item-two box-cont" @click="openPicker('get_msg_method')">
				<text class="label required">获取消息方式</text>
				<view class="picker-content">
					<text
						:class="formData.get_msg_method ? 'picker-value' : 'placeholder'">{{get_msg_method || '请选择'}}</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 邀请码 -->
			<view class="box-cont">
				<view class="form-item-one form-item-tit">
					<text class="label required">邀请码</text>
					<input type="text" v-model="formData.invite_code_other" placeholder="请输入邀请码"
						placeholder-class="placeholder" class="input" />
				</view>
				<text class="invite-tip">请填写邀请人的邀请码，若没有邀请人请填写13131313</text>
			</view>


			<!-- 服务承诺标题 -->
			<view class="section-title">
				<view class="title-bar"></view>
				<text>服务承诺</text>
			</view>

			<!-- 服务技能 -->
			<view class="form-item-two box-cont" @click="showServicePopup">
				<text class="label required">服务技能</text>
				<view class="picker-content">
					<text
						:class="formData.servers_kill.length != 0 ? 'picker-value' : 'placeholder'">{{selectedServicesText || '请选择'}}</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 服务区域 -->
			<view class="form-item-two box-cont" @click="showRegionPopup" v-if="identity == '1'">
				<text class="label required">服务区域</text>
				<view class="picker-content">
					<text
						:class="formData.servers_region.length != 0 ? 'picker-value' : 'placeholder'">{{selectedRegionText || '请选择'}}</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 服务时间 -->
			<view class="form-item-two box-cont" v-if="identity == '1'" @click="openPicker('default_times')">
				<text class="label required">服务时间</text>
				<view class="picker-content">
					<text
						:class="formData.default_times ? 'picker-value' : 'placeholder'">{{formData.default_times || '请选择'}}</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>
			</view>
			<view class="form-item-two box-cont" v-else @click="openPicker('default_times')">
				<text class="label required">营业时间</text>
				<view class="picker-content">
					<text
						:class="formData.business_time ? 'picker-value' : 'placeholder'">{{formData.business_time || '请选择'}}</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 专业经验 -->
			<view class="form-item-two box-cont" @click="openPicker('major')">
				<text class="label required">专业经验</text>
				<view class="picker-content">
					<text :class="formData.major ? 'picker-value' : 'placeholder'">{{major || '请选择'}}</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 目前工作状态 -->
			<view class="form-item-two box-cont" @click="openPicker('work_state')" v-if="identity == '1'">
				<text class="label required">目前工作状态</text>
				<view class="picker-content">
					<text :class="formData.work_state ? 'picker-value' : 'placeholder'">{{work_state || '请选择'}}</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 服务承诺说明 -->
			<view class="service-promise">
				<view class="promise-title">服务承诺</view>
				<view class="promise-item" v-if="identity == '1'">
					<view class="dot"></view>
					<text class="promise-text">因工作照及身份证需作为审核依据，拍摄照片时，请勿开美颜/滤镜等，以确保照片内容清晰真实。</text>
				</view>
				<view class="promise-item">
					<view class="dot"></view>
					<text class="promise-text">审核通过，即可平台进行接单，请严格遵守相关法律法规，秉承为用户提供的最大理念，细致、热情、负责为用户提供服务。</text>
				</view>
			</view>

			<!-- 服务技能弹出框 -->
			<view class="popup" :class="{ show: showServicePopupFlag }">
				<view class="popup-mask" @click="hideServicePopup"></view>
				<view class="popup-content">
					<view class="popup-header">
						<text class="popup-title">选择服务技能</text>
						<text class="popup-close" @click="hideServicePopup">×</text>
					</view>
					<view class="popup-body">
						<view class="checkbox-list">
							<view class="checkbox-item" v-for="(item, index) in serviceList" :key="index"
								@click="toggleServiceSelect(index)">
								<view class="checkbox" :class="{ checked: item.checked }">
									<text class="check-icon" v-if="item.checked">✓</text>
								</view>
								<text class="checkbox-label">{{item.title}}</text>
							</view>
						</view>
					</view>
					<view class="popup-footer">
						<view class="popup-btn cancel" @click="hideServicePopup">
							<text class="btn-text">取消</text>
						</view>
						<view class="popup-btn confirm" @click="confirmServiceSelect">
							<text class="btn-text">确定</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 省市区选择弹出框 -->
			<view class="popup" :class="{ show: showRegionPopupFlag }">
				<view class="popup-mask" @click="hideRegionPopup"></view>
				<view class="popup-content region-popup">
					<view class="popup-header">
						<text class="popup-title">选择服务区域</text>
						<text class="popup-close" @click="hideRegionPopup">×</text>
					</view>
					<view class="region-tabs">
						<view v-for="(tab, index) in regionTabs" :key="index" class="region-tab"
							:class="{ active: currentTab === index }" @click="switchTab(index)">
							{{tab}}
						</view>
					</view>
					<view class="region-body">
						<scroll-view scroll-y class="region-scroll" v-if="currentTab === 0">
							<view class="region-item" v-for="(province, index) in ChinaCitys" :key="index"
								@click="selectProvince(province,index)">
								<text>{{province.province}}</text>
								<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit">
								</image>
							</view>
						</scroll-view>

						<scroll-view scroll-y class="region-scroll" v-if="currentTab === 1">
							<view class="region-item" v-for="(city, index) in cityList" :key="index"
								@click="selectCity(city,index)">
								<text>{{city.city}}</text>
								<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit">
								</image>
							</view>
						</scroll-view>

						<scroll-view scroll-y class="region-scroll" v-if="currentTab === 2">
							<view class="region-item checkbox-item" v-for="(district, index) in districtList"
								:key="index" @click="toggleDistrictSelect(index)">
								<view class="checkbox" :class="{ checked: district.checked }">
									<text class="check-icon" v-if="district.checked">✓</text>
								</view>
								<text class="checkbox-label">{{district.area}}</text>
							</view>
						</scroll-view>
					</view>
					<view class="popup-footer">
						<view class="popup-btn cancel" @click="hideRegionPopup">
							<text class="btn-text">取消</text>
						</view>
						<view class="popup-btn confirm" @click="confirmRegionSelect">
							<text class="btn-text">确定</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 所在地省市区选择 -->
			<view class="popup" :class="{ show: showLocationPopupFlag }">
				<view class="popup-mask" @click="hideLocationPopup"></view>
				<view class="popup-content">
					<view class="popup-header">
						<text class="popup-title">选择所在地</text>
						<text class="popup-close" @click="hideLocationPopup">×</text>
					</view>
					<view class="region-body">
						<picker-view @change="bindChangeLocation" class="picker-scroll"
							:indicator-style="indicatorStyle" :value="locationValue">
							<picker-view-column>
								<view class="picker-item" v-for="(item,index) in ChinaCitys" :key="index">
									{{item.province}}</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker-item" v-for="(item,index) in locatinCitys" :key="index">
									{{item.city}}</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker-item" v-for="(item,index) in locationAreas" :key="index">
									{{item.area}}</view>
							</picker-view-column>
						</picker-view>
					</view>
					<view class="popup-footer">
						<view class="popup-btn cancel" @click="hideLocationPopup">
							<text class="btn-text">取消</text>
						</view>
						<view class="popup-btn confirm" @click="confirmLocationSelect">
							<text class="btn-text">确定</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 服务时间选择器弹框 -->
			<view class="popup" :class="{ show: showTimePicker }">
				<view class="popup-mask" @click="hideTimePopup"></view>
				<view class="popup-content">
					<view class="popup-header">
						<text class="cancel-text" @click="hideTimePopup">取消</text>
						<text class="title">选择时间</text>
						<text class="confirm-text" @click="confirmTime">确定</text>
					</view>
					<view class="time-range">
						<view class="time-block" :class="{ active: timeType === 'start' }"
							@click="switchTimeType('start')">
							<text class="time-value">{{formatTime(startTime)}}</text>
							<text class="time-label">开始时间</text>
						</view>
						<text class="time-separator">至</text>
						<view class="time-block" :class="{ active: timeType === 'end' }" @click="switchTimeType('end')">
							<text class="time-value">{{formatTime(endTime)}}</text>
							<text class="time-label">结束时间</text>
						</view>
					</view>
					<view class="region-body">
						<picker-view :value="pickerValue" @change="handleTimeChange" class="picker-scroll"
							:indicator-style="indicatorStyle">
							<picker-view-column>
								<view class="picker-item" v-for="(hour, index) in hours" :key="index">
									{{hour}}
								</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker-item" v-for="(minute, index) in minutes" :key="index">
									{{minute}}
								</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker-item">
									-
								</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker-item" v-for="(hour, index) in hours" :key="index">
									{{hour}}
								</view>
							</picker-view-column>
							<picker-view-column>
								<view class="picker-item" v-for="(minute, index) in minutes" :key="index">
									{{minute}}
								</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
			</view>

		</view>

		<view class="bottom-fixed">
			<view class="fixed-btn" @click="submit">
				<text class="fixed-text">提交</text>
			</view>
		</view>

		<!-- 获取权限提示匡内容 -->
		<view class="permission" :class="{ transform: isShowPer && nowQer === 'xc' }">
			<view class="per-tit">美融融plus 对储存空间/照片权限申请说明</view>
			<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中读取相册和文件内容。</view>
		</view>
		<view class="permission" :class="{ transform: isShowPer && nowQer === 'xj' }">
			<view class="per-tit">美融融plus 对相机拍摄权限申请说明</view>
			<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中所需内容。</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request'
	import {
		debounce
	} from '@/utils/debounce.js'
	import ChinaCitys from '../../static/data/ChinaCitys.json'
	import uploadImage from '../../utils/uploadImage'
	import permissionUtils from '../../utils/per'
	import locationService from '../../utils/locationService';

	export default {
		data() {
			return {
				isShowPer: false,
				nowQer: 'xc',
				identity: '',
				userId: null,
				indicatorStyle: 'height: 68rpx;',
				formData: {
					head_photo: '',
					name: '',
					account: '',
					idcard_num: '',
					idcard_positive: '',
					idcard_negative: '',
					idcard_hands: '',
					health_card: '',
					qualifications: [],
					detail: '',
					dependency: '',
					address: '',
					get_msg_method: '',
					invite_code_other: '',
					servers_kill: [],
					servers_region: [],
					major: '',
					work_state: '',
					second_phone: '',
					default_times: '',
					uscc_photo: '',
					shop_photo: '',
					legal_name: '',
					legal_phone: '',
					legal_idcard_num: '',
					legal_idcard_positive: '',
					legal_idcard_negative: '',
					for_shop: ''
				},
				ChinaCitys: '',
				work_state: '',
				get_msg_method: '',
				major: '',
				showServicePopupFlag: false,
				selectedServicesText: '',
				serviceList: [],
				showLocationPopupFlag: false,
				showRegionPopupFlag: false,
				currentTab: 0,
				regionTabs: ['省', '市', '区'],
				cityList: [],
				districtList: [],
				selectedProvince: null,
				selectedCity: null,
				selectedDistricts: [],
				selectedRegionText: '',
				locatinCitys: [],
				locationAreas: [],
				locationValue: [0,0,0],
				showTimePicker: false,
				pickerValue: [8, 0, 0, 18, 0],
				hours: Array.from({
					length: 24
				}, (_, i) => i < 10 ? `0${i}` : `${i}`),
				minutes: Array.from({
					length: 60
				}, (_, i) => i < 10 ? `0${i}` : `${i}`),
				timeType: 'start',
				isSubmit: false
			}
		},
		async onLoad(options) {
			this.identity = getApp().globalData.artisanType;
			let that = this;
			that.ChinaCitys = ChinaCitys;
			that.locatinCitys = that.ChinaCitys[0].citys;
			that.locationAreas = that.locatinCitys[0].areas;

			// 请求服务技能列表接口
			request.post('/user/firstclass').then(res => {
				that.serviceList = res.data;
			})

			const result = await request.post('/user/getsyrorsjstate', {
				type: that.identity
			});
			let type = that.identity == 1 ? 2 : that.identity == 2 ? 3 : '';
			if (result.data.apply_state == 3) {
				request.post('/sj/user/getuser', {
					type
				}).then(res => {
					that.formData = res.data;
					// 服务技能
					that.decideKill();
					that.selectedServicesText = that.formData.servers_kill_arr.join('、');
					// 消息途径
					that.get_msg_method = ['朋友圈', '抖音', '地推', '朋友介绍', '微博'][that.formData.get_msg_method - 1]
					// 专业经验
					that.major = ['实习', '1-3年', '3-5年', '5-10年', '10年以上'][that.formData.major - 1]
					if (that.identity == 1) {
						// 服务区域
						that.selectedRegionText = that.formData.servers_region.join('、');
						// 有无工作
						that.work_state = ['有工作', '无工作'][that.formData.work_state - 1];
					}
				})
			}
			that.getUserInfo();
			// 创建防抖处理后的提交函数
			// that.debouncedSubmit = debounce(that.submit, 500)
		},
		computed: {
			startTime() {
				return {
					hour: this.hours[this.pickerValue[0]],
					minute: this.minutes[this.pickerValue[1]]
				}
			},
			endTime() {
				return {
					hour: this.hours[this.pickerValue[3]],
					minute: this.minutes[this.pickerValue[4]]
				}
			}
		},
		methods: {
			// // 选择图片
			// chooseImage(type) {
			//   uni.chooseImage({
			//     count: 1,
			//     sizeType: ['compressed'],
			//     sourceType: ['album', 'camera'],
			//     success: (res) => {
			//       // 压缩图片
			//       this.compressImage(res.tempFilePaths[0], type)
			//     }
			//   })
			// },

			// // 压缩图片
			// compressImage(path, type) {
			//   uni.compressImage({
			//     src: path,
			//     quality: 80,
			//     success: (res) => {
			//       this.formData[type] = res.tempFilePath
			//       // TODO: 上传图片到服务器
			//     }
			//   })
			// },

			getUserInfo() {
				request.post('/sj/user/getuser', {
					type: 1
				}).then(result => {
					this.formData.account = result.data.account;
					this.userId = result.data.id;
				})
			},
			addImg(arr) {
				this.formData.qualifications = this.formData.qualifications.concat(arr);
			},
			// 删除图片
			deleteImage(index) {
				this.formData.qualifications.splice(index, 1)
			},
			// 详细地址
			getAddressInfo() {
				if (this.formData.dependency) {
					uni.navigateTo({
						url: `/pages/address/search?dependency=${this.formData.dependency}`
					})
				} else {
					uni.navigateTo({
						url: '/pages/address/search'
					})
				}

			},
			editAddress(item) {
				let location = item.location.split(',');
				this.$set(this.formData, 'address', item.name);
				this.$set(this.formData, 'latitude', location[1]);
				this.$set(this.formData, 'longitude', location[0]);
			},

			// 打开选择器
			openPicker(type) {
				// TODO: 实现选择器逻辑
				if (type == 'get_msg_method') {
					uni.showActionSheet({
						itemList: ['朋友圈', '抖音', '地推', '朋友介绍', '微博'],
						success: (res) => {
							this.formData.get_msg_method = [1, 2, 3, 4, 5][res.tapIndex]
							this.get_msg_method = ['朋友圈', '抖音', '地推', '朋友介绍', '微博'][res.tapIndex]
						}
					})
				} else if (type == 'major') {
					uni.showActionSheet({
						itemList: ['实习', '1-3年', '3-5年', '5-10年', '10年以上'],
						success: (res) => {
							this.formData.major = [1, 2, 3, 4, 5][res.tapIndex]
							this.major = ['实习', '1-3年', '3-5年', '5-10年', '10年以上'][res.tapIndex]
						}
					})
				} else if (type == 'default_times') {
					this.showTimePicker = true;
				} else if (type == 'dependency') {
					this.showLocationPopupFlag = true;
				} else if (type == 'work_state') {
					uni.showActionSheet({
						itemList: ['有工作', '无工作'],
						success: (res) => {
							this.formData.work_state = [1, 2][res.tapIndex]
							this.work_state = ['有工作', '无工作'][res.tapIndex]
						}
					})
				}

			},

			// 显示服务技能弹出框
			showServicePopup() {
				this.showServicePopupFlag = true;
			},
			// 判断技能选中状态
			decideKill() {
				let that = this;
				that.serviceList.forEach((service, index) => {
					that.formData.servers_kill.forEach((kill, i) => {
						if (service.id == kill) {
							that.$set(that.serviceList[index], 'checked', true)
						}
					})

				})
			},
			// 隐藏服务技能弹出框
			hideServicePopup() {
				this.showServicePopupFlag = false
			},
			hideLocationPopup() {
				this.showLocationPopupFlag = false
			},

			// 切换服务技能选择状态
			toggleServiceSelect(index) {
				// this.serviceList[index].checked = !this.serviceList[index].checked;
				this.$set(this.serviceList[index], 'checked', !this.serviceList[index].checked)
				// this.$forceUpdate()
			},

			// 确认服务技能选择
			confirmServiceSelect() {
				const selectedServices = this.serviceList
					.filter(item => item.checked)
					.map(item => item.title)
				const selectedServicesId = this.serviceList
					.filter(item => item.checked)
					.map(item => item.id)

				if (selectedServices.length === 0) {
					uni.showToast({
						title: '请至少选择一个服务技能',
						icon: 'none'
					})
					return
				}
				// 更新表单数据
				this.formData.servers_kill = selectedServicesId;
				this.selectedServicesText = selectedServices.join('、');
				this.hideServicePopup();
			},

			// 显示地区选择弹出框
			showRegionPopup() {
				this.showRegionPopupFlag = true
				this.currentTab = 0
			},

			// 隐藏地区选择弹出框
			hideRegionPopup() {
				this.showRegionPopupFlag = false
				this.currentTab = 0
				this.cityList = []
				this.districtList = []
				this.selectedProvince = null
				this.selectedCity = null
				this.selectedDistricts = []
			},

			// 切换标签页
			switchTab(index) {
				if (index < this.currentTab) {
					this.currentTab = index
				}
			},

			// 选择省份
			selectProvince(province, index) {
				this.selectedProvince = province.province;
				this.currentTab = 1;
				// 获取城市列表
				this.cityList = this.ChinaCitys[index].citys || [];
			},

			// 选择城市
			selectCity(city, index) {
				this.selectedCity = city.city;
				this.currentTab = 2;
				// 获取区县列表
				this.districtList = this.cityList[index].areas || [];
			},

			// 切换区县选择状态
			toggleDistrictSelect(index) {
				this.$set(this.districtList[index], 'checked', !this.districtList[index].checked)
			},

			// 确认地区选择
			confirmRegionSelect() {
				const selectedDistricts = this.districtList
					.filter(item => item.checked)
					.map(item => item.area)
				selectedDistricts.forEach((item, i) => {
					selectedDistricts[i] = this.selectedProvince + '-' + this.selectedCity + '-' + item;
				})
				if (selectedDistricts.length === 0) {
					uni.showToast({
						title: '请至少选择一个区县',
						icon: 'none'
					})
					return
				}
				// 更新表单数据
				this.formData.servers_region = selectedDistricts;
				this.selectedRegionText = selectedDistricts.join('、');
				this.districtList.forEach((item, i) => {
					this.districtList[i].checked = false;
				})
				this.hideRegionPopup()
			},
			bindChangeLocation(e) {
				this.locationValue = e.detail.value;
				let index1 = e.detail.value[0] || 0;
				let index2 = e.detail.value[1] || 0;
				this.locatinCitys = this.ChinaCitys[index1].citys;
				this.locationAreas = this.locatinCitys[index2].areas;
			},
			confirmLocationSelect() {
				let valueArr = this.locationValue;
				let index1 = valueArr[0] || 0;
				let index2 = valueArr[1] || 0;
				let index3 = valueArr[2] || 0;
				let province = this.ChinaCitys[index1].province;
				let city = this.locatinCitys[index2].city;
				let area = this.locationAreas[index3].area;
				this.formData.dependency = province + '-' + city + '-' + area;
				this.formData.dependency_code =  this.locationAreas[index3].code;
				this.showLocationPopupFlag = false;
			},



			// 打开时间选择器
			openTimePicker() {
				this.showTimePicker = true;
			},
			// 切换时间类型（开始/结束）
			switchTimeType(type) {
				this.timeType = type
			},
			// 处理时间变化
			handleTimeChange(e) {
				const values = e.detail.value
				// 检查开始时间是否大于结束时间
				const startMinutes = parseInt(this.hours[values[0]]) * 60 + parseInt(this.minutes[values[1]])
				const endMinutes = parseInt(this.hours[values[3]]) * 60 + parseInt(this.minutes[values[4]])

				if (startMinutes >= endMinutes) {
					// 如果开始时间大于等于结束时间，将结束时间设置为开始时间后一小时
					const newEndHour = (parseInt(this.hours[values[0]]) + 1) % 24
					values[3] = newEndHour
					values[4] = values[1]
				}

				this.pickerValue = values
			},
			// 格式化时间显示
			formatTime(time) {
				return `${time.hour}:${time.minute}`
			},
			// 确认选择
			confirmTime() {
				if (this.identity == '1') {
					this.formData.default_times = this.formatTime(this.startTime) + '-' + this.formatTime(this.endTime);
				} else {
					this.formData.business_time = this.formatTime(this.startTime) + '-' + this.formatTime(this.endTime);
				}
				this.hideTimePopup()
			},
			// 关闭timer弹框
			hideTimePopup() {
				this.showTimePicker = false;
			},
			ckeckisShowPer(value) {
				this.isShowPer = value;
			},
			ckecknowQer(value) {
				this.nowQer = value;
			},
			// 打开相机
			async openCamera(type) {
				console.log('type============', type)
				this.isShowPer = false;
				try {
					const res = await uploadImage.handleUpload(this.userId, this.identity + 1);
					console.log('上传单张图片', res)
					uni.hideLoading();
					if (type == 'avatar') {
						this.formData.head_photo = res;
						return
					}
					if (this.identity == '1') {
						if (type == 'idcard_positive') {
							this.formData.idcard_positive = res
						} else if (type == 'idcard_negative') {
							this.formData.idcard_negative = res
						} else if (type == 'idcard_hands') {
							this.formData.idcard_hands = res
						} else if (type == 'health_card') {
							this.formData.health_card = res
						} else if (type == 'uscc_photo') {
							this.formData.uscc_photo = res
						} else if (type == 'shop_photo') {
							this.formData.shop_photo = res
						}
					} else {
						if (type == 'legal_idcard_positive') {
							this.formData.legal_idcard_positive = res
						} else if (type == 'legal_idcard_negative') {
							this.formData.legal_idcard_negative = res
						} else if (type == 'uscc_photo') {
							this.formData.uscc_photo = res
						}
					}
				} catch (err) {
					console.log(err)
				}
			},
			// 显示权限说明弹窗
			showPermissionDialog(title, content) {
				return new Promise((resolve) => {
					uni.showModal({
						title,
						content,
						confirmText: '去开启',
						success(res) {
							resolve(res.confirm);
						}
					});
				});
			},
			// 选择图片
			async chooseImage(type) {
				try {
					const systemInfo = uni.getSystemInfoSync()
					if (systemInfo.platform === 'ios') {
						this.openCamera(type);
					} else {
						let xcpermission = '';
						let xjpermission = '';
						if (systemInfo.platform === 'ios') {
							xcpermission = 'photo_library',
								xjpermission = 'camera'
						} else {
							xcpermission =
								`android.permission.READ_EXTERNAL_STORAGE,android.permission.WRITE_EXTERNAL_STORAGE`
							xjpermission = 'android.permission.CAMERA'
						}
						const xjfirstRequest = !plus.storage.getItem(`perm_${xjpermission}`)
						const xcfirstRequest = !plus.storage.getItem(`perm_${xcpermission}`)
						if (xcfirstRequest || xjfirstRequest) {
							this.isShowPer = true;
						}

						// 1. 检查权限
						// const { granted } = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
						this.nowQer = 'xc';
						const xc = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
						this.nowQer = 'xj';
						const xj = await permissionUtils.checkPermission('camera', '需要相机权限用于拍摄照片');
						this.isShowPer = false;
						this.nowQer = '';
						if (xc.granted && xj.granted) {
							this.openCamera(type);
							return;
						}

						// 2. 显示权限说明弹窗
						const confirm = await this.showPermissionDialog(
							'相机相册权限申请',
							'我们需要访问您的相机以及相册以完成更换头像功能'
						);

						if (!confirm) return;

						// 3. 请求权限
						const result1 = await permissionUtils.requestPermission('photo_library', '我们需要访问您的相册以上传图片/视频');
						const result2 = await permissionUtils.requestPermission('camera', '我们需要访问您的相机以上传图片/视频');
						if (result1 && result2) {
							this.openCamera(type);
						} else {
							locationService.openAppSettings();
							// uni.showToast({ title: '相机权限被拒绝', icon: 'none' });
						}
					}
				} catch (err) {
					console.log(err)
				}
			},
			onUploadSuccess(file) {
				console.log('上传成功:', file)
			},
			onUploadError(error) {
				console.error('上传失败:', error)
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				})
			},
			onFileDelete(file, index) {
				console.log('删除文件:', file, index)
			},
			// 上传多个图片接口
			// uploadPhoto() {
			//   let that = this;
			//   const promises = that.imagesList.map(item => {
			// 	return new Promise((resolve, reject) => {
			// 	  request.uploadImage('/user/uploadphoto',item.url,{type: item.type}).then(res=>{
			// 		resolve(res)
			// 	  })
			// 	})
			//   })

			//   Promise.all(promises)
			//     .then(results => {
			// 	  uni.hideLoading();
			// 	  var arr = [];
			// 	  arr = results.map(item =>
			// 		item.path
			// 	  )
			// 	  that.formData.qualifications = that.formData.qualifications.concat(arr);

			//       // uni.showToast({
			//       //   title: '上传成功',
			//       //   icon: 'success'
			//       // })

			//     })
			//     .catch(err => {
			// 	  console.log('上传结果err',err)
			//       uni.showToast({
			//         title: '上传失败',
			//         icon: 'none'
			//       })
			//     })
			// },
			submit: debounce(async function() {
				if (this.isSubmit) return;
				delete this.formData.apply_state;
				delete this.formData.servers_kill_arr;
				if (this.identity == '1') {
					if (!this.formData.head_photo) {
						uni.showToast({
							title: '请上传头像',
							icon: 'none'
						})
					} else if (!this.formData.name) {
						uni.showToast({
							title: '请输入真实姓名',
							icon: 'none'
						})
					} else if (!this.formData.idcard_num) {
						uni.showToast({
							title: '请输入身份证号',
							icon: 'none'
						})
					} else if (!this.formData.idcard_positive) {
						uni.showToast({
							title: '请上传身份证正面(人像面)',
							icon: 'none'
						})
					} else if (!this.formData.idcard_negative) {
						uni.showToast({
							title: '请上传身份证反面(国徽面)',
							icon: 'none'
						})
					} else if (!this.formData.idcard_hands) {
						uni.showToast({
							title: '请上传手持身份证照',
							icon: 'none'
						})
					} else if (!this.formData.health_card) {
						uni.showToast({
							title: '请上传健康证',
							icon: 'none'
						})
					} else if (!this.formData.uscc_photo) {
						uni.showToast({
							title: '请上传营业执照',
							icon: 'none'
						})
					} else if (!this.formData.shop_photo) {
						uni.showToast({
							title: '请上传门头照片',
							icon: 'none'
						})
					} else if (!this.formData.detail) {
						uni.showToast({
							title: '请输入个人介绍',
							icon: 'none'
						})
					} else if (!this.formData.dependency) {
						uni.showToast({
							title: '请选择所在地',
							icon: 'none'
						})
					} else if (!this.formData.address) {
						uni.showToast({
							title: '请选择详细地址',
							icon: 'none'
						})
					} else if (!this.formData.second_phone) {
						uni.showToast({
							title: '请输入备用联系方式',
							icon: 'none'
						})
					} else if (!this.formData.for_shop) {
						uni.showToast({
							title: '请输入所属店铺',
							icon: 'none'
						})
					} else if (!this.formData.get_msg_method || this.formData.get_msg_method.length == 0) {
						uni.showToast({
							title: '请选择获取消息方式',
							icon: 'none'
						})
					} else if (!this.formData.invite_code_other) {
						uni.showToast({
							title: '请输入邀请码',
							icon: 'none'
						})
					} else if (!this.formData.servers_kill || this.formData.servers_kill.length == 0) {
						uni.showToast({
							title: '请选择服务技能',
							icon: 'none'
						})
					} else if (!this.formData.servers_region || this.formData.servers_region.length == 0) {
						uni.showToast({
							title: '请选择服务区域',
							icon: 'none'
						})
					} else if (!this.formData.default_times) {
						uni.showToast({
							title: '请选择服务时间',
							icon: 'none'
						})
					} else if (!this.formData.major) {
						uni.showToast({
							title: '请选择专业经验',
							icon: 'none'
						})
					} else if (!this.formData.work_state) {
						uni.showToast({
							title: '请选择目前工作状态',
							icon: 'none'
						})
					} else if (this.formData.account === this.formData.second_phone) {
						uni.showToast({
							title: '备用手机号不能和联系方式一样',
							icon: 'none'
						})
					} else {
						const formData = Object.fromEntries(
							Object.entries(this.formData).filter(([key, value]) => value !== null &&
								value !== undefined && value !== '' && value.length != 0)
						)
						const checkRes = await request.post('/user/check', {
							name: formData.name,
							idcard: formData.idcard_num
						});
						if (checkRes.Code == '401') {
							uni.showToast({
								title: '您的身份证号与姓名不匹配',
								icon: 'none'
							})
							return;
						}
						if (checkRes.ResultObject.BizCode != '1') {
							uni.showToast({
								title: '您的身份证号与姓名不匹配',
								icon: 'none'
							})
							return;
						}
						request.post('/user/usersyradd', formData).then(res => {
							if (res.state == 1) {
								this.isSubmit = true;
								uni.redirectTo({
									url: '/pages/ruzhu/submitres?applyState=1'
								})
							} else {
								this.isSubmit = false;
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}).catch(err => {
							console.log(err)
							this.isSubmit = false;
						})
					}
				} else {
					if (!this.formData.head_photo) {
						uni.showToast({
							title: '请上传店铺logo',
							icon: 'none'
						})
					} else if (!this.formData.name) {
						uni.showToast({
							title: '请输入店铺名称',
							icon: 'none'
						})
					} else if (!this.formData.legal_name) {
						uni.showToast({
							title: '请输入法人姓名',
							icon: 'none'
						})
					} else if (!this.formData.legal_phone) {
						uni.showToast({
							title: '请输入法人手机号',
							icon: 'none'
						})
					} else if (!this.formData.legal_idcard_num) {
						uni.showToast({
							title: '请输入法人身份证',
							icon: 'none'
						})
					} else if (!this.formData.legal_idcard_positive) {
						uni.showToast({
							title: '请上传法人身份证正面(人像面)',
							icon: 'none'
						})
					} else if (!this.formData.legal_idcard_negative) {
						uni.showToast({
							title: '请上传法人身份证反面(国徽面)',
							icon: 'none'
						})
					} else if (!this.formData.uscc_photo) {
						uni.showToast({
							title: '请上传营业执照',
							icon: 'none'
						})
					} else if (!this.formData.dependency) {
						uni.showToast({
							title: '请选择所在地',
							icon: 'none'
						})
					} else if (!this.formData.address) {
						uni.showToast({
							title: '请选择详细地址',
							icon: 'none'
						})
					} else if (!this.formData.get_msg_method || this.formData.get_msg_method.length == 0) {
						uni.showToast({
							title: '请选择获取消息方式',
							icon: 'none'
						})
					} else if (!this.formData.invite_code_other) {
						uni.showToast({
							title: '请输入邀请码',
							icon: 'none'
						})
					} else if (!this.formData.servers_kill || this.formData.servers_kill.length == 0) {
						uni.showToast({
							title: '请选择服务技能',
							icon: 'none'
						})
					} else if (!this.formData.business_time) {
						uni.showToast({
							title: '请选择营业时间',
							icon: 'none'
						})
					} else if (!this.formData.major) {
						uni.showToast({
							title: '请选择专业经验',
							icon: 'none'
						})
					} else {
						const formData = Object.fromEntries(
							Object.entries(this.formData).filter(([key, value]) => value !== null &&
								value !== undefined && value !== '' && value.length != 0)
						)
						console.log(formData)
						request.post('/user/usersjadd', formData).then(res => {
							if (res.state == 1) {
								this.isSubmit = true;
								uni.redirectTo({
									url: '/pages/ruzhu/submitres?applyState=1'
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								this.isSubmit = false;
							}
						}).catch(err => {
							this.isSubmit = false;
						})
					}
				}
			}, 500)
		}
	}
</script>

<style>
	page {
		padding-bottom: 120rpx;
	}

	/* 表单内容 */
	.form-content {
		padding: 32rpx 0;
		box-sizing: border-box;
	}

	/* 标题样式 */
	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
		margin-left: 24rpx;
	}

	.title-bar {
		width: 6rpx;
		height: 48rpx;
		background-color: #FF4767;
		margin-right: 16rpx;
		border-radius: 3rpx;
	}

	.section-title text {
		font-size: 36rpx;
		color: #1D2129;
		font-weight: 400;
	}

	/* 表单项样式 */
	.form-item {
		/* margin-bottom: 32rpx; */
		border-radius: 20rpx;
		padding: 24rpx;
	}

	.label {
		min-width: 200rpx;
		display: block;
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}

	.required::before {
		content: '*';
		color: #FF0000;
		margin-right: 4rpx;
	}


	.placeholder {
		color: #999999;
	}

	/* 上传框样式 */
	.upload-box {
		flex: 1;
		margin-bottom: 32rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		margin-top: 16rpx;
	}

	.upload-img {
		width: 120rpx;
		height: 120rpx;
	}

	.upload-camera {
		width: 446rpx;
		height: 298rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #F8F9FD;
		background-size: cover;
		background-repeat: no-repeat;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.img1 {
		background-image: url('/static/images/id_zheng.png');
	}

	.img2 {
		background-image: url('/static/images/id_fan.png');
	}

	.img3,
	.img4 {
		background-image: url('/static/images/id_ren.png');
	}

	.camera-icon {
		width: 124rpx;
		height: 124rpx;
	}

	.preview-image {
		width: 400rpx;
		height: 220rpx;
	}

	.avatar-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
	}

	.upload-tip {
		display: inline-block;
		width: 560rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 1.5;
		text-align: center;
		padding-left: 46rpx;
		box-sizing: border-box;
	}

	.form-item-one {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		padding: 24rpx;
		border-radius: 20rpx;
	}

	.form-item-two {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border-radius: 20rpx;
	}

	.input {
		font-size: 28rpx;
		color: #333333;
		padding-left: 20rpx;
	}

	.input.disabled {}

	.form-item-tit {
		padding-bottom: 24rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.form-upimg {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}

	.form-upimg .label {
		color: #999999;
	}

	.form-upimgs {
		padding-bottom: 24rpx;
		border-radius: 20rpx;
	}

	.picker-content {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
	}

	/* 平台适配 */
	/* #ifdef MP-WEIXIN */
	.custom-nav {
		padding-top: calc(var(--status-bar-height) + constant(safe-area-inset-top));
		padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
	}

	/* #endif */

	/* 新增样式 */
	.textarea-input {
		font-size: 28rpx;
		flex: 1;
		height: 190rpx;
		font-size: 28rpx;
		color: #333333;
	}


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

	.invite-tip {
		display: inline-block;
		font-size: 20rpx;
		color: #999999;
		padding: 24rpx;
	}

	.service-promise {
		padding: 12rpx 48rpx;
	}

	.promise-title {
		font-size: 28rpx;
		color: #FF4767;
		font-weight: 400;
		margin-bottom: 24rpx;
		text-align: center;
	}

	.promise-item {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 6rpx;
		background-color: #FF4767;
		margin-right: 24rpx;
	}

	.promise-text {
		flex: 1;
		font-size: 20rpx;
		color: #999999;
		line-height: 1.6;
	}

	.form-item-data {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 24rpx;
		border-radius: 20rpx;
	}

	.popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		visibility: hidden;
		opacity: 0;
		transition: all 0.3s ease;
	}

	.popup.show {
		visibility: visible;
		opacity: 1;
	}

	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.popup-content {
		position: relative;
		background-color: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		padding: 32rpx;
		transform: translateY(100%);
		transition: transform 0.3s ease;
	}

	.popup.show .popup-content {
		transform: translateY(0);
	}

	.popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.popup-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
	}

	.popup-close {
		font-size: 40rpx;
		color: #999999;
		padding: 16rpx;
	}

	.popup-body {
		max-height: 600rpx;
		overflow-y: auto;
	}

	.checkbox-list {
		display: flex;
		flex-wrap: wrap;
	}

	.checkbox-item {
		width: 50%;
		padding: 14rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	.checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #DDDDDD;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
	}

	.checkbox.checked {
		background-color: #FF4767;
		border-color: #FF4767;
	}

	.check-icon {
		color: #FFFFFF;
		font-size: 24rpx;
	}

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

	.popup-footer {
		display: flex;
		margin-top: 32rpx;
	}

	.popup-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 16rpx;
	}

	.popup-btn.cancel {
		background-color: #F5F5F5;
	}

	.popup-btn.confirm {
		background: linear-gradient(90deg, #FF4767 0%, #FF618F 100%);
	}

	.popup-btn .btn-text {
		font-size: 32rpx;
		font-weight: 500;
	}

	.popup-btn.cancel .btn-text {
		color: #666666;
	}

	.popup-btn.confirm .btn-text {
		color: #FFFFFF;
	}

	.region-popup {
		height: 80vh;
		display: flex;
		flex-direction: column;
	}

	.region-tabs {
		display: flex;
		border-bottom: 1rpx solid #EEEEEE;
		margin-bottom: 20rpx;
	}

	.region-tab {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #666666;
		position: relative;
	}

	.region-tab.active {
		color: #FF4767;
		font-weight: 500;
	}

	.region-tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #FF4767;
		border-radius: 2rpx;
	}

	.region-body {
		flex: 1;
		overflow: hidden;
	}

	.region-scroll {
		height: 100%;
	}

	.picker-scroll {
		height: 400rpx;
	}

	.picker-item {
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
	}

	.region-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.region-item.checkbox-item {
		padding: 20rpx 0;
		width: 100%;
		justify-content: flex-start !important;
		align-items: center !important;
	}



	/* .picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 110rpx;
  padding: 0 32rpx;
  background-color: #fff;
} */


	.cancel-text {
		font-size: 32rpx;
		color: #666666;
	}

	.title {
		font-size: 36rpx;
		color: #333333;
		font-weight: 500;
	}

	.confirm-text {
		font-size: 32rpx;
		color: #FF4767;
		font-weight: 500;
	}

	/* 时间范围选择 */
	.time-range {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 32rpx;
		background: #F8F9FC;
	}

	.time-block {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 24rpx 0;
		transition: all 0.3s ease;
	}

	.time-block.active {
		background: #ECF2FF;
	}

	.time-label {
		font-size: 26rpx;
		color: #999999;
		margin-top: 8rpx;
	}

	.time-value {
		font-size: 40rpx;
		color: #333333;
		font-weight: 500;
	}

	.time-block.active .time-value {
		color: #FF4767;
	}

	.time-separator {
		font-size: 28rpx;
		color: #999999;
		margin: 0 24rpx;
	}

	/*  */

	.section-card {
		padding: 24rpx;
		border-radius: 20rpx;
	}

	.section-subtitle {
		display: inline-block;
		font-size: 20rpx;
		color: #999999;
		font-weight: 400;
		margin-bottom: 24rpx;
	}

	.upload-grid {
		display: flex;
		flex-wrap: wrap;
		margin-top: 16rpx;
	}

	.upload-item {
		width: 120rpx;
		height: 120rpx;
		background-color: #E8E8E8;
		border-radius: 20rpx;
		margin: 8rpx;
	}

	.upload-icon {
		width: 120rpx;
		height: 120rpx;
		border: 20rpx;
	}

	.camera-icon {
		font-size: 56rpx;
	}

	.upload-image {
		width: 120rpx;
		height: 120rpx;
		border: 20rpx;
		margin: 8rpx;
		position: relative;
	}


	.bottom-fixed {
		height: 120rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #ffffff;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	.agree {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}

	.agree-btn {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.agree-tip {
		font-size: 20rpx;
		font-weight: 400;
		color: #666666;
	}

	.fixed-btn {
		width: 630rpx;
	}

	/* APP适配 */
	/* #ifdef APP-PLUS */
	.permission.transform {
		top: calc(var(--status-bar-height) + 108rpx + 20rpx);
		opacity: 1;
		visibility: visible;
	}

	/* #endif */
</style>
