<template>
	<view class="page">
		<u-navbar title="运营配置" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='45'></u-navbar>
		<view class="tab" :style="{ top: navOffsetTop + 'px' }">
			<view :class="tabindex == 0 ? 'tabactive' : ''" hover-class="tab-item-press app-tap-hover" hover-stay-time="80" @click="btntab(0)">
				基础信息
				<text></text>
			</view>
			<view :class="tabindex == 1 ? 'tabactive' : ''" hover-class="tab-item-press app-tap-hover" hover-stay-time="80" @click="btntab(1)">
				骑行设置
				<text></text>
			</view>
			<view :class="tabindex == 2 ? 'tabactive' : ''" hover-class="tab-item-press app-tap-hover" hover-stay-time="80" @click="btntab(2)">
				还车设置
				<text></text>
			</view>
		</view>
		<view class="tab-placeholder"></view>
		<scroll-view class="sys-set-scroll" scroll-y="true" :scroll-into-view="scrollIntoView" scroll-with-animation
			:enable-back-to-top="true" :show-scrollbar="false"
			style="height: 72vh;overflow: scroll;" @scroll="onSysSetScroll">
			<view id="section-basic-anchor" class="section-anchor"></view>
			<view class="">
				<view class="card">
					<view class="card_li">
						<view class="tops" style="display: block;">
							<view class="card_left">
								运营区名称
							</view>
							<view class=""
								style="width: 100%;background: #F3F4F6;border-radius: 24rpx;margin-top: 18rpx;height: 88rpx;line-height: 88rpx;padding-left: 32rpx;box-sizing: border-box;transition: all 0.3s ease;border: 2rpx solid transparent;"
								:style="{'border-color': focusName ? '#3B82F6' : 'transparent', 'background': focusName ? '#fff' : '#F3F4F6'}">
								<input type="text" v-model="form.name" placeholder="运营区名称" class="input"
									placeholder-style="color:#9CA3AF" style="height: 88rpx;line-height: 88rpx;font-size:32rpx;color:#1F2937;"
									@focus="focusName=true" @blur="focusName=false">
							</view>
						</view>
					</view>
				</view>
				<!-- 三级联动选择器 -->
				<view class="xingzheng">
					<view class="district-container">
						<!-- 点击区域 -->
						<view hover-class="app-tap-hover" class="district-trigger" @tap="btnshowDistrict">
							<view class="district-label">行政区</view>
							<view class="district-placeholder">
								{{selectedText || '请选择'}}
							</view>
						</view>
						<!-- 选择器弹窗 -->
						<view class="district-picker" v-if="showDistrict">
							<!-- 标题和操作按钮 -->
							<view class="picker-header">
								<view class="header-title">请点击选择</view>
								<view class="header-actions">
									<view hover-class="app-tap-hover" class="header-btn cancel" @tap="handleCancel">取消</view>
									<view hover-class="app-tap-hover" class="header-btn confirm" @tap="handleConfirm">确认</view>
								</view>
							</view>
			
							<!-- 三级选择列 -->
							<view class="picker-columns">
								<!-- 省份列 -->
								<scroll-view class="picker-column" scroll-y>
									<view hover-class="app-tap-hover" v-for="item in provinceList" :key="item.id"
										:class="['column-item', (tempProvince && tempProvince.id === item.id) ? 'active' : '']"
										@tap="handleProvinceSelect(item)">
										{{item.name}}
									</view>
								</scroll-view>
			
								<!-- 城市列 -->
								<scroll-view class="picker-column" scroll-y>
									<view hover-class="app-tap-hover" v-for="item in cityList" :key="item.id"
										:class="['column-item', (tempCity && tempCity.id === item.id) ? 'active' : '']"
										@tap="handleCitySelect(item)">
										{{item.name}}
									</view>
								</scroll-view>
			
								<!-- 区县列 -->
								<scroll-view class="picker-column" scroll-y>
									<view hover-class="app-tap-hover" v-for="item in districtList" :key="item.id"
										:class="['column-item', (tempDistrict && tempDistrict.id === item.id) ? 'active' : '']"
										@tap="handleDistrictSelect(item)">
										{{item.name}}
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>
				<view class="card" style="padding-bottom: 50rpx;">
					<view class="biaoti">
						基础信息
					</view>
					<view class="card_li">
						<view class="tops">
							<view class="card_left">
								状态
							</view>
							<view class="card_right">
								<u-switch v-model="timeflag"></u-switch>
							</view>
						</view>
						<view class="tips">
							关闭后用户将不能使用运营区及车辆
						</view>
					</view>
					<view class="card_li">
						<view class="tops">
							<view class="card_left">
								运营时间
							</view>
							<view class="card_right">
							</view>
						</view>
						<view class="tips"
							style="display: flex;justify-content: space-between;margin-top: 20rpx;align-items: center;background-color: #F4F5F7;padding: 28rpx;border-radius: 20rpx;text-align: center;">
							<u-input :disabled="true" style="margin-right: 10rpx;background-color: #E2E2E2;border-radius: 20rpx;text-align: center;overflow: hidden;" v-model="startTime"
								placeholder="如: 09:00:00" border="none" @click="showTimePicker('work')"></u-input> —
							<u-input :disabled="true" style="margin-left: 10rpx;background-color: #E2E2E2;border-radius: 20rpx;text-align: center;overflow: hidden;" v-model="endTime"
								placeholder="如: 18:00:00" border="none" @click="showTimePicker('off')"></u-input>
						</view>
					</view>
					<view class="card_li">
						<view class="tops">
							<view class="card_left">
								实名认证
							</view>
							<view class="card_right">
								<u-switch v-model="shimflag"></u-switch>
							</view>
						</view>
						<view class="tips">
							开启后用户必须先进行实名认证才可使用
						</view>
					</view>
					<view class="card_li card-inner-box" style="margin-top: 0;" v-if="shimflag == true">
						<view class="tops">
							<view class="card_left">
								最低用车年龄
							</view>
							<view class="card_right">
								<input type="number" v-model="form.minAge" placeholder=" " class="input"
									placeholder-style="color:#C7CDD3" style="width: 80rpx;background-color: #E2E2E2;text-align: center;padding: 0;">
							</view>
						</view>
						<view class="tips">
							用户年龄不满足最低年龄不可使用
						</view>
					</view>
					<view class="card_li card-inner-box" v-if="shimflag == true">
						<view class="tops">
							<view class="card_left">
								最高用车年龄
							</view>
							<view class="card_right">
								<input type="number" v-model="form.maxAge" placeholder=" " class="input"
									placeholder-style="color:#C7CDD3" style="width: 80rpx;background-color: #E2E2E2;text-align: center;padding: 0;">
							</view>
						</view>
						<view class="tips">
							设置用户最高用车年龄，需配合实名认证使用;若无需校验，可设置为1000
						</view>
					</view>
					<view class="card_li">
						<view class="tops">
							<view class="card_left">
								驾驶证认证
							</view>
							<view class="card_right">
								<u-switch v-model="jiasflag"></u-switch>
							</view>
						</view>
						<view class="tips">
							开启后用户必须先通过驾驶证认证才可使用
						</view>
					</view>
					
					<view class="card_li">
						<view class="tops">
							<view class="card_left">
								允许多订单
							</view>
							<view class="card_right">
								<u-switch v-model="form.multipleOrder"></u-switch>
							</view>
						</view>
						<view class="tips">
							开启后用户可以进行多个订单
						</view>
					</view>
					
					<view class="card_li">
						<view class="tops">
							<view class="card_left">
								使用前上传视频
							</view>
							<view class="card_right">
								<u-switch v-model="scspflag"></u-switch>
							</view>
						</view>
						<view class="tips">
							开启后用户必须先拍摄全车视频才能下单
						</view>
					</view>
					
					<view class="card_li">
						<view class="tops">
							<view class="card_left">
								短信通知服务
							</view>
							<view class="card_right">
								<u-switch v-model="form.msgSwitch"></u-switch>
							</view>
						</view>
						<view class="tips">
							开启短信通知，短信费用0.1元/条，从余额中扣除
						</view>
					</view>
					<view class="card_li">
						<view class="tops">
							<view class="card_left">
								寻车范围
							</view>
							<view class="card_right">
								<u-switch v-model="form.requiredRingRadius"></u-switch>
							</view>
						</view>
						<!-- <view class="tops" style="margin-top: 20rpx;" v-if="form.requiredRingRadius == true">
							<view class="card_left">
								允许寻车范围
							</view>
							<view class="card_right">
								<input type="number" v-model="form.ringRadius" placeholder=" " class="input"
									placeholder-style="color:#C7CDD3" style="width: 100rpx;">米
							</view>
						</view>
						<view class="tips" style="margin-top: 10rpx;">
							开启后，用户需在车辆指定范围才允许响铃寻车(防止恶意响铃)
						</view> -->
					</view>
					<view class="card_li card-inner-box" v-if="form.requiredRingRadius == true">
						<view class="tops">
							<view class="card_left">
								允许寻车范围
							</view>
							<view class="card_right">
								<input type="number" v-model="form.ringRadius" placeholder=" " class="input"
									placeholder-style="color:#C7CDD3" style="width: 80rpx;background-color: #E2E2E2;text-align: center;padding: 0;">米
							</view>
						</view>
						<view class="tips">
							开启后，用户需在车辆指定范围才允许响铃寻车(防止恶意响铃)
						</view>
					</view>
					<view class="card_li">
						<view class="tops">
							<view class="card_left">
								启用引导
							</view>
							<view class="card_right">
								<u-switch v-model="form.guideEnable"></u-switch>
							</view>
						</view>
						<view class="tips">
							开启后,用户首次扫码后会播放引导视频
						</view>
					</view>
					<view class="card_li">
						<view class="tops" style="display: block;">
							<view class="card_left" style="margin-bottom: 18rpx;">引导视频</view>
							<view hover-class="app-tap-hover" class="guide-video-upload" @click="uploadGuideVideo">
								<view v-if="!form.guideVideo" class="guide-video-placeholder">
									<text class="guide-video-plus">+</text>
								</view>
								<view v-else class="guide-video-preview">
									<video :src="form.guideVideo" class="guide-video-preview-video" controls></video>
									<view hover-class="app-tap-hover" class="guide-video-remove" @click.stop="removeGuideVideo">
										<text>删除</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
				  </view>
			    </view>
				<view id="section-ride-anchor" class="section-anchor"></view>
				<view class="">
					<view class="card">
						<view class="biaoti">
							骑行设置
						</view>
						<view class="card_li">
							<view class="tops">
								<view class="card_left">
									低于电量(%)不得骑行
								</view>
								<view class="card_right">
									<input type="number" v-model="form.undercharge" placeholder=" " class="input"
										placeholder-style="color:#C7CDD3" style="width: 100rpx;">%
								</view>
							</view>
							<view class="tips" style="text-align: left;">
								当车辆电量低于多少时无法解锁用车
							</view>
						</view>
						<view class="card_li">
							<view class="tops">
								<view class="card_left">
									允许换车
								</view>
								<view class="card_right">
									<u-switch v-model="form.enableChange"></u-switch>
								</view>
							</view>
							<view class="tips">
								开启后当进入禁行区内将进行断电
							</view>
						</view>
						<view class="card_li" v-if="form.enableChange">
							<view class="tops">
								<view class="card_left">
									换车校验位置
								</view>
								<view class="card_right">
									<u-switch v-model="form.changeCheck"></u-switch>
								</view>
							</view>
							<view class="tips">
								开启后用户换车是否需要校验位置
							</view>
						</view>
						<view class="card_li">
							<view class="tops">
								<view class="card_left">
									禁行区内断电
								</view>
								<view class="card_right">
									<u-switch v-model="form.noRidingOutage"></u-switch>
								</view>
							</view>
							<view class="tips">
								开启后当进入禁行区内将进行断电
							</view>
						</view>
						<view class="card_li">
							<view class="tops">
								<view class="card_left">
									运营区域外断电
								</view>
								<view class="card_right">
									<u-switch v-model="form.areaOutOutage"></u-switch>
								</view>
							</view>
							<view class="tips">
								开启后当进入运营区域外内将进行断电
							</view>
						</view>
						<view class="card_li">
							<view class="tops">
								<view class="card_left">
									运营区外断电距离
								</view>
								<view class="card_right">
									<input type="number" v-model="form.outageDistance" placeholder=" " class="input"
										placeholder-style="color:#C7CDD3" style="width: 100rpx;">米
								</view>
							</view>
							<view class="tips" style="text-align: left;">
								运营区外断电距离(米)
							</view>
						</view>
						
						<view class="card_li">
							<view class="tops">
								<view class="card_left">
									靠近边界播报距离
								</view>
								<view class="card_right">
									<input type="number" v-model="form.boundaryDistance" placeholder=" " class="input"
										placeholder-style="color:#C7CDD3" style="width: 100rpx;">米
								</view>
							</view>
							<view class="tips" style="text-align: left;">
								靠近边界播报距离(米)
							</view>
						</view>
						
						
						
						<view class="card_li">
							<view class="tops">
								<view class="card_left">
									临时开锁
								</view>
								<view class="card_right">
									<u-switch v-model="form.enableTempUnlock"></u-switch>
								</view>
							</view>
							<view class="tips">
								开启后，车辆强制锁车时，用户可临时开锁后骑回运营区
							</view>
						</view>
						<view class="card_li card-inner-box" style="margin-top: 0;" v-if="form.enableTempUnlock == true">
							<view class="tops">
								<view class="card_left">
									最大临时开锁次数
								</view>
								<view class="card_right">
									<input type="number" v-model="form.tempUnlockMax" placeholder=" " class="input"
										placeholder-style="color:#C7CDD3" style="width: 80rpx;background-color: #E2E2E2;text-align: center;padding: 0;">次
								</view>
							</view>
						</view>
						<view class="card_li card-inner-box" v-if="form.enableTempUnlock == true">
							<view class="tops">
								<view class="card_left">
									每次临时开锁时长
								</view>
								<view class="card_right">
									<input type="number" v-model="form.tempUnlockSeconds" placeholder=" " class="input"
										placeholder-style="color:#C7CDD3" style="width: 80rpx;background-color: #E2E2E2;text-align: center;padding: 0;">秒
								</view>
							</view>
						</view>
						
						
					</view>
				</view>
			
				<view id="section-return-anchor" class="section-anchor"></view>
				<view class="">
					<view class="card">
						<view class="biaoti">
							还车设置
						</view>
						<view class="card_li">
							<view class="tops">
								<view class="card_left">
									手机校验附近设备
								</view>
								<view class="card_right">
									<u-switch v-model="form.mobileCheckMac"></u-switch>
								</view>
							</view>
							<view class="tips">
								开启后，用户还车时会校验手机附近设备，若不匹配则视为无效定位，可以降低异地还车的风险
							</view>
						</view>
						<view class="card_li">
							<view class="tops">
								<view class="card_left">
									还车误差
								</view>
								<view class="card_right">
									<input type="number" v-model="form.error" placeholder=" " class="input"
										placeholder-style="color:#C7CDD3" style="width: 100rpx;">米
								</view>
							</view>
							<view class="tips" style="text-align: left;">
								允许用户在规划的停车点外多少米还车
							</view>
						</view>
						<view class="card_li">
							<view class="tops">
								<view class="card_left">
									还车拍照审核
								</view>
								<view class="card_right">
									<u-switch v-model="form.returnVerify"></u-switch>
								</view>
							</view>
							<view class="tips">
								开启后则需用户拍摄视频后审核订单方可退还押金
							</view>
						</view>
						<view class="card_li">
							<view class="tops">
								<view class="card_left">
									强制停车点还车
								</view>
								<view class="card_right">
									<u-switch v-model="form.parkingReturn"></u-switch>
								</view>
							</view>
							<view class="tips">
								开启则必须在停车点才可还车，停车点存在误差
							</view>
						</view>
						<view class="card_li" v-if="form.parkingReturn == false">
							<view class="tops">
								<view class="card_left">
									运营区外还车
								</view>
								<view class="card_right">
									<u-switch v-model="form.areaOutReturn"></u-switch>
								</view>
							</view>
							<view class="tips">
								开启后可以在运营区范围外还车
							</view>
						</view>
						<view class="card_li">
							<view class="tops">
								<view class="card_left">
									运营区外管理费
								</view>
								<view class="card_right">
									<input type="number" v-model="form.vehicleManagementFee" placeholder=" " class="input"
										placeholder-style="color:#C7CDD3" style="width: 100rpx;">元
								</view>
							</view>
							<view class="tips" style="text-align: left;">
								设置车辆超出运营区外产生的管理费用
							</view>
						</view>
						<view class="card_li">
							<view class="tops">
								<view class="card_left">
									停车点外调度费
								</view>
								<view class="card_right">
									<input type="number" v-model="form.dispatchFee" placeholder=" " class="input"
										placeholder-style="color:#C7CDD3" style="width: 100rpx;">元
								</view>
							</view>
							<view class="tips" style="text-align: left;">
								设置车辆超出停车点外产生的调度费用
							</view>
						</view>
						
						<!-- <view class="card_li" @click="toMap()">
							<view class="tops">
								<view class="card_left">
									电子围栏设置	
								</view>
								<view class="card_right">
									<view class="iconfont icon-xiangyou1">
									</view>
								</view>
							</view>
							<view class="tips" style="text-align: left;">
								设置车辆可以正常行驶的区域
							</view>
						</view> -->
					</view>
				</view>
			<!-- 底部留白：避免最后一项被固定操作栏遮挡 -->
			<view class="scroll-bottom-spacer"></view>
		</scroll-view>


		<!-- 时间选择器 -->
		<u-picker v-model="showTimeSelect" mode="time" @confirm="timeConfirm" :params="params"
			default-time="00:00:00"></u-picker>
		<view class="btn_box">
			<view class="btn1" hover-class="btn1-press app-tap-hover" hover-stay-time="100" @click="backpage()">
				取消
			</view>
			<view class="btn2" :class="{ 'btn2--disabled': submitting }" hover-class="btn2-press app-tap-hover" hover-stay-time="100"
				@click="sub">
				{{ submitting ? '保存中…' : '保存' }}
			</view>
		</view>
		<qiniu-upload-progress />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				focusName: false,
				bgc: {
					backgroundColor: "#fff",
				},
				list: [],
				form: {},
				deptInfo: {},
				areaId: '',
				customServices: [],
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: true
				},
				showTimeSelect: false,
				timeType: "work", // work or off
				startTime: '',
				endTime: '',
				timeflag: false,
				shimflag: false,
				jiasflag: false,
				scspflag: false,

				// 行政区划数据
				regionData: [],
				provinceList: [],
				cityList: [],
				districtList: [],

				// 已选择的数据（确认后保存）
				selectedProvince: null,
				selectedCity: null,
				selectedDistrict: null,

				// 临时选择的数据（选择器中使用）
				tempProvince: null,
				tempCity: null,
				tempDistrict: null,

				// 控制选择器显示
				showDistrict: false,
				selectedText: '请选择',
				tabindex: 0,
				qiniuToken: '',
				navOffsetTop: 88,
				scrollIntoView: '',
				/** 相对「基础信息」锚点的 scrollTop 阈值 [0, 骑行, 还车]，单位 px */
				sectionScrollThresholds: null,
				/** scroll-view 可视高度，用于触底时高亮最后一个 tab */
				mainScrollViewportHeight: 0,
				/** 点击 tab 程序化滚动期间，避免 scroll 回调把高亮改乱 */
				scrollSpyFromTab: false,
				submitting: false,
				/** 滚动联动节流，减轻频繁 setData */
				_scrollSpyTs: 0
			}
		},
		onLoad(e) {
			const sysInfo = uni.getSystemInfoSync()
			this.navOffsetTop = (sysInfo.statusBarHeight || 20) + 44
			// 72vh 近似高度，供触底判断；onReady 会用实测值覆盖
			this.mainScrollViewportHeight = Math.round((sysInfo.windowHeight || 667) * 0.72)
		},
		onReady() {
			this.$nextTick(() => {
				const q = uni.createSelectorQuery().in(this)
				q.select('.sys-set-scroll').boundingClientRect()
				q.exec((res) => {
					if (res && res[0] && res[0].height) this.mainScrollViewportHeight = res[0].height
				})
				this.measureSectionScrollThresholds()
			})
		},
		onShow() {
			if (uni.getStorageSync('adminAreaid')) {
				this.areaId = uni.getStorageSync('adminAreaid')
			}
			this.getAreaInfo()
			this.getxingzhen()
			this.getQiniuToken()
		},
		computed: {
			// 计算已选择的文本显示
			// selectedText() {
			// 	if (!this.selectedProvince) return '';
			// 	let text = this.selectedProvince.name;
			// 	if (this.selectedCity) text += this.selectedCity.name;
			// 	if (this.selectedDistrict) text += this.selectedDistrict.name;

			// 	return text;
			// }
		},
		methods: {
			// 测量各区块锚点间距（与当前滚动位置无关，差值即内容区相对偏移）
			measureSectionScrollThresholds() {
				const q = uni.createSelectorQuery().in(this)
				q.select('#section-basic-anchor').boundingClientRect()
				q.select('#section-ride-anchor').boundingClientRect()
				q.select('#section-return-anchor').boundingClientRect()
				q.exec((res) => {
					if (!res || !res[0] || !res[1] || !res[2]) return
					const d1 = res[1].top - res[0].top
					const d2 = res[2].top - res[0].top
					if (!(d1 > 0 && d2 > d1)) return
					this.sectionScrollThresholds = [0, d1, d2]
				})
			},
			onSysSetScroll(e) {
				if (this.scrollSpyFromTab) return
				const now = Date.now()
				if (now - this._scrollSpyTs < 40) return
				this._scrollSpyTs = now
				const detail = e.detail || {}
				const st = detail.scrollTop || 0
				const sh = detail.scrollHeight || 0
				const vh = this.mainScrollViewportHeight || 0
				const th = this.sectionScrollThresholds
				const leeway = uni.upx2px ? uni.upx2px(16) : 8
				let idx = 0
				if (th && th.length >= 3) {
					if (sh > 0 && vh > 0 && st + vh >= sh - leeway * 2) {
						idx = 2
					} else if (st + leeway >= th[2]) {
						idx = 2
					} else if (st + leeway >= th[1]) {
						idx = 1
					} else {
						idx = 0
					}
				}
				if (idx !== this.tabindex) {
					this.tabindex = idx
				}
			},
			// 点击头部tab进行切换
			btntab(num) {
				this.scrollSpyFromTab = true
				this.tabindex = num
				const anchorMap = {
					0: 'section-basic-anchor',
					1: 'section-ride-anchor',
					2: 'section-return-anchor'
				}
				this.scrollIntoView = ''
				this.$nextTick(() => {
					this.scrollIntoView = anchorMap[num]
					setTimeout(() => {
						this.scrollSpyFromTab = false
						this.measureSectionScrollThresholds()
					}, 420)
				})
			},
			btnshowDistrict() {
				this.showDistrict = !this.showDistrict
			},
			// 获取所有行政区
			getxingzhen() {
				this.$u.get(`/bst/region/all`).then(res => {
					if (res.code == 200) {
						this.regionData = res.data;
						// 初始化省份列表
						this.provinceList = this.regionData.filter(item => item.level === 1);
					}
				})
			},

			// 选择省份
			handleProvinceSelect(item) {
				this.tempProvince = item
				// 获取该省份下的城市
				this.cityList = this.regionData.filter(city =>
					city.level === 2 && city.parentId === item.id
				)
				// 清空已选择的城市和区县
				this.tempCity = null
				this.tempDistrict = null
				this.districtList = []
			},

			// 选择城市
			handleCitySelect(item) {
				this.tempCity = item;
				// 获取该城市下的区县
				this.districtList = this.regionData.filter(district =>
					district.level === 3 && district.parentId === item.id
				);
				// 清空已选择的区县
				this.tempDistrict = null;
			},

			// 选择区县
			handleDistrictSelect(item) {
				this.tempDistrict = item;
			},

			// 取消选择
			handleCancel() {
				// 重置临时选择
				this.tempProvince = this.selectedProvince;
				this.tempCity = this.selectedCity;
				this.tempDistrict = this.selectedDistrict;
				// 如果之前选择了省份，需要重新加载城市列表
				if (this.tempProvince) {
					this.cityList = this.regionData.filter(city =>
						city.level === 2 && city.parentId === this.tempProvince.id
					)
				}
				// 如果之前选择了城市，需要重新加载区县列表
				if (this.tempCity) {
					this.districtList = this.regionData.filter(district =>
						district.level === 3 && district.parentId === this.tempCity.id
					)
				}
				this.showDistrict = false
			},

			// 确认选择
			handleConfirm() {
				// 保存临时选择到最终选择
				this.selectedProvince = this.tempProvince
				this.selectedCity = this.tempCity
				this.selectedDistrict = this.tempDistrict
				if (this.selectedProvince) {

				} else {
					uni.showToast({
						title: '请选择省/自治区',
						icon: 'none',
						duration: 1500
					})
					return
				}
				if (this.selectedCity) {

				} else {
					uni.showToast({
						title: '请选择市',
						icon: 'none',
						duration: 1500
					})
					return
				}
				// 保存到表单
				if (this.selectedDistrict) {
					this.form.districtId = this.selectedDistrict.id
					this.form.districtName = this.selectedDistrict.name
					this.form.provinceId = this.selectedProvince.id
					this.form.provinceName = this.selectedProvince.name
					this.form.cityId = this.selectedCity.id
					this.form.cityName = this.selectedCity.name
					this.form.regionId = this.selectedDistrict.id
					this.selectedText = this.form.provinceName + ',' + this.form.cityName + ',' + this.form.districtName
					// 收起选择器
					this.showDistrict = !this.showDistrict
				} else {
					uni.showToast({
						title: '请选择区',
						icon: 'none',
						duration: 1500
					})
					return
				}
			},

			// 显示时间选择器
			showTimePicker(type) {
				this.timeType = type
				this.showTimeSelect = true
			},
			// 时间选择确认
			timeConfirm(e) {
				const time = `${e.hour}:${e.minute}:${e.second}`
				if (this.timeType === 'work') {
					this.startTime = time
				} else {
					this.endTime = time
				}
			},
			toMap() {
				uni.navigateTo({
					url: '/page_shanghu/guanli/msp_set?areaId=' + this.areaId
				})
			},
			addService() {
				if (this.customServices.length < 3) {
					this.customServices.push({
						name: "",
						phone: ""
					})
				}
			},
			removeService(index) {
				if (index > 0 && this.customServices.length > 1) {
					this.$delete(this.customServices, index);
					this.$set(this.form, `serviceName${index + 1}`, "")
					this.$set(this.form, `servicePhone${index + 1}`, "")
				}
			},
			getAreaInfo() {
				this.$u.get(`/bst/area/${this.areaId}`).then((res) => {
					if (res.code == 200) {
						this.form = res.data
						this.$set(this.form, 'enableTempUnlock', res.data.enableTempUnlock === true)
						this.$set(this.form, 'tempUnlockMax', Number.isInteger(res.data.tempUnlockMax) ? res.data.tempUnlockMax : 0)
						this.$set(this.form, 'tempUnlockSeconds', Number.isInteger(res.data.tempUnlockSeconds) ? res.data.tempUnlockSeconds : 0)
						this.$set(this.form, 'guideEnable', res.data.guideEnable === true)
						this.$set(this.form, 'guideVideo', res.data.guideVideo || '')
						this.form.ruleIds = res.ruleIds
						if (res.data.regionMergerName != null) {
							this.selectedText = res.data.regionMergerName
						}
						this.startTime = res.data.areaTimeStart
						this.endTime = res.data.areaTimeEnd
						res.data.authentication.filter(item => {
							if (item == 1) {
								this.shimflag = true
							} else if (item == 2) {
								this.jiasflag = true
							}
						})
						this.scspflag = res.data.needCheckVideo
						if (res.data.status == 1) {
							this.timeflag = false
						} else if (res.data.status == 0) {
							this.timeflag = 1
						}
						// 初始化 customServices 数组
						this.customServices = [];
						for (let i = 1; i <= 3; i++) {
							if (
								res.data[`serviceName${i}`] ||
								res.data[`servicePhone${i}`]
							) {
								this.customServices.push({
									name: res.data[`serviceName${i}`] || "",
									phone: res.data[`servicePhone${i}`] || "",
								})
							}
						}
						// 如果 customServices 为空，添加一个默认的服务
						if (this.customServices.length === 0) {
							this.customServices.push({
								name: "",
								phone: ""
							})
						}
						this.$nextTick(() => {
							setTimeout(() => this.measureSectionScrollThresholds(), 50)
							setTimeout(() => this.measureSectionScrollThresholds(), 300)
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			getQiniuToken() {
				this.$u.get("/common/qiniuToken").then((res) => {
					if (res.code == 200) {
						this.qiniuToken = res.data
					}
				})
			},
			uploadGuideVideo() {
				if (!this.qiniuToken) {
					uni.showToast({
						title: '上传token获取失败，请重试',
						icon: 'none',
						duration: 2000
					})
					return
				}
				uni.chooseVideo({
					sourceType: ['album', 'camera'],
					maxDuration: 60,
					success: (res) => {
						this._uploadGuideVideoToQiniu(res.tempFilePath)
					},
					fail: (err) => {
						console.log('选择视频失败', err)
					}
				})
			},
			_uploadGuideVideoToQiniu(filePath) {
				let _this = this
				let math = 'static/' + _this.$u.guid(20) + '.mp4'
				_this.$uploadQiniuFile({
					filePath,
					token: _this.qiniuToken,
					key: 'bike/video/' + math,
					title: '上传引导视频'
				}).then((url) => {
					_this.$set(_this.form, 'guideVideo', url)
					uni.showToast({
						title: '上传成功',
						icon: 'success',
						duration: 1500
					})
				}).catch(() => {
					uni.showToast({
						title: '上传失败',
						icon: 'none',
						duration: 2000
					})
				})
			},
			removeGuideVideo() {
				this.$set(this.form, 'guideVideo', '')
			},
			backpage() {
				uni.navigateBack()
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e)
				if (e == '按分钟') {
					this.data.rentalUnit = 'minutes'
				} else {
					this.data.rentalUnit = 'hours'
				}
			},
			sub() {
				if (this.submitting) return
				let authentication = []
				if (this.shimflag == true && this.jiasflag == true) {
					authentication = [1, 2]
				} else if (this.shimflag == true && this.jiasflag == false) {
					authentication = [1]
				} else if (this.shimflag == false && this.jiasflag == true) {
					authentication = [2]
				} else if (this.shimflag == false && this.jiasflag == false) {
					authentication = []
				}
				if (this.form.enableTempUnlock === true) {
					const tempUnlockMax = Number(this.form.tempUnlockMax)
					const tempUnlockSeconds = Number(this.form.tempUnlockSeconds)
					if (!Number.isInteger(tempUnlockMax) || tempUnlockMax < 0) {
						uni.showToast({
							title: '最大临时开锁次数需为大于等于0的整数',
							icon: 'none',
							duration: 1500
						})
						return
					}
					if (!Number.isInteger(tempUnlockSeconds) || tempUnlockSeconds < 0) {
						uni.showToast({
							title: '每次临时开锁时长需为大于等于0的整数',
							icon: 'none',
							duration: 1500
						})
						return
					}
				}
				let data = {
					...this.form,
					areaTimeStart: this.startTime,
					areaTimeEnd: this.endTime,
					status: this.timeflag == true ? '0' : '1',
					authentication: authentication,
					needCheckVideo: this.scspflag,
					enableTempUnlock: this.form.enableTempUnlock === true,
					tempUnlockMax: Number(this.form.tempUnlockMax || 0),
					tempUnlockSeconds: Number(this.form.tempUnlockSeconds || 0),
					guideEnable: this.form.guideEnable === true,
					guideVideo: this.form.guideVideo || ''
				}
				this.submitting = true
				uni.showLoading({
					title: '保存中…',
					mask: true
				})
				this.$u.put(`/bst/area`, data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1100)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						})
					}
				}).catch(() => {
					uni.showToast({
						title: '网络异常，请稍后重试',
						icon: 'none',
						duration: 2000
					})
				}).finally(() => {
					uni.hideLoading()
					this.submitting = false
				})
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .u-input__input{
		text-align: center !important;
	}
	.tabactive {
		font-weight: 600 !important;
		color: #3B82F6 !important;
		font-size: 34rpx !important;
		text {
			background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%) !important;
			border-radius: 4rpx !important;
			box-shadow: 0 4rpx 10rpx rgba(59, 130, 246, 0.4);
		}
	}

	.tab {
		position: fixed;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(10px);
		border-radius: 0 0 32rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 20rpx;
        font-size: 32rpx;
		z-index: 99;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
		view {
			text-align: center;
			color: #6B7280;
			transition: all 0.3s ease;
			padding: 20rpx 0;

			text {
				display: block;
				width: 48rpx;
				height: 8rpx;
				border-radius: 4rpx;
				margin: auto;
				margin-top: 12rpx;
				transition: all 0.3s ease;
				background: transparent;
			}
		}
	}
	.tab-item-press {
		opacity: 0.82;
	}
	.tab-placeholder {
		height: 100rpx;
	}
	.section-anchor {
		height: 4rpx;
	}
	.scroll-bottom-spacer {
		height: 280rpx;
		width: 100%;
		flex-shrink: 0;
	}

	page {
		background: #F3F4F6;
	}

	.xingzheng {
		padding: 0 24rpx;

		.district-container {
			background: rgba(255, 255, 255, 0.98);
			backdrop-filter: blur(10px);
			border-radius: 32rpx;
			margin-top: 24rpx;
			box-shadow: 0 12rpx 36rpx rgba(44, 138, 240, 0.06);
			border: 1rpx solid rgba(255, 255, 255, 0.8);
		}

		.district-trigger {
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;

			.district-label {
				font-size: 32rpx;
				color: #1F2937;
				font-weight: 600;
			}

			.district-placeholder {
				font-size: 30rpx;
				color: #6B7280;
				display: flex;
				align-items: center;

				&:after {
					content: '';
					display: inline-block;
					width: 12rpx;
					height: 12rpx;
					border: 3rpx solid #9CA3AF;
					border-left: none;
					border-top: none;
					transform: rotate(45deg);
					margin-left: 12rpx;
					transition: all 0.3s;
				}
			}
		}

		.district-picker {
			position: relative;
			background: #fff;
			border-radius: 0 0 12rpx 12rpx;
			margin-top: -1rpx;
			z-index: 10;
			box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.1);
		}

		.picker-header {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			border-bottom: 1rpx solid #F0F0F0;

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

			.header-actions {
				display: flex;
				gap: 40rpx;

				.header-btn {
					font-size: 28rpx;
					line-height: 40rpx;

					&.cancel {
						color: #999;
					}

					&.confirm {
						color: #4C97E7;
						font-weight: 500;
					}
				}
			}
		}

		.picker-columns {
			display: flex;
			height: 500rpx;
			border-top: 1rpx solid #F8F8F8;
		}

		.picker-column {
			flex: 1;
			border-right: 1rpx solid #F0F0F0;

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

			.column-item {
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #333;
				padding: 0 20rpx;
				border-bottom: 1rpx solid #F8F8F8;

				&.active {
					background: #F5F8FF;
					color: #4C97E7;
					font-weight: 500;
					position: relative;

					&:after {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						width: 4rpx;
						background: #4C97E7;
					}
				}
			}
		}

		.selected-display {
			padding: 20rpx 0;

			.selected-label {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 16rpx;
			}

			.selected-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 16rpx;

				.selected-tag {
					display: inline-flex;
					align-items: center;
					background: #F0F8FF;
					border-radius: 8rpx;
					padding: 6rpx 16rpx;
					padding-right: 8rpx;
					border: 1rpx solid #D6E7FF;

					.tag-text {
						font-size: 24rpx;
						color: #4C97E7;
						font-weight: 500;
						line-height: 34rpx;
					}

					.close-icon {
						width: 24rpx;
						height: 24rpx;
						border-radius: 50%;
						background: #E5E5E5;
						color: #666;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20rpx;
						margin-left: 8rpx;
						line-height: 1;

						&:active {
							background: #D5D5D5;
						}
					}
				}
			}
		}
	}

	.card {
		padding: 0 32rpx;
		margin: 30rpx auto 0;
		width: 702rpx;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(10px);
		border-radius: 32rpx;
		box-shadow: 0 12rpx 36rpx rgba(44, 138, 240, 0.06);
		border: 1rpx solid rgba(255, 255, 255, 0.8);
		box-sizing: border-box;

		.card_li {
			width: 100%;
			padding: 40rpx 0;
			display: flex;
			flex-wrap: wrap;
			position: relative;
			&:not(:last-child)::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 1rpx;
				background: #F3F4F6;
			}

			.tops {
				width: 100%;
				display: flex;
				align-items: center;

				.card_left {
					font-weight: 600;
					font-size: 32rpx;
					color: #1F2937;
					flex-shrink: 0;
				}

				.card_right {
					margin-left: auto;
					display: flex;
					align-items: center;

					.input {
						text-align: center;
						font-size: 30rpx;
						color: #374151;
						min-width: 160rpx;
						height: 72rpx;
						background: #F3F4F6;
						border-radius: 36rpx;
						transition: all 0.3s ease;
						&:focus {
							background: #fff;
							border: 2rpx solid #3B82F6;
							box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.1);
						}
					}
				}
			}

			.tips {
				width: 100%;
				font-size: 26rpx;
				color: #9CA3AF;
				font-weight: 500;
				margin-top: 16rpx;
				line-height: 1.6;
			}
		}
	}

	.page {
		.card-inner-box {
			background: #F8FAFC;
			border-radius: 24rpx;
			padding: 24rpx 32rpx;
			margin-top: 24rpx;
			border: 1rpx solid #F1F5F9;
			width: 100%;
			box-sizing: border-box;
		}

		.choose_part {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 110;
			width: 686rpx;
			padding: 48rpx;
			background: rgba(255, 255, 255, 0.98);
			backdrop-filter: blur(10px);
			border-radius: 40rpx;
			box-sizing: border-box;
			box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);

			.part_box {
				margin-top: 48rpx;
				display: flex;
				flex-wrap: wrap;
				gap: 24rpx;

				.part {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 12rpx 24rpx;
					background: #F8FAFC;
					border-radius: 12rpx;
					border: 2rpx solid #E2E8F0;
					font-weight: 500;
					font-size: 32rpx;
					color: #4B5563;
					transition: all 0.3s ease;

					image {
						position: absolute;
						right: -2rpx;
						bottom: -2rpx;
						width: 40rpx;
						height: 40rpx;
						opacity: 0;
						transform: scale(0.5);
						transition: all 0.3s ease;
					}
				}

				.act {
					background: #EFF6FF;
					border: 2rpx solid #3B82F6;
					color: #3B82F6;
					box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);
					image {
						opacity: 1;
						transform: scale(1);
					}
				}
			}

			.tit {
				width: 100%;
				text-align: center;
				font-weight: 600;
				font-size: 36rpx;
				color: #1F2937;
			}

			.btn {
				margin-top: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 96rpx;
				background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
				border-radius: 48rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
				box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.25);
				transition: all 0.3s ease;
				&:active {
					transform: scale(0.98);
					box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.2);
				}
			}
		}


		.btn_box {
			position: fixed;
			width: 750rpx;
			bottom: 0;
			display: flex;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: center;
			z-index: 100;
			background: rgba(255, 255, 255, 0.98);
			backdrop-filter: blur(10px);
			padding: 30rpx;
			padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
			box-sizing: border-box;
			box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.05);

			.btn1 {
				margin-right: 32rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				background: #F8FAFC;
				font-weight: 600;
				width: 260rpx;
				height: 96rpx;
				border-radius: 48rpx;
				border: 2rpx solid #E2E8F0;
				font-size: 34rpx;
				color: #4B5563;
				transition: all 0.3s ease;
				&:active {
					transform: scale(0.95);
					background: #F1F5F9;
				}
			}
			.btn1-press {
				transform: scale(0.96);
				background: #F1F5F9;
			}

			.btn2 {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
				width: 400rpx;
				height: 96rpx;
				background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
				border-radius: 48rpx;
				box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.25);
				transition: all 0.3s ease;
				&:active {
					transform: scale(0.98);
					box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.2);
				}
			}
			.btn2-press:not(.btn2--disabled) {
				transform: scale(0.97);
				opacity: 0.95;
			}
			.btn2--disabled {
				opacity: 0.65;
				pointer-events: none;
			}
		}

		.card {
			padding: 0 32rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			width: 702rpx;
			background: rgba(255, 255, 255, 0.98);
			backdrop-filter: blur(10px);
			border-radius: 32rpx;
			box-shadow: 0 12rpx 36rpx rgba(44, 138, 240, 0.06);
			border: 1rpx solid rgba(255, 255, 255, 0.8);
			box-sizing: border-box;

			.biaoti {
				font-size: 34rpx;
				font-weight: 600;
				padding-top: 40rpx;
				box-sizing: border-box;
				color: #3B82F6;
				position: relative;
				padding-left: 20rpx;
				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 48rpx;
					width: 8rpx;
					height: 28rpx;
					background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
					border-radius: 4rpx;
				}
			}

			.card_li:last-child {
				// border-bottom: 1rpx solid #fff;
			}

			.tips {
				width: 100%;
				font-weight: 500;
				font-size: 26rpx;
				color: #9CA3AF;
				line-height: 1.6;
			}

			.card_li {
				width: 100%;
				padding-top: 40rpx;
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 30rpx;
				position: relative;
				&:not(:last-child)::after {
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 1rpx;
					background: #F3F4F6;
				}

				.rule {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #1F2937;
					width: 100%;
					gap: 16rpx;

					.input {
						padding: 6rpx 20rpx;
						background: #F3F4F6;
						border: 2rpx solid transparent;
						border-radius: 36rpx;
						width: 250rpx;
						height: 64rpx;
						text-align: center;
						transition: all 0.3s ease;
						&:focus {
							background: #fff;
							border-color: #3B82F6;
							box-shadow: 0 0 0 4rpx rgba(59, 130, 246, 0.1);
						}
					}

					.btns1 {
						margin-left: auto;
						padding: 12rpx 24rpx;
						background: #EFF6FF;
						border-radius: 32rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #3B82F6;
						transition: all 0.3s ease;
						&:active {
							transform: scale(0.95);
							background: #DBEAFE;
						}
					}

					.btns2 {
						margin-left: auto;
						padding: 12rpx 24rpx;
						background: #FEF2F2;
						border-radius: 32rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #EF4444;
						transition: all 0.3s ease;
						&:active {
							transform: scale(0.95);
							background: #FEE2E2;
						}
					}
				}

				.tops {
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					.card_left {
						font-weight: 600;
						font-size: 32rpx;
						color: #1F2937;
					}

					.card_right {
						margin-left: auto;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						color: #000;

						span {
							font-weight: 400;
							font-size: 30rpx;
							color: #000;
						}
                        
						.input {
							height: 60rpx;
							line-height: 60rpx;
							box-sizing: border-box;
							margin-right: 10rpx;
							border: 1rpx solid #ccc;
							border-radius: 20rpx;
							width: 400rpx;
							text-align: center;
						}
					}
				}

			}


		}
	}

	.guide-video-upload {
		width: 100%;
		min-height: 280rpx;
		background: #F3F4F6;
		border: 2rpx dashed #D1D5DB;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		transition: all 0.3s ease;
		&:active {
			background: #E5E7EB;
		}
	}

	.guide-video-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 280rpx;
	}

	.guide-video-plus {
		font-size: 80rpx;
		color: #9CA3AF;
		line-height: 1;
		font-weight: 300;
	}

	.guide-video-preview {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.guide-video-preview-video {
		width: 100%;
		height: 300rpx;
		border-radius: 16rpx;
		background: #000;
	}

	.guide-video-remove {
		margin-top: 24rpx;
		text-align: center;
		font-size: 28rpx;
		color: #EF4444;
		font-weight: 500;
		padding: 16rpx 0;
		background: #FEF2F2;
		border-radius: 16rpx;
		transition: all 0.3s ease;
		&:active {
			transform: scale(0.98);
			background: #FEE2E2;
		}
	}
</style>