<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">
			<view :class="tabindex == 0 ? 'tabactive' : ''" @click="btntab(0)">
				基础信息
				<text></text>
			</view>
			<view :class="tabindex == 1 ? 'tabactive' : ''" @click="btntab(1)">
				骑行设置
				<text></text>
			</view>
			<view :class="tabindex == 2 ? 'tabactive' : ''" @click="btntab(2)">
				还车设置
				<text></text>
			</view>
		</view>
		<scroll-view scroll-y="true" style="height: 72vh;overflow: scroll;">
			<view class="" v-if="tabindex == 0">
				<view class="card">
					<view class="card_li">
						<view class="tops" style="display: block;">
							<view class="card_left">
								运营区名称
							</view>
							<view class=""
								style="width: 100%;background: #F4F5F7;border-radius: 14rpx 14rpx 14rpx 14rpx;margin-top: 18rpx;height: 80rpx;line-height: 80rpx;padding-left: 24rpx;">
								<input type="text" v-model="form.name" placeholder="运营区名称" class="input"
									placeholder-style="color:#C7CDD3" style="height: 80rpx;line-height: 80rpx;">
							</view>
						</view>
					</view>
				</view>
				<!-- 三级联动选择器 -->
				<view class="xingzheng">
					<view class="district-container">
						<!-- 点击区域 -->
						<view 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 class="header-btn cancel" @tap="handleCancel">取消</view>
									<view class="header-btn confirm" @tap="handleConfirm">确认</view>
								</view>
							</view>
			
							<!-- 三级选择列 -->
							<view class="picker-columns">
								<!-- 省份列 -->
								<scroll-view class="picker-column" scroll-y>
									<view 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 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 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" style="background-color: #F4F5F7;border-radius: 20rpx;padding: 20rpx 32rpx;" 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" style="background-color: #F4F5F7;border-radius: 20rpx;padding: 20rpx 32rpx;margin-top: 30rpx;" 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="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.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="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">
								<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="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.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" style="background-color: #F4F5F7;border-radius: 20rpx;padding: 20rpx 32rpx;margin-top: 30rpx;" 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>
			    </view>
				<view class="" v-if="tabindex == 1 || tabindex == 0">
					<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.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">
									<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">
									<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.enableChange"></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.undercharge" placeholder=" " class="input"
										placeholder-style="color:#C7CDD3" style="width: 100rpx;">%
								</view>
							</view>
							<view class="tips" style="text-align: left;">
								当车辆电量低于多少时无法解锁用车
							</view>
						</view>
					</view>
				</view>
			
				<view class="" v-if="tabindex == 2 || tabindex == 0">
					<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.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">
							<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" @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>
		</scroll-view>


		<!-- 时间选择器 -->
		<u-picker v-model="showTimeSelect" mode="time" @confirm="timeConfirm" :params="params"
			:default-time='00'></u-picker>
		<view class="btn_box">
			<view class="btn1" @click="backpage()">
				取消
			</view>
			<view class="btn2" @click="sub">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				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
			}
		},
		onLoad(e) {

		},
		onShow() {
			if (uni.getStorageSync('adminAreaid')) {
				this.areaId = uni.getStorageSync('adminAreaid')
			}
			this.getAreaInfo()
			this.getxingzhen()
		},
		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: {
			// 点击头部tab进行切换
			btntab(num) {
				this.tabindex = num
				console.log(this.tabindex);
			},
			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.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: ""
							})
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			backpage() {
				uni.navigateBack()
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e)
				if (e == '按分钟') {
					this.data.rentalUnit = 'minutes'
				} else {
					this.data.rentalUnit = 'hours'
				}
			},
			sub() {
				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 = []
				}
				let data = {
					...this.form,
					areaTimeStart: this.startTime,
					areaTimeEnd: this.endTime,
					status: this.timeflag == true ? '0' : '1',
					authentication: authentication,
					needCheckVideo: this.scspflag
				}
				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
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .u-input__input{
		text-align: center !important;
	}
	.tabactive {
		font-weight: 600 !important;
		color: #3D3D3D !important;

		text {
			background: #4297F3 !important;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
		}
	}

	.tab {
		width: 750rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		gap: 82rpx;
		padding-left: 42rpx;
        font-size: 36rpx;
		view {
			text-align: center;
			color: #808080;
            
			text {
				display: block;
				width: 56rpx;
				height: 6rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin: auto;
				margin-top: 14rpx;
			}
		}
	}

	page {}

	.xingzheng {
		padding: 0 24rpx;

		.district-container {
			background: #fff;
			border-radius: 12rpx;
			margin-top: 20rpx;
			box-shadow: 0rpx 2rpx 8rpx rgba(0, 0, 0, 0.06);
		}

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

			.district-label {
				font-size: 30rpx;
				color: #333;
				font-weight: 600;
			}

			.district-placeholder {
				font-size: 28rpx;
				color: #999;
				display: flex;
				align-items: center;

				&:after {
					content: '';
					display: inline-block;
					width: 12rpx;
					height: 12rpx;
					border: 1rpx solid #999;
					border-left: none;
					border-top: none;
					transform: rotate(-45deg);
					margin-left: 8rpx;
					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 24rpx;
		margin: 24rpx auto 0;
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);

		.card_li {
			width: 100%;
			padding: 30rpx 0;
			display: flex;
			flex-wrap: wrap;
			// border-bottom: 1rpx solid #F0F0F0;

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

				.card_left {
					font-weight: 500;
					font-size: 30rpx;
					color: #333;
					flex-shrink: 0;
				}

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

					.input {
						text-align: center;
						font-size: 30rpx;
						color: #333;
						min-width: 140rpx;
						height: 60rpx;
						background: #F4F5F7;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
					}
				}
			}

			.tips {
				width: 100%;
				font-size: 24rpx;
				color: #999;
				margin-top: 10rpx;
				line-height: 34rpx;
			}
		}
	}

	.page {
		.choose_part {
			position: fixed;
			top: 530rpx;
			left: 54rpx;
			z-index: 110;
			width: 644rpx;
			padding: 40rpx 48rpx;
			background: #FFFFFF;
			border-radius: 26rpx 26rpx 26rpx 26rpx;

			.part_box {
				margin-top: 40rpx;
				display: flex;
				flex-wrap: wrap;

				.part:nth-child(3n) {
					margin-right: 0;
				}

				.part {
					margin-top: 10rpx;
					position: relative;
					margin-right: 36rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					// width: 160rpx;
					// height: 60rpx;
					padding: 4rpx 8rpx;
					background: #F0F0F0;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					border: 1rpx solid #F0F0F0;
					font-weight: 500;
					font-size: 32rpx;

					color: #3D3D3D;

					image {
						position: absolute;
						right: 0;
						bottom: 0;
						width: 34rpx;
						height: 34rpx;
					}
				}

				.act {
					background: #DCEDFF;
					border: 1rpx solid #4297F3;
					color: #4297F3;
				}
			}

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

			.btn {
				margin-top: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 552rpx;
				height: 88rpx;
				background: #4C97E7;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}


		.btn_box {
			position: fixed;
			width: 750rpx;
			bottom: 50rpx;
			display: flex;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: center;
			z-index: 100;
            padding: 0 20rpx;
			.btn1 {
				margin-right: 52rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				background: #f8f8f8;
				font-weight: 500;
				width: 282rpx;
				height: 96rpx;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				border: 2rpx solid #3D3D3D;
				font-size: 36rpx;
				color: #3D3D3D;
			}

			.btn2 {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				
				width: 418rpx;
				height: 96rpx;
				background: #4C97E7;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}
		}

		.card {
			padding: 0 24rpx;
			margin: 0 auto;
			margin-top: 24rpx;
			width: 702rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
			border-radius: 10rpx 10rpx 10rpx 10rpx;

			.biaoti {
				font-size: 32rpx;
				font-weight: 600;
				padding-top: 30rpx;
				box-sizing: border-box;
				color: #4C97E7;
			}

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

			.tips {
				width: 100%;
				// text-align: right;
				font-weight: 400;
				font-size: 22rpx;
				color: #999;
			}

			.card_li {
				width: 100%;
				padding-top: 24rpx;
				display: flex;
				flex-wrap: wrap;
				// align-content: center;
				// justify-content: space-between;
				// border-bottom: 1rpx solid #D8D8D8;
				padding-bottom: 18rpx;

				.rule {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					font-weight: 400;
					font-size: 30rpx;
					color: #3D3D3D;

					.input {
						margin-left: 6rpx;
						margin-right: 6rpx;
						padding: 6rpx;

						border: 1rpx solid #ccc;
						border-radius: 20rpx;
						width: 250rpx;

					}

					.btns1 {
						margin-left: auto;
						padding: 10rpx 20rpx;
						background: #DCEDFF;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						font-weight: 400;
						font-size: 30rpx;
						color: #4297F3;
					}

					.btns2 {
						margin-left: auto;
						padding: 10rpx 20rpx;
						background: #FFDBDB;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						font-weight: 400;
						font-size: 30rpx;
						color: #FF1C1C;
					}
				}

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

					.card_left {
						font-weight: 400;
						font-size: 30rpx;
						color: #333;
						font-weight: 600;
					}

					.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;
						}
					}
				}

			}


		}
	}
</style>