<template>
	<view class="artisan-page">
		<view v-show="currentIndex == 0">
			<view class="bg">
				<!-- 顶部导航栏 -->
				<custom-navbar title="商家" :show-back="true" title-color="#000000"
					backgroundColor="transparent"></custom-navbar>

				<!-- 头像信息区 -->
				<view class="profile-section">
					<view class="profile-info">
						<image class="avatar" v-if="userInfo.head_photo" :src="userInfo.head_photo" mode="aspectFill">
						</image>
						<view class="info-content">
							<view class="name">{{ userInfo.name }}</view>
							<view class="welcome">欢迎使用美融融商家</view>
						</view>
					</view>
					<view class="center-btn" @click="goRoleMy">
						<text class="center-text"> 商家中心</text>
						<image class="arrow-right" src="/static/images/arrow_right.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="switch-section">
				<view class="center-btn">
					<text class="switch-tip" v-if="userInfo.order_taking == 1">已开启接单</text>
					<text class="switch-tip" v-if="userInfo.order_taking == 2">已关闭接单</text>
				</view>

				<view class="switch-box" @click="handleSwitchChange()"
					:class="{ disswitch: userInfo.order_taking == 2 }">
					<text class="switch-text" v-if="userInfo.order_taking == 1">接单</text>
					<view class="switch-yuan"></view>
					<text class="switch-text" v-if="userInfo.order_taking == 2">不接单</text>
				</view>
			</view>

			<!-- 订单类型 -->
			<view class="order-class" :style="{paddingBottom:count != 0?`60rpx`:`40rpx`}">
				<scroll-view scroll-x="true" scroll-with-animation>
					<view class="order-types">
						<view class="order-type-item" @click="searchTypeOrder(0)" :class="{ active: typeId == 0 }">
							<text class="type-name">到店订单</text>
							<view class="active-line" v-if="typeId == 0"></view>
						</view>
						<view class="order-type-item" @click="searchTypeOrder(2)" :class="{ active: typeId == 2 }">
							<text class="type-name">自营到店订单</text>
							<view class="active-line" v-if="typeId == 2"></view>
						</view>
						<view class="order-type-item" @click="searchTypeOrder(1)" :class="{ active: typeId == 1 }">
							<text class="type-name">工位订单</text>
							<view class="active-line" v-if="typeId == 1"></view>
						</view>
						<view class="order-type-item" @click="searchTypeOrder(3)" :class="{ active: typeId == 3 }">
							<text class="type-name">上门订单</text>
							<view class="active-line" v-if="typeId == 3"></view>
						</view>
						<view class="order-type-item" @click="searchTypeOrder(4)" :class="{ active: typeId == 4 }">
							<text class="type-name">自营上门订单</text>
							<view class="active-line" v-if="typeId == 4"></view>
						</view>
					</view>
				</scroll-view>


				<scroll-view class="order-state" scroll-x="true" scroll-with-animation v-if="typeId == 1">
					<view class="order-state-item" @click="handleOrderState(2)" :class="{ active: typeOrder == 2 }">
						<text class="state-name">待接单({{ ordernum.djd }})</text>
					</view>
					<view class="order-state-item" @click="handleOrderState(3, 0)" :class="{ active: typeOrder == 3 }">
						<text class="state-name">待开始({{ ordernum.dfw }})</text>
					</view>
					<view class="order-state-item" @click="handleOrderState(4)" :class="{ active: typeOrder == 4 }">
						<text class="state-name">待完成({{ ordernum.dwc }})</text>
					</view>
				</scroll-view>
				<view class="order-state" v-else-if="typeId == 3 || typeId == 4">
					<view class="order-state-item" @click="handleOrderType(2)" :class="{ active: typeOrder == 2 }">
						<text class="state-name">待接单({{ ordernum.noconfirmnum }})</text>
					</view>
					<view class="order-state-item" @click="handleOrderType(3)" :class="{ active: typeOrder == 3 }">
						<text class="state-name">待开始({{ ordernum.noservernum }})</text>
					</view>
					<view class="order-state-item" @click="handleOrderType(4)" :class="{ active: typeOrder == 4 }">
						<text class="state-name">待完成({{ ordernum.nocompletednum }})</text>
					</view>
				</view>
				<view class="order-state" v-else>
					<view class="order-state-item" @click="handleOrderType(3)" :class="{ active: typeOrder == 3 }">
						<text class="state-name">待服务({{ ordernum.noservernum }})</text>
					</view>
					<view class="order-state-item" @click="handleOrderType(4)" :class="{ active: typeOrder == 4 }">
						<text class="state-name">待完成({{ ordernum.nocompletednum }})</text>
					</view>
				</view>

			</view>

			<!-- 订单列表 -->
			<!--  -->
			<view class="order-list" v-if="count != 0">
				<view class="order_item" v-for="(item, i) in orderList" :key="item.id">
					<OrderCard v-if="typeId != 1" :haveButton="haveButton" :showState="false" :dataItem="item"
						:typeId="typeId" @cancel="cancelOrder($event, item)" @start="startOrder($event, item)"
						@done="endOrder($event, item)" @goOrderDetail="goOrderDetail" />
					<WorkHourOrderCard v-else :showState="false" :dataItem="item" :typeId="typeId"
						@cancel="cancelOrder($event, item)" @accept="confirmOrder($event, item)"
						@start="startOrder($event, item)" @done="endOrder($event, item)" @goOrderDetail="goOrderDetail">
					</WorkHourOrderCard>
				</view>
			</view>
			<noData  v-else></noData>
			<!-- <view class="nothings-box" v-else>
				<text class="nothings-text">暂无数据...</text>
			</view> -->
			<serviceCodeInput :show="showInput" @close="showInput = false" @confirm="onConfirm" />
		</view>
		<MyPage v-show="currentIndex == 1" :unbindReadNum="unbindReadNum"></MyPage>
		<MyTabBar @change="changeIndex" :tabList="tabList" :currentIndex="currentIndex"></MyTabBar>
	</view>
</template>

<script>
	import OrderCard from "./components/orderCard2.vue";
	import WorkHourOrderCard from "./workSpace/components/orderCard.vue";
	import request from "../../utils/request";
	import MyTabBar from "@/components/MyTabBar.vue";
	import MyPage from "./my.vue";
	import {
		debounce
	} from "../../utils/debounce";
	import serviceCodeInput from "../../components/service-code-input/service-code-input.vue";
	export default {
		components: {
			serviceCodeInput,
			MyTabBar,
			MyPage,
			OrderCard,
			WorkHourOrderCard,
		},
		data() {
			return {
				unbindReadNum: 0,
				haveButton: true,
				clickType: false, //点击状态，防止连续点击
				tabList: [{
						text: "首页",
						selectedIcon: "/static/images/tabbar/home_icon_active.png",
						icon: "/static/images/tabbar/home_icon_dis.png",
					},
					{
						text: "我的",
						selectedIcon: "/static/images/tabbar/my_icon_active.png",
						icon: "/static/images/tabbar/my_icon_dis.png",
					},
				],
				urlList: [{
						weChatRefund: "/sj/yhwechatrefund",
						aliRefund: "/sj/yhalirefund",
						startOrder: "/sj/startserver",
						endOrder: "/sj/endserver",
						ordernum: "/sj/ordernum",
						list: "/sj/sjgetyhorder",
					},
					{
						weChatRefund: "/sj/workSeatOrder/weChatRefund",
						aliRefund: "/sj/workSeatOrder/aliRefund",
						startOrder: "/sj/workSeatOrder/start",
						endOrder: "/sj/workSeatOrder/end",
						ordernum: "/sj/workSeatOrder/orderNum",
						list: "/sj/workSeatOrder/list",
					},
					{
						weChatRefund: "/sj/orderSelf/weChatRefund",
						aliRefund: "/sj/orderSelf/aliRefund",
						startOrder: "/sj/orderSelf/start",
						endOrder: "/sj/orderSelf/end",
						ordernum: "/sj/orderSelf/orderNum",
						list: "/sj/orderSelf/list",
					},
					{
						ordernum: "/sj/sjonsiteordernum",
						list: "/sj/sjonsiteorder",
					},
					{
						ordernum: "/sj/sjonsiteordernumself",
						list: "/sj/sjonsiteorderself",
					},
				],
				typeId: 0, // 0 用户订单 ；1 商家订单 ；2 工时订单
				currentIndex: 0,
				days: null, // 今天：0；明天：1；后天：2
				noClick: true, //防止重复点击状态
				userInfo: {},
				typeOrder: 3, // 2 等待确认 3 待服务 4 待完成
				ordernum: {},
				orderList: [],
				handelOrder: {},
				showInput: false,
				timeRange: "7days",
				count: 0,
				isLoad: true, //加载完成
				page: 1,
				limit: 10,
				chartOpts: {
					color: ["#E8101E"],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: false,
					xAxis: {
						gridType: "solid",
						gridColor: "#F0F0F0",
						fontColor: "#999999",
						rotateLabel: false,
					},
					yAxis: {
						gridType: "dash",
						splitNumber: 4,
						gridColor: "#F0F0F0",
						fontColor: "#999999",
						format: "value",
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
						},
					},
				},
				chartData: {
					categories: ["03-19", "03-20", "03-21", "03-21", "03-21", "03-21"],
					series: [{
						name: "订单量",
						data: [1.0, 0, 0, 0, 0, 0],
					}, ],
				},
			};
		},

		async onLoad() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			const userInfo = await request.post("/user/getuser", {
				type: 3,
			});
			this.userInfo = userInfo.data;
			this.$store.commit("setSjInfo", userInfo.data);
			// 存储商家地址
			this.getOrderNumber();
			this.getOrderList();
		},
		async onReachBottom() {
			console.log("onReachBottom");
			if (this.count <= this.page * this.limit || !this.isLoad) {
				return;
			}
			this.page++;
			this.getOrderList(false);
		},

		async onPullDownRefresh() {
			await this.getOrderNumber();
			this.getOrderList();
		},
		onShow() {
			this.getUnbindReadNum()
		},

		methods: {
			getUnbindReadNum() {
				request.post("/sj/getUnbindReadNum").then(res => {
					if (res.code) {
						this.unbindReadNum = res.data.count
					}
				})
			},
			// 处理不同类型订单的点击
			searchTypeOrder(type) {
				this.haveButton = true
				this.typeId = type;
				if (type == 1) {
					this.typeOrder = 2; // 工位订单
				} else {
					this.typeOrder = 3; // 用户订单
				}
				if (type == 3 || type == 4) {
					this.haveButton = false
					this.typeOrder = 2;
				}
				this.stateOrder = 2;
				this.days = null;
				this.getOrderNumber();
				this.getOrderList();
			},
			handleOrderType(type) {
				// 处理不同类型订单的点击
				this.typeOrder = type;
				this.getOrderList();
			},
			// 处理不同订单状态的点击
			handleOrderState(type, days) {
				this.typeOrder = type;
				this.stateOrder = type;
				// if (type == 3) {
				//   this.days = days;
				//   console.log(1111, this.getDateStr(days));
				// } else {
				//   this.days = null;
				// }

				this.getOrderList();
			},
			// 获取日期字符串
			getDateStr(days) {
				const date = new Date();
				date.setDate(date.getDate() + days);
				return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
			},
			//getProfileLoding获取上个页面返回后调用提示
			async getProfileLoding(title) {
				setTimeout(() => {
					uni.showToast({
						title: "保存成功",
						duration: 1000,
					});
				}, 300);
				let {
					data
				} = await request.post("/user/getuser", {
					type: 3,
				});
				//存储商家地址
				uni.setStorageSync("shopdependency", data.dependency);
			},
			changeIndex(index) {
				console.log(index);
				if (index == 1) {
					this.getUnbindReadNum()
				}
				this.currentIndex = index;
			},
			syrorsjordertaking() {
				request
					.post("/sj/sjordertaking", {
						sjid: this.userInfo.id,
						order_taking: this.userInfo.order_taking,
					})
					.then((result) => {
						request
							.post("/user/getuser", {
								type: 3,
							})
							.then((result) => {
								this.userInfo.order_taking = result.data.order_taking;
							});
					});
			},
			getOrderNumber() {
				let url = this.urlList[this.typeId].ordernum;
				let date = {};
				if (this.typeId == 1) {
					date = {
						sj_id: this.userInfo.id,
					};
				} else {
					date = {
						sjid: this.userInfo.id,
					};
				}

				request.post(url, date).then((res) => {
					this.ordernum = res.data;
				});
			},
			getOrderList(isRefresh = true) {
				this.isLoad = false;
				if (isRefresh) {
					this.page = 1;
					this.limit = 10;
					this.orderList = [];
				}
				let url = this.urlList[this.typeId].list;
				let date = {};
				if (this.typeId == 0 || this.typeId == 2) {
					date = {
						sjid: this.userInfo.id,
						state: this.typeOrder,
					};
				}
				if (this.typeId == 1) {
					date = {
						page: this.page,
						limit: this.limit,
						state: this.typeOrder,
						date: this.days,
					};
				}
				if (this.typeId == 3 || this.typeId == 4) {
					date = {
						page: this.page,
						limit: this.limit,
						sjid: this.userInfo.id,
						state: this.typeOrder,
					};
				}
				request
					.post(url, date)
					.then((res) => {
						if (isRefresh) {
							if (this.typeId == 1 || this.typeId == 2) {
								this.orderList = res.data.list;
								this.count = res.data.count;
								return;
							}
							this.orderList = res.data;
							this.count = res.count;
						} else {
							if (this.typeId == 1 || this.typeId == 2) {
								this.orderList = [...this.orderList, ...res.data.list];
								this.count = res.data.count;
								return;
							}
							this.orderList = [...this.orderList, ...res.data];
							this.count = res.count;
						}
					})
					.finally(() => {
						this.isLoad = true;
						uni.stopPullDownRefresh();
					});
			},
			handleSwitchChange(e) {
				if (this.noClick) {
					// 第一次点击
					this.noClick = false;
					this.orderSwitch = e;
					if (this.userInfo.order_taking == 1) {
						this.userInfo.order_taking = 2;
					} else if (this.userInfo.order_taking == 2) {
						this.userInfo.order_taking = 1;
					}
					this.syrorsjordertaking();
					setTimeout(() => {
						this.noClick = true;
					}, 1000);
				}
			},
			goRoleMy() {
				uni.$uv.throttle(() => {
					this.currentIndex = 1;
					// uni.navigateTo({
					//   url: "/pages/shop/my",
					// });
				}, 500)

			},
			goMoreSetting() {
				uni.navigateTo({
					url: "/pages/artisan/unavailable-time",
				});
			},
			// 去订单详情
			goOrderDetail(item) {
				let path = "";
				if (this.typeId == 0 || this.typeId == 3 || this.typeId == 4) {
					path = `/pages/shop/userorder-detail?id=${item.id}&haveButton=${this.haveButton}`;
				} else if (this.typeId == 1) {
					path = `/pages/shop/SellerDetail?id=${item.id}`;
				} else if (this.typeId == 2) {
					path = `/pages/shop/userorder-detail?id=${item.id}&order_type=2`;
				}
				console.log(path);
				uni.navigateTo({
					url: path,
				});
			},
			// 报名入口
			goToCompetition() {},

			switchTimeRange(range) {
				this.timeRange = range;
			},

			// 取消订单
			cancelOrder(e, order) {
				uni.showModal({
					title: "取消订单",
					content: "确定要取消该订单吗？（订单取消后，支付金额将原路退回）",
					success: (res) => {
						if (res.confirm) {
							// TODO: 取消订单
							let data = {
								orderNo: order.number,
								amount: order.pay_money,
								sjid: this.userInfo.id,
							};
							let url = "";
							if (order.pay_kind == 1) {
								url = "";
							} else if (order.pay_kind == 2) {
								url = this.urlList[this.typeId].weChatRefund;
							} else if (order.pay_kind == 3) {
								url = this.urlList[this.typeId].aliRefund;
							}
							console.log(data, url);
							if (this.clickType) {
								return
							}
							this.clickType = true
							request
								.post(url, data)
								.then((res) => {
									console.log("取消订单返回结果", res);
									if (res.state == 1 || res.code == 1 || res.code == 200) {
										uni.showToast({
											title: "取消成功！",
											icon: "none",
										});
										this.getOrderNumber();
										this.getOrderList();
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none",
										});
									}
								})
								.catch((err) => {
									console.log(err);
								}).finally(() => {
									this.clickType = false
								});
						}
					},
				});
			},
			// 接单
			confirmOrder(e, order) {
				if (this.clickType) {
					return
				}
				this.clickType = true
				request
					.post("/sj/workSeatOrder/sure", {
						id: order.id,
					})
					.then((res) => {
						uni.showToast({
							title: "已接单",
							icon: "none",
						});
						if (res.code == 200) {
							this.getOrderNumber();
							this.getOrderList();
						}
					}).finally(() => {
						this.clickType = false
					});
			},
			// 开始服务
			startOrder(e, order) {
				if (order.team_buy_order_state == 1) {
					uni.showToast({
						title: "订单当前处于拼团中，服务将在拼团完成后才开启~",
						icon: "none",
					});
					return
				}
				this.showInput = true;
				this.handelOrder = order;
			},
			// 输入完成
			onConfirm(code) {
				this.showInput = false;
				if (this.clickType) {
					return
				}
				this.clickType = true
				request
					.post(this.urlList[this.typeId].startOrder, {
						id: this.handelOrder.id,
						server_code: code,
						sjid: this.userInfo.id,
					})
					.then((res) => {
						console.log(res);
						if (res.state == 1 || res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
							this.getOrderNumber();
							this.getOrderList();
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
						this.handelOrder = {};
					}).finally(() => {
						this.clickType = false
					});
			},

			// 完成服务
			endOrder: debounce(function(e, order) {
				if (this.clickType) {
					return
				}
				this.clickType = true
				request
					.post(this.urlList[this.typeId].endOrder, {
						id: order.id,
						sjid: this.userInfo.id,
					})
					.then((res) => {
						console.log("res====================", res);
						if (res.state == 1 || res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
							this.getOrderNumber();
							this.getOrderList();
						}
					}).finally(() => {
						this.clickType = false
					});
			}, 500),
		},
	};
</script>

<style lang="less" scoped>
	// page {
	// 	background-color: #fafafa;
	// 	padding-bottom: 40rpx;
	// }

	.artisan-page {
		/* min-height: 100vh; */
		position: relative;
		padding-bottom: 110rpx;
	}

	.artisan-page::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 580rpx !important;
		background-image: url("/static/images/bg.png");
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
		z-index: 1;
	}

	.bg {
		position: relative;
	}

	.bg::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 272rpx !important;
		/* #ifdef APP-PLUS || MP-WEIXIN */
		height: calc(272rpx + var(--status-bar-height)) !important;
		/* #endif */
		background-image: url("/static/images/bg.png");
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
		z-index: 999;
	}

	.profile-section,
	.switch-section,
	.order-class,
	.order-list,
	.nothings-box {
		position: relative;
		z-index: 99;
	}

	.profile-section {
		position: fixed;
		top: 88rpx;
		left: 0;
		right: 0;
		height: 184rpx;
		/* background-color: transparent; */
		z-index: 999;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
	}

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

	.avatar {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50rpx;
		margin-right: 24rpx;
		background-color: #333333;
		border: 4rpx solid #ffffff;
	}

	.name {
		font-size: 36rpx;
		font-weight: 500;
		color: #000000;
	}

	.welcome {
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
	}

	.center-text {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 37rpx;
		text-align: left;
		font-style: normal;
	}

	.switch-section {
		margin: 184rpx 24rpx 32rpx;
		height: 82rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		background-image: url("/static/images/shop/jdBj.png");
		background-size: cover;
		/* 确保图片覆盖整个屏幕 */
		background-repeat: no-repeat;
		/* 防止图片重复 */
		background-position: center center;
		/* 图片居中显示 */
		border-radius: 14rpx;
		padding: 0 32rpx;
		box-shadow: 0 4rpx 16rpx 0 rgba(210, 213, 224, 0.5);
	}

	.switch-box {
		/* width: 126rpx; */
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 26rpx;
		background-color: #E8101E;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		padding: 0 6rpx;
	}

	.switch-text {
		font-size: 24rpx;
		padding: 0 12rpx;
		color: #ffffff;
	}

	.switch-yuan {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.switch-box.disswitch {
		background-color: rgba(0, 0, 0, 0.1);
	}

	.switch-box.disswitch .switch-yuan {
		margin-left: 0;
	}

	.switch-box.disswitch {
		background-color: rgba(0, 0, 0, 0.1);
	}

	.switch-box.disswitch .switch-yuan {
		margin-left: 0;
		margin-right: 4rpx;
	}

	.switch-tip {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 37rpx;
		text-align: left;
		font-style: normal;
	}

	.competition-section {
		margin: 24rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.comp-left {
		display: flex;
		align-items: center;
	}

	.trophy-icon {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.comp-right {
		display: flex;
		align-items: center;
		color: #999999;
		font-size: 24rpx;
	}

	.arrow-icon {
		width: 32rpx;
		height: 32rpx;
		margin-left: 8rpx;
	}

	.statistics-section {
		margin: 24rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 24rpx;
	}

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

	.stat-title {
		font-size: 32rpx;
		font-weight: 500;
	}

	.time-filter {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999999;
	}

	.time-filter text {
		margin-left: 24rpx;
	}

	.time-filter .active {
		color: #E8101E;
	}

	.chart-container {
		height: 400rpx;
		margin-bottom: 24rpx;
	}

	.order-class {
		padding-bottom: 20rpx;
		overflow: hidden;
		width: 750rpx;
		margin: 36rpx 0 0;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		background-color: #fff;

		.order-types {
			margin: 0 20px;
			height: 49px;
			display: flex;
			justify-content: flex-start;
			// border-bottom: 1px solid rgba(255, 225, 225, 0.2);
			align-items: center;
			flex-wrap: nowrap;
			column-gap: 40rpx;

			.order-type-item {
				display: flex;
				flex-flow: column nowrap;
				justify-content: center;
				align-items: center;
				margin-top: 0;
				transition: all 0.3s ease;

				.type-name {
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					white-space: nowrap;
				}
			}

			.order-type-item.active {
				position: relative;
				background-color: #fff;

				.type-name {
					color: #E8101E;
				}
			}
		}
	}

	.active-line {
		width: 28rpx;
		height: 6rpx;
		border-radius: 4rpx;
		background-color: #E8101E;
		position: absolute;
		bottom: -10rpx;
		z-index: 99;
	}

	.order-state {
		width: 726rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		margin-top: 10rpx;
		padding: 0 36rpx;
		gap: 16rpx;
		/* H5 必须添加以下属性 */
		/* #ifdef H5 */
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;

		/* iOS平滑滚动 */
		/* #endif */
		::v-deep .uni-scroll-view-content {
			display: flex !important;
			flex-flow: row nowrap !important;
			justify-content: flex-start !important;
			align-items: center !important;
			/* H5 需要添加 */
			/* #ifdef H5 */
			width: max-content !important;
			min-width: 100% !important;
			/* #endif */
		}
	}

	.order-state-item {
		box-sizing: border-box;
		height: 56rpx;
		background: #F3F5F6;
		border-radius: 10rpx;
		padding: 0 20rpx;
		
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 56rpx;
		text-align: left;
		font-style: normal;

		margin-right: 50rpx;
		
	}

	.state- {
		margin: 12rpx 0;
	}

	.order-state-item.active {
		background: #FEE5E7;
		color: #E8101E;
	}


	.order-state__user {
		margin-top: 10rpx;
		padding-left: 36rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		column-gap: 50rpx;

		.order-state-item {
			margin-right: 0rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			// padding: 0 30rpx;
			width: auto;
			height: 56rpx;
		}

		.state-name {
			margin: 0;
		}
	}

	.order-list {
		background-color: #f5f5f5;
		border-radius: 28rpx 28rpx 0 0;
		padding-top: 24rpx;
		margin-top: -40rpx;
		padding-bottom: 280rpx;
	}

	.order-item {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin: 0 24rpx 24rpx;
		box-shadow: 0 8rpx 16rpx 0 rgba(210, 213, 224, 0.5);
	}

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

	.service-name {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
		flex: 1;
	}

	.order-info {
		margin-bottom: 32rpx;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: flex-start;
	}

	.address,
	.service-time,
	.order-number {
		flex: 1;
		font-size: 24rpx;
		color: #666666;
	}

	.order-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-actions {
		padding-top: 32rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
		gap: 24rpx;
	}

	.action-btn {
		/* width: 96rpx;
  height: 40rpx; */
		padding: 8rpx 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 6rpx;
	}

	.action-btn.cancel,
	.action-btn.confirm {
		border: 1rpx solid rgba(51, 51, 51, 0.12);
		box-sizing: border-box;
	}

	.action-btn.cancel .action-text,
	.action-btn.confirm .action-text {
		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
	}

	.action-btn.verify {
		border: 1rpx solid rgba(252, 67, 124, 0.12);
		box-sizing: border-box;
	}

	.action-btn.verify .action-text {
		font-size: 28rpx;
		color: #E8101E;
	}

	.nothings-box {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		padding: 280rpx 0 0;
	}

	.nothings-text {
		font-size: 32rpx;
		font-weight: 500;
		color: #999999;
		text-align: center;
		font-style: italic;
	}

	.arrow-right {
		width: 11rpx;
		height: 22rpx;
		margin-top: 10rpx;
		margin-left: 15rpx;
		// padding-right: 10rpx;
	}


	/* APP适配 */
	/* #ifdef APP-PLUS */
	.nav-bar {
		padding-top: 0;
	}

	.profile-section {
		top: calc(var(--status-bar-height) + 88) rpx;
	}

	/* #endif */

	/* 小程序适配 */
	/* #ifdef MP-WEIXIN */
	.nav-bar {
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);
	}

	.profile-section {
		top: calc(var(--status-bar-height) + 88rpx);
	}

	/* #endif */
</style>