<template>
	<view class="page-container">
		<webviewPoint ref="webviewRef" />

		<z-paging ref="paging" v-model="dataList" @query="queryList">

			<template #top>
				<!-- 搜索框 -->
				<view class="searchClass">
					<u-search searchIcon="search" shape="round" placeholder="输入服务项目/客户手机号" searchIconColor="#A0A0A0"
						v-model=searchProductName @search='goSearch' @custom='goSearch' @focus="goSearch"></u-search>
					<view class="orderBox" @click="goFilter">
						<image src="/static/workbench/filterIcon.png" style="width: 44rpx;height: 44rpx;"
							mode="widthFix">
						</image>
						<view style="font-weight: 400;font-size: 20rpx;	color: #1D2129;margin-top: -15rpx;">筛选</view>
					</view>
				</view>
				<!-- 订单状态 -->
				<view class="tab-box">
					<view v-for="(item, index) in statusList" :key="index"
						:class="{ item: true, active: current === index }" @click="onTabChange(item.code, index)">
						{{ item.info }}
					</view>
				</view>
			</template>
			<view class="list-box" v-if="dataList && dataList.length > 0">
				<view class="item" v-for="(item, index) in dataList" :key="index" @click="goDetails(item.id)">
					<!-- 订单信息 -->
					<view style="border-bottom: 1px solid #E7E7E7;">
						<view class="row1" @click="goDetails(item.cId)">
							<view style="display: flex;align-items: center;">
								<image src="/static/workbench/clockIcon3.png"
									style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" mode="aspectFill" />
								{{ item.appointmentTimeRange }}
							</view>

							<view v-if="item.status == 2" class=" stetusBtn status">待接单</view>
							<!-- 3:待服务  待出发\待签到\已出发\已到达\已签到 -->
							<view v-if="item.status == 3" class=" stetusBtn status2">

								<view v-if="item.execStatus === 0">待出发/待签到</view>
								<view v-if="item.execStatus === 1">已出发</view>
								<view v-if="item.execStatus === 2">已到达/已签到</view>
							</view>

							<view v-if="item.status == 4" class=" stetusBtn status2">服务中</view>
							<view v-if="item.status == 5" class="stetusBtn status3">已完成</view>
							<view v-if="item.status == 9" class="stetusBtn status3">售后</view>

						</view>
						<view class="row2">
							<image src="/static/workbench/propleIcon.png"
								style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" mode="aspectFill" />
							<view>{{ item.contactPersonName }} {{ item.contactPhoneNumber }}
							</view>
							<view class="type">
								<image v-if="item.customerTagCode == 0" src="/static/workbench/licenceIcon.png"
									style="width: 108.5rpx;height: 40rpx;" mode="aspectFill" />
								<image v-if="item.customerTagCode == 1" src="/static/workbench/licenceIcon1.png"
									style="width: 108.5rpx;height: 40rpx;" mode="aspectFill" />
								<image v-if="item.customerTagCode == 2" src="/static/workbench/licenceIcon2.png"
									style="width: 92rpx;height: 40rpx;" mode="aspectFill" />

							</view>
						</view>

						<view class="row3">
							<image src="/static/workbench/localIcon.png"
								style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" mode="aspectFill" />

							{{ item.contactAddressInfo }}
							<text class="cont">{{ item.distanceKm }}km</text>
						</view>
					</view>

					<!-- 服务项目信息 -->
					<view class="row4">
						<view>
							<image :src="item.projectCover" mode="aspectFill"
								style="border: 1px solid red;width: 96rpx;height: 96rpx;border-radius: 8rpx;" />
						</view>
						<view
							style="display: flex;flex-direction: column;flex: 1;justify-content: space-between;margin-left: 24rpx;">
							<view style="display: flex; justify-content: space-between;">
								<view class="title">{{ item.projectName }}（{{ item.projectPrice }}分钟）</view>
								<view class="cont">
									<view style="font-size: 20rpx;">￥</view>
									{{ item.finalAmount }}
								</view>
							</view>
							<view v-if="item.status == 9">
								<view v-if="item.afterSalesServiceStatus == '退款中'" class="refundStatus1">退款中
								</view>
								<view class="refundStatus2">{{ item.afterSalesServiceStatus }}
								</view>

							</view>
							<!-- <view v-if="item.status == 9 && item.afterSalesServiceStatus == '退款中'"
								class="refundStatus1">退款中</view>
							<view v-if="item.status == 9 && item.afterSalesServiceStatus == '已退款'"
								class="refundStatus2">已退款</view> -->

						</view>

					</view>
					<!-- 订单金额 -->
					<view class="price">
						交通费
						<view
							style="font-weight: bold;font-size: 28rpx;display: flex;align-items: baseline;margin-right: 32rpx;">
							<view style="font-size: 20rpx;">￥</view>
							{{ item.trafficFee }}
						</view>
						实付
						<view
							style="font-weight: bold;font-size: 36rpx;color: #FF4C12;display: flex;align-items: baseline;">
							<view style="font-size: 20rpx;">￥</view>
							{{ item.finalAmount }}
						</view>
					</view>
					<!-- 操作按钮 -->
					<view class="btn">

						<view class="button">

							<view class="pay" v-if="item.status == 2" @click.stop="rejectOrder(orderDetail)">拒接
							</view>
							<view class="pay" v-if="[2, 3,].includes(item.status)"
								@click.stop="contactCustomer(orderDetail)">
								联系客户</view>
							<view class="pay main" v-if="item.status == 2" @click.stop="acceptOrder(item)">立即接单</view>

							<view class="pay" v-if="[4, 3,].includes(item.status)" @click.stop="cancelOrder(item)">
								取消订单
							</view>
							<view class="pay main main1" v-if="item.status == 3 && item.execStatus == 0"
								@click.stop="startGoOut(item)">我已出发/签到</view>
							<view class="pay main" v-if="item.status == 3 && item.execStatus == 1"
								@click.stop="arriveSign(item)">
								已到达
							</view>
							<view class="pay main" v-if="item.status == 3 && item.execStatus == 2"
								@click.stop="startService(item)">
								开始服务
							</view>

							<view class="pay" v-if="item.status == 4" @click.stop="cancelOrder2(item)">
								提前结束</view>
							<view class="pay alarm" v-if="item.status == 4" @click.stop="alarmOrder(item)">一键报警</view>
							<view class="pay main" v-if="item.status == 4" @click.stop="finishService(item)">服务完成
							</view>

						</view>
					</view>
					<!-- 高风险区域提示 -->
					<view v-if="item.isHighRiskArea" class="warning">
						<view style="width: 24rpx;">
							<image src="/static/workbench/warringIcon.png" style="width: 24rpx;height: 24rpx;"
								mode="aspectFill" />
						</view>

						<view class="text">{{ item.fenceIntro }}</view>
					</view>
				</view>
			</view>

			<template v-slot:empty>
				<u-empty :text="!isLogin ? '您还没有登录' : '暂无相关订单'" icon="/static/workbench/emptyIcon1.png">
					<u-button size="small" text="去登录" color="linear-gradient(to right, #35c99d, #27aea7)"
						:customStyle="{ marginTop: '20rpx' }" v-if="!isLogin" @click="goLogin">
					</u-button>
				</u-empty>
			</template>
		</z-paging>

		<!-- 筛选弹窗 -->
		<u-popup :show="filterPopup.show" mode="bottom" :height="datePickerShow ? '1000rpx' : '700rpx'" :round="20"
			closeable @close="closeFilterPopup">
			<view class="filter-content">
				<view class="filter-header">
					<text class="filter-title">筛选</text>
				</view>

				<view class="filter-section">
					<view class="section-title">选择出行费用</view>
					<view class="filter-options">
						<view v-for="(item, index) in feeOptions" :key="index"
							:class="{ 'filter-option': true, active: filterPopup.feeType === item.value }"
							@click="filterPopup.feeType = item.value">
							{{ item.label }}
						</view>
					</view>
				</view>

				<view class="filter-section" style="margin-top: 64rpx;">
					<view class="section-title">筛选下单时间</view>
					<view class="filter-options">
						<view v-for="(item, index) in timeOptions" :key="index"
							:class="{ 'filter-option': true, active: filterPopup.timeRange === item.value }"
							@click="timeRangeChange(item.value)">
							{{ item.label }}
						</view>
					</view>

					<view class="date-range">
						<view class="date-item">
							<view class="date-input" @click="openStartDatePicker('startDate')">
								{{ filterPopup.startDate || '请选择' }}
							</view>
						</view>
						<text class="date-separator">至</text>
						<view class="date-item">
							<view class="date-input" @click="openEndDatePicker('endDate')">
								{{ filterPopup.endDate || '请选择' }}
							</view>
						</view>
					</view>
				</view>
				<view class="month-picker-container">
					<u-datetime-picker ref="datetimePicker" :show="datePickerShow" v-model="dateValue" mode="date"
						:formatter="formatter" @confirm="onStartDateConfirm" @change="onChange"
						@cancel="datePickerShow = false"></u-datetime-picker>
				</view>


				<view class="filter-footer">
					<view class="btn-reset" @click="resetFilter">重置</view>
					<view class="btn-confirm" @click="confirmFilter">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 报警确认提示 -->
		<u-popup closeOnClickOverlay :show="showModal" mode="center" :round="16" :mask-close-able="false">
			<view class="modal-wrap1">
				<!-- 标题居中 -->
				<view class="title">提示</view>
				<!-- 正文 -->
				<view class="content">
					即将提交报警信息，是否确定？
				</view>
				<!-- 底部双按钮（必显示） -->
				<view class="btn-box">
					<view class="btn left" @click="showModal = false">取消</view>
					<view class="btn right" @click="alarmOrderSure">确认报警</view>
				</view>
			</view>
		</u-popup>
		<!-- 报警完提示 -->
		<u-popup closeOnClickOverlay :show="showModal1" mode="center" :round="16" :mask-close-able="false">
			<view class="modal-wrap1">
				<!-- 标题居中 -->
				<view class="title">提示</view>
				<!-- 正文 -->
				<view class="content">
					订单已报警，等待平台核实
				</view>
				<!-- 底部双按钮（必显示） -->
				<view class="btn-box">
					<view class="btn left" @click="showModal1 = false">关闭</view>
					<view class="btn right" @click="contactCustomerService">联系客服</view>
				</view>
			</view>
		</u-popup>
		<!-- 服务完成弹窗 -->
		<u-popup closeOnClickOverlay :show="showModal2" mode="center" :round="16" :mask-close-able="false">
			<view class="modal-wrap">
				<!-- 标题居中 -->
				<view class="title">提示</view>
				<!-- 正文 -->
				<view class="content">
					距离服务时间还剩{{ diff }}分钟，确认提前结束订单吗？
				</view>
				<!-- 底部双按钮（必显示） -->
				<view class="btn-box">
					<view class="btn left" @click="showModal2 = false">我再想想</view>
					<view class="btn right" @click="finishServiceSure(selectOrderDetail)">确认结束</view>
				</view>
			</view>
		</u-popup>
		<!-- 线下签到弹窗 -->
		<u-popup :show="showSignPopup" :closeOnClickOverlay="true" mode="center" :round="16"
			@close="showSignPopup = false">
			<view class="sign-wrap">
				<view class="sign-title">输入用户手机后4位完成线下签到</view>
				<view class="sign-input-wrap">
					<Code ref="codeInput" :maxlength="4" :width="494" type="block" inputType="number"
						@onChange="onPhoneInput" @onComplete="onSignComplete" />
				</view>
				<view v-if="signError" class="sign-error">手机号验证错误，请重试</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
//   // 订单状态(0：待付款，1:待派单，2:待接单，3:待服务 4:服务中 5：已完成 6：已取消
//7：已关闭 8：拒绝接单 9：退款成功)

//execStatus
//'履约状态：0=待出发/待签到，1=已出发，2=已到达/已签到'
import { queryOrder, orderDetail, acceptOrder, rejectOrder, cancelOrder, arriveSign, startService, alarmOrder, finishService, startGoOut, getCustomerPhone } from '@/api/order.js'

import { getIsLottery, } from '@/api/index.js';

import webviewPoint from "@/components/webviewPoint.vue";
import { onHide } from '@dcloudio/uni-app';
import Code from '@/uni_modules/yi-code/components/yi-code/yi-code.vue'
export default {
	components: { webviewPoint, Code },
	data() {
		return {
			showSignPopup: false,
			phoneInputValue: '',
			signError: '',
			showModal: false,
			showModal1: false,
			diff: 0,
			searchProductName: '',
			searchPhoneNumber: '',
			startDate: '',
			endDate: '',
			dataList: [],
			current: 0,
			statusList: [
				{ info: '全部', code: -1 },
				{ info: '待接单', code: 2 },
				{ info: '待服务', code: 3 },
				{ info: '服务中', code: 4 },
				{ info: '已完成', code: 5 },
				{ info: '售后', code: 9 },
			],
			nStatus: '',
			isLogin: false,

			// 筛选弹窗
			filterPopup: {
				show: false,
				feeType: null,
				timeRange: '',
				startDate: '',
				endDate: ''
			},
			selectDateKey: '',
			dateValue: '',
			datePickerShow: false,
			feeOptions: [
				{ label: '免车费', value: 'free' },
				{ label: '不免车费', value: 'not_free' }
			],
			timeOptions: [
				{ label: '今日', value: 'today' },
				{ label: '近7天', value: '7days' },
				{ label: '近30天', value: '30days' },
				{ label: '近6个月', value: '6months' }
			],
			selectOrderDetail: {},
			showModal2: false,
		}
	},
	onLoad(query) {
		this.isLogin = !!uni.getStorageSync('wx_copenid');
	},
	onShow() {
		this.queryList(1, 10)
	},
	onHide() {
		this.resetFilter()
	},
	methods: {
		// 搜索订单
		queryList(pageNo, pageSize) {
			console.log(this.filterPopup)
			let params = {
				current: pageNo,
				size: pageSize,
				status: this.nStatus == -1 ? null : this.nStatus,
				projectName: this.searchProductName,
				contactPhoneNumber: this.searchPhoneNumber || '',
				startDate: this.filterPopup.startDate || '',
				endDate: this.filterPopup.endDate || '',
				isTrafficFree: this.filterPopup.feeType ? this.filterPopup.feeType === 'free' : null

			}
			queryOrder(params).then(res => {
				if (res.data.code === 200) {
					if (!res.data.data) return
					this.dataList = res.data.data.records;
					// if (this.dataList.length == 0) return
					// this.dataList[0].status = 3 //guo
					// this.dataList[0].execStatus = 2

					this.$refs.paging.complete(this.dataList);

				} else {
					this.$refs.paging.complete([]);

				}
			});
		},
		// 立即接单
		acceptOrder(item) {
			acceptOrder({
				id: item.id
			}).then(res => {
				console.log(res)
				if (res.data.code === 200) {
					this.$refs.paging.reload();
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			})
		},
		// 拒绝订单
		rejectOrder(item) {
			uni.showModal({
				title: '确认拒绝',
				content: '确定要拒绝该订单吗？',
				success: (res) => {
					if (res.confirm) {
						rejectOrder({
							id: item.id
						}).then(res => {
							console.log(res)
							if (res.data.code === 200) {
								this.$refs.paging.reload();
								uni.showToast({ title: res.data.msg, icon: 'none' });
							}
						})
					}
				}
			});

		},
		// 联系客服
		contactCustomerService() {
			
			uni.showToast({ title: '联系客服', icon: 'none' });
		},
		// 联系客户
		contactCustomer(item) {
			getCustomerPhone({
				orderId: item.id,
			}).then(res => {
				console.log(res)
				if (res.data.code === 200) {
					uni.showToast({ title: res.data.msg, icon: 'none' });
				} else {
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			}).catch(err => {
				console.log(err)
			})
			//uni.showToast({ title: '联系客户', icon: 'none' });
		},
		// 取消订单
		cancelOrder(item) {
			uni.navigateTo({
				url: '/pages/order/cancelOrder?orderId=' + item.id + '&orderStatus=' + item.status
			})

		},
		// 我已出发/签到
		startGoOut(item) {
			startGoOut({
				orderId: item.id,
			}).then(res => {
				console.log(res)
				if (res.data.code === 200) {
					this.$refs.paging.reload();
					uni.showToast({ title: res.data.msg, icon: 'none' });
				} else {
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			})
		},
		// 我已到
		arriveSign(item) {
			this.selectOrderDetail = item
			this.showSignPopup = true;
			this.phoneInputValue = '';
			this.signError = '';
			// 清空验证码输入
			this.$nextTick(() => {
				if (this.$refs.codeInput) {
					this.$refs.codeInput.clear();
				}
			});
		},
		// 监听输入（yi-code组件触发）
		onPhoneInput(e) {
			// 兼容不同调用方式
			const value = e.detail ? e.detail.value : e;
			// 过滤非数字字符
			const filteredValue = String(value || '').replace(/[^0-9]/g, '');
			this.phoneInputValue = filteredValue;
			this.signError = '';
		},
		// 输入完成
		onSignComplete(value) {
			console.log(this.selectOrderDetail)
			this.phoneInputValue = value;
			arriveSign({
				orderId: this.selectOrderDetail.id,
				phoneTail: this.phoneInputValue,//手机号后4位
			}).then(res => {
				console.log(res)
				if (res.data.code === 200) {
					this.showSignPopup = false;
					this.$refs.paging.reload();
					uni.showToast({ title: res.data.msg, icon: 'none' });
				} else {
					this.signError = res.data.msg;
					uni.showToast({ title: res.data.msg, icon: 'none' });
					
				}
			})
		},
		// 开始服务
		startService(item) {
			if (item.projectType == 1) {
				uni.navigateTo({
					url: '/pages/order/businessFormal?orderId=' + item.id
				})
				return
			}

			//陪玩开始服务
			startService({
				orderId: item.id,
			}).then(res => {
				if (res.data.code === 200) {
					this.$refs.paging.reload();
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			})
		},
		// 一键报警
		alarmOrder() {
			this.selectOrderDetail = item
			this.showModal = true

		},
		// 确认报警
		alarmOrderSure() {
			this.showModal = false
			alarmOrder({
				orderId: this.selectOrderDetail.orderId,
			}).then(res => {
				console.log(res)
				if (res.data.code === 200) {
					this.$refs.paging.reload();
					this.showModal1 = true
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			})
		},
		// 服务完成
		finishService(item) {
			console.log(item)

			const diff = new Date(item.appointmentEndTime).getTime() - new Date().getTime();
			this.diff = Math.floor(diff / (1000 * 60));
			if (this.diff > 6) {
				this.selectOrderDetail = item
				this.showModal2 = true
				return
			}
			this.finishServiceSure(item)

		},
		// 确认提前结束订单
		finishServiceSure(item) {
			finishService({
				orderId: item.id,
			}).then(res => {
				if (res.data.code === 200) {
					this.$refs.paging.reload();
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			})
		},
		// 提前结束
		cancelOrder2(item) {
			uni.showModal({
				title: '提示',
				content: '确定要提前结束该订单吗？',
				success: (res) => {
					if (res.confirm) {
						this.finishServiceSure(item)
					}
				}
			});
		},
		// 跳转搜索订单
		goSearch() {
			uni.navigateTo({
				url: '/pages/order/search'
			})
		},
		// 打开筛选弹窗
		goFilter() {
			this.filterPopup.show = true;
		},
		// 关闭筛选弹窗
		closeFilterPopup() {
			this.filterPopup.show = false;
			this.datePickerShow = false;

		},
		resetFilter() {
			this.filterPopup.feeType = '';
			this.filterPopup.timeRange = '';
			this.filterPopup.startDate = '';
			this.filterPopup.endDate = '';
		},

		// 格式化日期显示
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			return value;
		},
		// 打开起始日期选择器
		openStartDatePicker(key) {
			this.selectDateKey = key
			// 设置默认值
			if (this.filterPopup.startDate) {
				const str = this.filterPopup.startDate
				// 正则提取数字
				const arr = str.match(/(\d{4})年(\d{2})月(\d{2})日/)
				if (arr) {
					this.dateValue = `${arr[1]}-${arr[2]}-${arr[3]}`
				}
			} else {
				const now = new Date();
				this.dateValue = now.toISOString().split('T')[0];
			}
			this.datePickerShow = true;
		},
		// 日期选择器改变事件
		onChange(e) {
			const d = new Date(e.value);
			this.filterPopup[this.selectDateKey] = `${d.getFullYear()}年${String(d.getMonth() + 1).padStart(2, '0')}月${String(d.getDate()).padStart(2, '0')}日`;

		},
		// 打开结束日期选择器
		openEndDatePicker(key) {
			this.selectDateKey = key
			// 设置默认值
			if (this.filterPopup.endDate) {
				const str = this.filterPopup.endDate
				// 正则提取数字
				const arr = str.match(/(\d{4})年(\d{2})月(\d{2})日/)
				if (arr) {
					this.dateValue = `${arr[1]}-${arr[2]}-${arr[3]}`
				}
			} else {
				const now = new Date();
				this.dateValue = now.toISOString().split('T')[0];
			}
			this.datePickerShow = true;
		},
		timeRangeChange(e) {
			this.filterPopup.timeRange = e
			const now = new Date()
			// 日期格式化：转 年-月-日
			const formatCNDate = (date) => {
				const y = date.getFullYear()
				const m = String(date.getMonth() + 1).padStart(2, '0')
				const d = String(date.getDate()).padStart(2, '0')
				return `${y}年${m}月${d}日`
			}

			switch (e) {
				case 'today':
					this.filterPopup.startDate = formatCNDate(now);
					this.filterPopup.endDate = formatCNDate(now);
					break;
				case '7days':
					this.filterPopup.startDate = formatCNDate(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000));
					this.filterPopup.endDate = formatCNDate(now);
					break;
				case '30days':
					this.filterPopup.startDate = formatCNDate(new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000));
					this.filterPopup.endDate = formatCNDate(now);
					break;
				case '6months':
					this.filterPopup.startDate = formatCNDate(new Date(now.getTime() - 6 * 30 * 24 * 60 * 60 * 1000));
					this.filterPopup.endDate = formatCNDate(now);
					break;
			}
		},
		confirmFilter() {
			this.datePickerShow = false;
			this.filterPopup.show = false;
			this.$refs.paging.reload();
		},
		onPayOrder(item) {
			if (item.remainingTime <= 0) {
				uni.showToast({
					title: '订单已超时',
					icon: 'none'
				})
			} else {
				let str = uni.$u.queryParams({
					page: 'order',
					orderNo: item.orderNo
				});
				uni.navigateTo({
					url: `/pages/identify/pay_order${str}`
				})
			}

		},


		// 切换订单
		onTabChange(code, index) {
			this.current = index;
			this.nStatus = code;
			this.$refs.paging.reload();
		},
		// 跳转订单详情
		goDetails(id) {
			let str = uni.$u.queryParams({
				id: id
			});
			uni.navigateTo({
				url: `/pages/order/order_detail${str}`
			});
		},

		goLogin() {
			uni.navigateTo({
				url: '/setting/myNew/phone',
			})
			// uni.navigateTo({
			// 	url: '/pages/login/wxLogin'
			// })
		},
	},
}
</script>

<style scoped lang="scss">
// 线下签到弹窗
.sign-wrap {
	width: 650rpx;
	background: #fff;
	border-radius: 16rpx;
	padding: 48rpx;

	.sign-error {
		font-weight: 400;
		font-size: 26rpx;
		color: #F53F3F;
	}



	.sign-title {
		font-weight: 400;
		font-size: 30rpx;
		color: #1D2129;
		text-align: left;
		margin-bottom: 32rpx;
	}

	.sign-input-wrap {
		display: flex;
		justify-content: center;
	}
}

::v-deep .searchClass {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12rpx 32rpx;

	.u-search {
		width: 622rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 66rpx 66rpx 66rpx 66rpx;
		border: 1rpx solid #333335;

		.u-search__content {
			background: #FFFFFF !important;
		}

		.u-search__content__input {
			background: #fff !important;
			height: 30rpx !important;

			.u-search__content__input--placeholder {
				font-weight: 400 !important;
				font-size: 26rpx !important;
				color: #AAA !important;
				height: 30rpx !important;
			}
		}


		.u-search__action {
			margin-right: 8rpx;
			width: 104rpx;
			height: 48rpx;
			background: #333335;
			border-radius: 32rpx 32rpx 32rpx 32rpx;

			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;

		}


	}

	.orderBox {
		margin-left: 16rpx;
		height: 68rpx;
	}


}

::v-deep .zp-view-super {
	background-color: #F7F8FA !important;
}

.page-container {
	background: linear-gradient(180deg, #C1FFF8 0%, #B8FFF3 34%, #F5FFFF 100%);


	.warning {
		margin-top: 32rpx;
		background: #FFF8EC;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		padding: 16rpx;
		display: flex;
		gap: 8rpx;

		.text {
			font-weight: 400;
			font-size: 24rpx;
			color: #FF7D00;

		}
	}

	.tab-box {
		padding: 0 15rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 30rpx;
		z-index: 999;
		background: radial-gradient(circle, #fcfdff, #fcfdff);

		.item {
			height: 100%;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			display: flex;
			align-items: center;

		}

		.active {
			font-weight: 500;
			font-size: 36rpx;
			color: #1D2129;
			text-align: center;
			position: relative;
			z-index: 99999 !important;

			&::after {
				content: '';
				z-index: -1 !important;
				position: absolute;
				bottom: 18rpx;
				left: 50%;
				transform: translateX(-50%);

				width: 100%;
				height: 8rpx;
				background: linear-gradient(263deg, #45FFD7 0%, #7FFFBD 100%);
				border-radius: 2rpx 2rpx 2rpx 2rpx;
			}
		}
	}

	.list-box {
		flex: 1;
		padding: 32rpx;

		.item {
			width: 100%;
			padding: 32rpx;
			margin-bottom: 10rpx;
			font-size: 28rpx;
			margin-bottom: 28rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.row1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				text-align: left;

				.stetusBtn {
					padding: 0 12rpx;
					height: 36rpx;
					line-height: 36rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-weight: 400;
					text-align: center;
					font-size: 24rpx;
				}

				.status {
					background: #FFF0ED;
					color: #FF531C;

				}

				.status1 {
					background: #FFF7E7;
					color: #FF7D00;

				}

				.status2 {
					background: #E8FFEA;
					color: #00B42A;
				}


				.status3 {
					background: #F7F8FA;
					color: #4E5969;
				}

			}

			.row2 {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				text-align: left;

				.type {
					margin-left: 16rpx;
					display: flex;
					align-items: center;
				}
			}

			.row3 {
				display: flex;
				align-items: center;
				margin-top: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				margin-bottom: 24rpx;

				.cont {
					margin-left: 40rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #1D2129;
				}
			}

			.row4 {
				display: flex;
				margin: 24rpx 0 32rpx 0;
				height: 99rpx;

				.title {
					font-weight: 500;
					font-size: 30rpx;
					color: #1D2129;
				}

				.cont {
					display: flex;
					align-items: baseline;
					font-weight: 400;
					font-size: 28rpx;
					color: #1D2129;
				}
			}

			.refundStatus1 {
				width: 96rpx;
				height: 36rpx;
				background: #FFF2E5;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 1rpx solid #FF7D00;

				font-weight: 400;
				font-size: 24rpx;
				color: #FF7D00;
				display: flex;
				align-items: center;
				justify-content: center;

			}

			.refundStatus2 {
				width: 96rpx;
				height: 36rpx;
				background: FFF5F5;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 1rpx solid #F53F3F;

				font-weight: 400;
				font-size: 24rpx;
				color: #F53F3F;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;

			}

			.price {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-weight: 400;
				font-size: 24rpx;
				color: #1D2129;
				line-height: 24rpx;
				text-align: right;
			}

			.cont {
				color: rgb(162, 162, 162);
				font-size: 26rpx;
				line-height: 45rpx;
			}

			.btn {


				.button {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.pay {
						margin-left: 24rpx;
						margin-top: 24rpx;
						// display: flex;
						// align-items: center;
						// justify-content: center;
						width: 152rpx;
						height: 64rpx;
						line-height: 64rpx;
						text-align: center;
						background: rgba(51, 51, 53, 0.05);
						border-radius: 32rpx 32rpx 32rpx 32rpx;

						font-weight: 400;
						font-size: 26rpx;
						color: #1D2129;


					}

					.alarm {
						background-color: #F53F3F;
						color: #FFFFFF;
					}

					.main {
						background-color: #333335;
						font-weight: 500;
						color: #FFFFFF;
					}

					.main1 {
						width: 210rpx;

					}
				}
			}
		}
	}

	.popup-content {
		width: 90vw;
		padding: 100rpx 30rpx 30rpx;
		box-sizing: border-box;

		.table-header {
			background-color: #FBFBFB;
		}

		.success-tip {
			padding: 50rpx;
			font-size: 32rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.reson {
			margin: 30rpx;
		}

		.popup-btn {
			padding: 0 80rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	::v-deep .month-picker-container {
		margin-top: 15rpx;

		.u-transition {
			position: static !important;
		}

		.u-toolbar {
			display: none !important;
		}

		.u-picker__view__column__item {
			font-weight: 400 !important;
			font-size: 28rpx;
			color: #1D2129;

		}
	}

	.filter-content {
		padding: 32rpx;
		padding-bottom: 130rpx;
	}

	.filter-header {
		text-align: center;
		margin-bottom: 56rpx;
	}

	.filter-title {
		font-weight: 500;
		font-size: 36rpx;
		color: #1D2129;
	}

	.filter-section {}

	.section-title {
		font-weight: 500;
		font-size: 28rpx;
		color: #4E5969;
		margin-bottom: 32rpx;
	}

	.filter-options {
		display: flex;
		flex-wrap: wrap;
		gap: 18rpx;
	}

	.filter-option {
		width: 158rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background: #FFFFFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 1rpx solid #C9CDD4;
		transition: all 0.3s;

		font-weight: 400;
		font-size: 28rpx;
		color: #4E5969;

		&.active {
			background: linear-gradient(263deg, #45FFD7 0%, #7FFFBD 100%);
			color: #1D2129;
			border: 1rpx solid #C9CDD400;
			;
		}
	}

	.date-range {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;
	}

	.date-item {
		flex: 1;
	}

	.date-label {
		font-size: 24rpx;
		color: #8F959E;
		margin-bottom: 12rpx;
		display: block;
	}

	.date-input {
		width: 308rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 1rpx solid #C9CDD4;

		font-weight: 400;
		font-size: 28rpx;
		color: #1D2129;
	}

	.date-separator {
		padding: 0 22rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #1D2129;
	}

	.filter-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 24rpx 46rpx;
		background: #FFFFFF;
	}

	.btn-reset {
		width: 311rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #F5F5F5;
		border-radius: 44rpx;
		font-size: 32rpx;
		color: #4E5969;
		margin-right: 32rpx;
	}

	.btn-confirm {
		width: 311rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #333335;
		border-radius: 44rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}
}

// 弹窗
.modal-wrap1 {
	width: 590rpx;
	//height: 314rpx;
	background: #fff;
	border-radius: 16rpx;

	.title {
		font-weight: 600;
		font-size: 32rpx;
		color: #1D2129;
		text-align: center;
		margin-top: 32rpx;
	}

	.content {
		padding: 48rpx 48rpx 0 48rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #1D2129;
		text-align: center;
	}

	.btn-box {
		display: flex;
		justify-content: center;
		gap: 32rpx;
		padding: 64rpx 0;

	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 215rpx;
		height: 80rpx;
		background: #F5F5F5;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		border: 1rpx solid #F5F5F5;
	}

	.left {
		font-weight: 400;
		font-size: 28rpx;
		color: #1D2129;
		text-align: center;
	}

	.right {
		background-color: #333335;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
	}

}
</style>
