<template>
	<view class="container">
		<!-- 顶部背景 -->
		<view class="header">
			<image class="bg-img" src="/static/images/table_header.png" mode="aspectFill"></image>
			<view style="display: flex;align-items: center;padding-left: 20rpx;">
				<uni-icons style="position: absolute;left: 30rpx;" @click="goBack" type="left" color="black"
					size="24"></uni-icons>
			</view>
			<view class="title">数据统计({{total}})</view>
		</view>
		<view class="content_top">
			<!-- 选项卡 -->
			<view class="tabs">
				<view class="tab" :class="{'active':tapIndex == index}" v-for="(item,index) in tapList" :key="index"
					@click="tapIcon(index)">
					<view class="">{{item.label || "无"}}</view>
					<view class="tap_img" style="display: block;" v-show="tapIndex == index">
						<image src="/static/images/icon_tap.png" mode="widthFix" class="tap_icon"></image>
					</view>
				</view>
			</view>
			<view style="display: flex;">
				<view class="search">
					<picker @change="bindTimeTypeChange" range-key="label" :value="timeTypeIndex"
						:range="timeTypeArray">
						<view class="uni-input border_" style="padding: 5rpx 20rpx;display: flex;">
							{{timeTypeArray[timeTypeIndex].label}}
							<view class=""> <u-icon name="arrow-down-fill" color="#0357FF" size="12"></u-icon></view>
						</view>
					</picker>
				</view>
				<view style="align-items: center;display: flex; border-radius: 50rpx;">
					<uni-datetime-picker v-model="queryParams.searchTimeArray" type="daterange"
						@change="queryParams.pageNo=1;initData()" rangeSeparator="至" class="">
						<view class="cont_time" style="border: 1px solid #0357FF;"
							v-if="queryParams.searchTimeArray.length>0">
							<view class="cont_size">{{queryParams.searchTimeArray[0]}}</view>
							<view class="bule_size">~</view>
							<view class="cont_size">{{queryParams.searchTimeArray[1]}}</view>
							<view class=""> <u-icon name="arrow-down-fill" color="#0357FF" size="12"></u-icon></view>
						</view>
						<view v-else class="cont_time border_">
							全部
							<view class=""> <u-icon name="arrow-down-fill" color="#0357FF" size="12"></u-icon></view>
						</view>
					</uni-datetime-picker>
				</view>
				<view class="search" @click="screening">
					筛选
				</view>
			</view>
		</view>

		<!-- 表格 -->
		<view class="" style="padding-left: 30rpx;">
			<view class="census" v-if="checkPermi(['repair:tick:profit'])">
				<span class="credited">产值{{ laborPartsMoney }}元</span>
				<span class="notCredited">毛利&nbsp;:&nbsp;{{ totalProfit }}元</span>
				<span
					class="onlinePay">含工时毛利率&nbsp;:&nbsp;{{ statisticsInfo && statisticsInfo.profitRateWithLabor !== null && statisticsInfo.profitRateWithLabor !== undefined && !isNaN(statisticsInfo.profitRateWithLabor) ? (statisticsInfo.profitRateWithLabor * 100).toFixed(2) : '0.00' }}
					%</span>
				<span
					class="cashPay">不含工时毛利率&nbsp;:&nbsp;{{ statisticsInfo && statisticsInfo.profitRateWithoutLabor !== null && statisticsInfo.profitRateWithoutLabor !== undefined && !isNaN(statisticsInfo.profitRateWithoutLabor) ? (statisticsInfo.profitRateWithoutLabor * 100).toFixed(2) : '0.00' }}
					%</span>
			</view>
			<uni-table emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr style="background: #E5EEFF;">
					<uni-th>车辆信息</uni-th>
					<!-- <uni-th>业务</uni-th> -->
					<!-- <uni-th>渠道</uni-th> -->
					<uni-th>经办人</uni-th>
					<uni-th>经办人手机号</uni-th>
					<uni-th>进场时间</uni-th>
					<uni-th>付款状态</uni-th>
					<uni-th>结算时间</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in list" :key="index" class="table-row" @click.native="goWorkDetail(item)"
					:class="{'row-bg': index % 2 === 1}">
					<uni-td>{{ item.carNo }}</uni-td>
					<!-- <uni-td>{{ item.sourceStr }}</uni-td> -->
					<!-- <uni-td>{{ item.channel }}</uni-td> -->
					<uni-td>{{ item.handleName }}</uni-td>
					<uni-td>{{ item.handleMobile }}</uni-td>
					<uni-td>{{ formatDateTimeToMinute(item.createTime) }}</uni-td>
					<uni-td>{{ dictData[item.payStatus] }}</uni-td>
					<uni-td>{{ item.settlementTime ? formatDateTimeToMinute(item.settlementTime) : '' }}</uni-td>
				</uni-tr>

			</uni-table>
			<uni-pagination :current="current" :pageSize="queryParams.pageSize" :total="total"
				@change="onPageChange"></uni-pagination>
		</view>

		<!-- 筛选弹窗 -->
		<uni-popup ref="popup" type="right" background-color="#fff">
			<view class="popup">
				<!-- 添加滚动区域 -->
				<scroll-view class="popup-content" scroll-y="true">
					<view class="reset" @click="resetQueryParams">
						<uni-icons type="loop" color="#165DFF"></uni-icons>
						重置筛选
					</view>
					<view>
						<uni-search-bar radius="50" bgColor="#F8F4FF" @confirm="queryParams.pageNo=1;initData()"
							v-model="queryParams.ticketNo" @cancel="initData()" @clear="initData()"
							placeholder="请输入关键字"></uni-search-bar>
					</view>
					<uni-forms labelPosition="top" class="body-top-tab">
						<!-- 新增毛利润筛选 -->
						<uni-forms-item label="毛利润区间">
							<picker @change="bindProfitRateChange" :value="profitRateIndex" :range="profitRateList">
								<view class="uni-input">{{profitRateList[profitRateIndex]}}</view>
							</picker>
						</uni-forms-item>

						<!-- 自定义毛利润区间 -->
						<uni-forms-item label="自定义毛利润区间" v-if="profitRateIndex === 3">
							<view class="custom-profit-range">
								<view class="range-inputs">
									<input class="range-input" type="number" v-model="customProfitRate[0]"
										placeholder="开始百分比" />
									<text class="range-separator">-</text>
									<input class="range-input" type="number" v-model="customProfitRate[1]"
										placeholder="结束百分比" />
									<text class="range-unit">%</text>
								</view>
								<button class="confirm-custom-btn" @click="confirmCustomProfitRange">确定</button>
							</view>
						</uni-forms-item>

						<uni-forms-item label="业务渠道">
							<picker @change="bindBusiChange" :value="busiIndex" :range="busiList">
								<view class="uni-input">{{busiList[busiIndex]}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="维修类别">
							<picker @change="bindRepairTypeChange" :value="repairTypeIndex" :range="repairTypeList">
								<view class="uni-input">{{repairTypeList[repairTypeIndex]}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="工种类型">
							<picker @change="bindWorkTypeChange" :value="workTypeIndex" :range="workeTypeList">
								<view class="uni-input">{{workeTypeList[workTypeIndex]}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="工单状态">
							<picker @change="bindTicketsStatusChange" :value="ticketsStatusIndex"
								:range="ticketsStatusList">
								<view class="uni-input">{{ticketsStatusList[ticketsStatusIndex]}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="来源">
							<uni-data-picker :localdata="cusFromList" v-model='queryParams.cusFrom'
								popup-title="请选择渠道和来源" :map="{text:'name',value:'name'}"
								@change="bindCusFromChange"></uni-data-picker>
						</uni-forms-item>
						<uni-forms-item label="收款状态">
							<picker @change="bindpayStatusChange" :value="payStatusIndex" :range="payStatusList">
								<view class="uni-input">{{payStatusList[payStatusIndex]}}</view>
							</picker>
						</uni-forms-item>
					</uni-forms>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import {
		formatDateTimeToMinute,
		getDictTextByCodeAndValue,
		getDictByCode,
		getDateRange,
		toPickerData,
		handleTree
	} from '@/utils/utils.js';
	import {
		checkPermi,
		checkRole
	} from "@/utils/permission"; // 权限判断函数
	import {
		getToken,
		getUserInfo,
		getStrData,
		getTenantId,
		setJSONData,
		getJSONData,
		getStorageWithExpiry,
		setStorageWithExpiry
	} from '@/utils/auth'

	export default {
		data() {
			return {
				list: [],
				data: undefined,
				queryParams: {
					searchTimeArray: [],
					selectType: 'all',
					pageNo: 1,
					pageSize: 10,
					search: null
				},
				// 毛利润筛选相关数据
				profitRateIndex: 0,
				profitRateList: ['全部', '50%以下', '50%-60%', '自定义'],
				customProfitRate: [0, 100], // 自定义区间，默认0-100%
				title: '',
				timeTypeArray: [{
					label: '进场时间',
					value: 'create'
				}, {
					label: '结算时间',
					value: 'settlement'
				}, ],
				timeTypeIndex: 1,
				total: 0,
				current: 0,
				// 工种选中下标
				workTypeIndex: 0,
				// 维修项目选中下标
				repairTypeIndex: 0,
				//维修项目可选值
				repairTypeList: ['按维修类别'],
				//维修项目可选值--值
				repairTypeValueList: [''],
				//工种可选值
				workeTypeList: ['按工种类型'],
				//工种可选值--值
				workeTypeValueList: [''],
				//客户来源可选值
				cusFromList: [
					['按客户来源'],
				],
				//客户来源可选值---值
				cusFromValueList: [''],
				// 客户来源选中下标
				cusFromIndex: [0, 0],
				//工单状态可选值
				ticketsStatusList: ['按工单状态', '进厂', '维修中', '已竣工', '已交车', '未结算', '在厂'],
				//工单状态可选值--值
				ticketsStatusValueList: ['', 'jinchang', 'weixiuzhong', 'yijungong', 'yijiaoche', 'weijiesuan',
					'zaichang'
				],
				//工单状态选中下标
				ticketsStatusIndex: 0,
				//支付状态可选值
				payStatusList: ['按支付状态', '应收款', '已收款', '待收款'],
				//支付状态可选值--值
				payStatusValueList: ['', 'receivable', 'receivedAmount', 'pendingAmount'],
				//支付状态选中下标
				payStatusIndex: 0,
				//渠道可选值
				busiList: ['按业务渠道'],
				//渠道可选值--值
				busiValueList: [''],
				//渠道选中下标
				busiIndex: 0,
				safeLeft: 0,
				dictData: undefined,
				statisticsInfo: {},
				tapIndex: 0,
				tapList: [{
						label: "本日",
						value: "day",
					},
					{
						label: "本月",
						value: "month",
					},
					{
						label: "本年",
						value: "year",
					},
					{
						label: "全部",
						value: "all",
					},
				],
			}
		},

		computed: {
			laborPartsMoney() {
				return this.statisticsInfo && this.statisticsInfo.totalLaborPartsMoney ? this.statisticsInfo
					.totalLaborPartsMoney : 0
			},
			totalProfit() {
				return this.statisticsInfo && this.statisticsInfo.totalProfit ? this.statisticsInfo.totalProfit : 0
			},
			profitRateWithLabor() {
				if (this.statisticsInfo && this.statisticsInfo.profitRateWithLabor != null && !isNaN(this.statisticsInfo
						.profitRateWithLabor)) {
					return (this.statisticsInfo.profitRateWithLabor * 100).toFixed(2)
				}
				return '0.00'
			},
			profitRateWithoutLabor() {
				if (this.statisticsInfo && this.statisticsInfo.profitRateWithoutLabor != null && !isNaN(this.statisticsInfo
						.profitRateWithoutLabor)) {
					return (this.statisticsInfo.profitRateWithoutLabor * 100).toFixed(2)
				}
				return '0.00'
			}
		},
		watch: {
			repairTypeIndex(newval) {
				this.initData()
			},
			workTypeIndex(newval) {
				this.initData()
			},
			ticketsStatusIndex(newval) {
				this.initData()
			},
			workTypeIndex(newval) {
				this.initData()
			},
			busiIndex(newval) {
				this.initData()
			},
			payStatusIndex(newval) {
				this.initData()
			},
		},
		onResize() {
			console.log('执行了刷新');
		},
		methods: {
			checkPermi,
			checkRole,
			formatDateTimeToMinute,
			getDictTextByCodeAndValue,
			goBack() {
				// setTimeout(() => {
				uni.redirectTo({
					url: '/pages/white/white'
				});
				// }, 300)
			},
			async initData() {
				await this.getStatistics();
				this.queryParams.pageNo = 1;
				await this.getList()
			},
			setDictItem(dictCode, item) {
				if ("repair_type" == dictCode) {
					//维修项目
					this.repairTypeList.push(item.label)
					this.repairTypeValueList.push(item.value)
				} else if ("cus_data_from" == dictCode) {
					//客户来源
					this.cusFromList.push(item.label)
					this.cusFromValueList.push(item.value)
				} else if ("repair_tickets_status" == dictCode) {
					//工单状态
					this.ticketsStatusList.push(item.label)
					this.ticketsStatusValueList.push(item.value)
				} else if ("repair_work_type" == dictCode) {
					//工单状态
					this.workeTypeList.push(item.label)
					this.workeTypeValueList.push(item.value)
				}
			},
			// 毛利润区间选择
			bindProfitRateChange(e) {
				this.profitRateIndex = e.detail.value;
				this.updateProfitRateRanges();
			},

			// 更新毛利润区间参数
			updateProfitRateRanges() {
				switch (this.profitRateIndex) {
					case 0: // 全部
						this.queryParams.profitRateRanges = [];
						break;
					case 1: // 50%以下
						this.queryParams.profitRateRanges = [0,
							0.5
						];
						break;
					case 2: // 50%-60%
						this.queryParams.profitRateRanges = [
							0.5, 0.6
						];
						break;
					case 3: // 自定义（使用customProfitRate）
						this.confirmCustomProfitRange();
						break;
				}
				this.queryParams.pageNo = 1;
				this.initData();
			},

			// 确认自定义毛利润区间
			confirmCustomProfitRange() {
				if (this.customProfitRate[0] === '' || this.customProfitRate[1] === '') {
					uni.showToast({
						title: '请输入完整的区间',
						icon: 'none'
					});
					return;
				}

				const min = parseFloat(this.customProfitRate[0]) / 100;
				const max = parseFloat(this.customProfitRate[1]) / 100;

				if (min >= max) {
					uni.showToast({
						title: '开始值必须小于结束值',
						icon: 'none'
					});
					return;
				}

				this.queryParams.profitRateRanges = [min, max];
				console.log('tijioa', this.queryParams.profitRateRanges);
				this.queryParams.pageNo = 1;
				this.initData();
			},
			screening() {
				this.$refs.popup.open()
			},
			/**
			 * 查2个数据字典备用---客户注册方式-cus_data_from、维修业务分类-repair_type
			 */
			initDict(dictCode) {
				let dictArray = getStorageWithExpiry(dictCode);
				if (null == dictArray || undefined == dictArray) {
					request({
						url: '/admin-api/system/dict-data/type',
						method: 'get',
						params: {
							type: dictCode
						}
					}).then((res) => {
						if (res.code == 200) {
							setStorageWithExpiry(dictCode, res.data, 3600)
							this.$nextTick(() => {
								res.data.map(item => {
									this.setDictItem(dictCode, item)
								})
							})
						}
					})
				} else {
					this.$nextTick(() => {
						dictArray.map(item => {
							this.setDictItem(dictCode, item)
						})
					})
				}
			},
			/**
			 * 切换维修项目类型
			 */
			bindRepairTypeChange(e) {
				this.repairTypeIndex = e.detail.value
				// this.onRefresherrefresh()
			},
			/**
			 * 切换维修项目类型
			 */
			bindBusiChange(e) {
				this.busiIndex = e.detail.value
				console.log('选择的渠道', this.busiValueList[e.detail.value]);
				// this.onRefresherrefresh()
			},
			/**
			 * 切换客户来源
			 */
			bindCusFromChange(e) {
				this.initData()
				// this.onRefresherrefresh()
			},
			/**
			 * 切换工单状态
			 */
			bindTicketsStatusChange(e) {
				this.ticketsStatusIndex = e.detail.value
				// this.onRefresherrefresh()
			},
			/**
			 * 切换工单状态
			 */
			bindpayStatusChange(e) {
				this.payStatusIndex = e.detail.value
				// this.onRefresherrefresh()
			},
			/**
			 * 切换工种类型
			 */
			bindWorkTypeChange(e) {
				this.workTypeIndex = e.detail.value
				// this.onRefresherrefresh()
			},
			bindTimeTypeChange(e) {
				console.log(e);
				this.timeTypeIndex = e.detail.value

				this.queryParams.timeType = this.timeTypeArray[e.detail.value].value
				this.initData()
				// this.onRefresherrefresh()
			},
			async getDict() {
				const list = await getDictByCode('repair_pay_status')
				this.dictData = list?.reduce((map, item) => {
					map[item.value] = item.label
					return map
				}, {}) ?? {} // 如果 list 为空或 reduce 返回 undefined，则使用空对象
				console.log('dict', this.dictData)
			},
			slectRange(index) {
				this.selected = index;
				console.log(index, this.selected);
				const {
					value
				} = this.tapList[index];
				console.log(value);
				this.queryParams.searchTimeArray = getDateRange(value);
			},
			async tapIcon(index) {
				this.tapIndex = index
				await this.slectRange(index)
				this.queryParams.pageNo = 1
				await this.initData()
			},
			setCurrentMonthRange() {
				// 直接使用 Date 对象
				const now = new Date();

				// 创建月初的 Date 对象
				const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);

				this.queryParams.searchTimeArray = [
					this.formatDate(now), // 月初
					this.formatDate(now), // 今天
				];
			},
			/**
			 * 获取业务来源和渠道
			 */
			queryBusiAndCus() {
				request({
					url: `/admin-api/business/list`,
					method: 'GET',
					params: {
						systemCode: 'repair'
					}
				}).then(res => {
					//过滤出pid为0的
					this.busiList.push(
						...res.data
						.filter(item => item.pid === 0)
						.map(item => item.name)
					);
					//过滤出pid为0的
					this.busiValueList.push(
						...res.data
						.filter(item => item.pid === 0)
						.map(item => item.name)
					);

					this.cusFromList = handleTree(res.data, 'id', 'pid')
				})
			},
			formatDate(d) {
				// 添加类型检查，确保 d 是 Date 对象
				if (!(d instanceof Date)) {
					console.error("formatDate() 期望接收 Date 对象，但收到:", d);
					d = new Date(d); // 尝试转换为 Date 对象
					if (isNaN(d.getTime())) {
						// 检查是否有效日期
						d = new Date(); // 如果转换失败，使用当前日期
					}
				}
				return `${d.getFullYear()}-${this.pad(d.getMonth() + 1)}-${this.pad(
			  d.getDate()
			)}`;
			},
			// 补零：1 → 01
			pad(n) {
				return n.toString().padStart(2, "0");
			},
			getList() {
				let paramsObj = {
					repairType: this.repairTypeValueList[this.repairTypeIndex],
					workType: this.workeTypeValueList[this.workTypeIndex],
					ticketsStatus: this.ticketsStatusValueList[this.ticketsStatusIndex],
					busiFrom: this.busiValueList[this.busiIndex],
					payStatus: this.payStatusValueList[this.payStatusIndex],
					// timeType: 'settlement',
					...this.queryParams
				}

				request({
					url: `/admin-api/repair/tickets/pageType`,
					params: paramsObj
				}).then(res => {
					this.list = res.data.records
					this.total = res.data.total
					this.current = res.data.current
				})
			},
			onPageChange(e) {
				this.queryParams.pageNo = e.current
				this.getList()
			},
			goWorkDetail(data) {
				console.log('执行');
				// 退出时恢复自动（或者你项目里默认的方向）
				// #ifdef APP-PLUS
				plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
				plus.navigator.setFullscreen(false);
				// #endif
				const innerUrl = `/pages-order/orderDetail/orderDetail?id=${data.id}&isDetail=1`
				const url = `/pages-business/white/newWhite?url=${encodeURIComponent(innerUrl)}`
				setTimeout(() => {
					uni.redirectTo({
						url: innerUrl
					})
				}, 1000); // 300毫秒延时，可以根据需要调整
			},
			getStatistics() {
				let paramsObj = {
					repairType: this.repairTypeValueList[this.repairTypeIndex],
					workType: this.workeTypeValueList[this.workTypeIndex],
					ticketsStatus: this.ticketsStatusValueList[this.ticketsStatusIndex],
					busiFrom: this.busiValueList[this.busiIndex],
					...this.queryParams
				}
				request({
					url: '/admin-api/repair/tickets/getStatistics',
					params: paramsObj
				}).then(res => {
					this.statisticsInfo = res.data
				})
			},
			/**
			 * 重置请求参数
			 */
			resetQueryParams() {
				this.queryParams.pageNo = 1
				this.queryParams.pageSize = 10
				this.queryParams.search = null
				this.queryParams.cusFrom = null
				this.queryParams.ticketNo = null

				this.repairTypeIndex = 0
				this.workTypeIndex = 0
				this.ticketsStatusIndex = 0
				this.busiIndex = 0
				this.payStatusIndex = 0
			}
		},
		//页面显示时切换为横屏配置
		async onLoad(options) {
			await this.setCurrentMonthRange()
			await this.getDict()
			await this.initDict("repair_type")
			await this.initDict("repair_work_type")
			if (options.selectType) {
				this.ticketsStatusIndex = this.ticketsStatusValueList.indexOf(options.selectType);
			}
			if (options.repairType) {
				this.repairTypeIndex = this.repairTypeValueList.indexOf(options.repairType);
			}
			if (options.payStatus) {
				this.payStatusIndex = this.payStatusValueList.indexOf(options.payStatus);
			}
			if (options.dateRange) {
				this.queryParams.searchTimeArray = JSON.parse(options.dateRange);
			}
			if (options.busiFrom) {
				this.queryParams.busiIndex = this.this.busiValueList.indexOf(options.busiFrom);
			}
			if (options.cusFrom) {
				this.queryParams.cusFrom = options.cusFrom;
			}
			if (options.projectId) {
				console.log('options.projectId', options.projectId);
				this.queryParams.projectId = options.projectId;
			}
			if (options.timeType) {
				this.queryParams.timeType = options.timeType;
			}
			if (options.carBrandId) {
				this.queryParams.carBrandId = options.carBrandId;
			}
			if (options.insuranceCompany) {
				this.queryParams.insuranceCompany = options.insuranceCompany;
			}
			if (options.accessoriesType) {
				this.queryParams.accessoriesType = JSON.parse(options.accessoriesType);
			}
			if (options.workType) {
				this.queryParams.workType = options.workType;
			}
			if (options.carYearType && options.carYearRange) {
				if (options.carYearType == 'arr') {
					this.queryParams.carAgeRange = [0, 6]
				} else {
					this.queryParams.carAge = options.carYearRange
				}
			}
			this.initData()
			this.queryBusiAndCus()
			// #ifdef APP-PLUS
			uni.showLoading({
				title: "加载中..."
			})
			setTimeout(() => {
				plus.screen.lockOrientation('default');
				uni.hideLoading();
			}, 1200)
			// #endif
		},
		//页面卸载时切换为竖屏配置
		onUnload() {
			// // 退出时恢复自动（或者你项目里默认的方向）
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
			plus.navigator.setFullscreen(false);
			// #endif
		},
		// 监听页面返回
		onBackPress() {
			console.log('执行跳转');
			// 跳转至空白页
			uni.redirectTo({
				url: '/pages/white/white'
			});
			return true;
		},
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		background-color: white;
		padding-left: env(safe-area-inset-left);
	}

	/* 顶部背景和标题 */
	.header {
		display: flex;
		position: relative;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		padding: 20rpx 40rpx;
		padding-top: var(--status-bar-height); //给组件加个上边距
	}

	.bg-img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		/* z-index: -1; */
	}

	.title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		line-height: 100rpx;
		z-index: 2;
	}

	/* 表格 */
	.table {
		margin: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.table-row {
		/* flex-direction: row;
		display: flex; */
	}

	.table-header {
		background-color: #f2f6ff;
		font-weight: bold;
	}

	.table-cell {
		flex: 1;
		padding: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #555;
	}

	.row-bg {
		background-color: #f9fbff;
	}

	.status {
		color: #d4a017;
		/* 金色 */
		font-weight: 500;
	}

	/* 选项卡样式 */
	.tabs {
		display: flex;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
	}

	.cont_time {
		background: #F1F4F7;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 30rpx;

		width: 386rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
	}

	.cont_size {
		font-weight: 400;
		font-size: 24rpx;
		color: #686C7A;
	}

	.tab {
		margin-right: 40rpx;
		font-size: 28rpx;
		color: #666;
		padding: 10rpx 0;

		width: 56rpx;
		height: 28rpx;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 400;
		font-size: 28rpx;
		color: #707677;
		line-height: 42rpx;
		text-align: right;
		font-style: normal;
	}

	.tab.active {
		color: #007AFF;
		font-weight: bold;

		width: 56rpx;
		height: 28rpx;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: bold;
		font-size: 28rpx;
		color: #292D2E;
		line-height: 42rpx;
		text-align: right;
		font-style: normal;

		margin-bottom: 20rpx;
	}

	.tap_img {
		height: 3px;
		text-align: center;
		margin: 0 auto;

		image {
			width: 34rpx;
			height: 12rpx;
		}
	}

	.content_top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding-left: 30rpx;
		align-items: center;
		margin-top: 30rpx;
	}

	.census {
		display: flex;
		justify-content: right;
		font-weight: bold;
		font-size: 30rpx;
		/* margin: 1rem 1rem 1rem 0; */
	}

	.census>span {
		padding-left: 3rem;
	}

	.credited {
		color: green;
	}

	.notCredited {
		color: gray;
	}

	.onlinePay {
		color: blue;
	}

	.cashPay {
		color: goldenrod;
	}

	.signedPay {
		color: orange;
	}

	.content_right {
		display: flex;
		align-items: center;
	}

	.line {
		width: 2rpx;
		height: 60rpx;
		background-color: #DDDDDD;
	}

	.tap_icon {
		width: 40rpx;
		height: 40rpx;
	}

	.search {
		display: flex;
		align-items: center;
	}

	.popup {
		padding-top: var(--status-bar-height);
		width: 700rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.popup-content {
		flex: 1;
		height: 100%;
		overflow-y: auto;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.border_ {
		border: 1px solid #0357FF;
		border-radius: 50rpx;
		align-items: center;
	}

	.body-top-tab {
		background: white;
		display: flex;
		font-size: 30rpx;
		padding: 5rpx 0;
		flex-direction: column;
	}

	.body-top-tab .line {
		width: 2rpx;
		height: 60rpx;
		background-color: #DDDDDD;
	}

	.body-top-tab-item {
		width: 100%;
		padding: 20rpx 0;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.body-top-tab-item .label {
		font-size: 28rpx;
		color: #333;
	}

	.reset {
		color: #165DFF;
		padding: 20rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	/* 横屏适配 */
	@media (orientation: landscape) {
		.popup {
			width: 60vw;
		}

		.popup-content {
			max-height: 100vh;
		}
	}
</style>