<!-- 订单列表详情 -->
<template>
	<view class="body" :style="'padding-top:' + bottomHeight">
		<!-- 导航 -->
		<view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
			<view class="ss-flex-2 ss-col-center">
				<text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text>
				<view style="margin-left: 15rpx; color: #3D444E; font-size: 28rpx">订单详情</view>
			</view>
			<view class="ss-flex-1"></view>
			<text class="textIcon icon-kefu icon-navigation"></text>
			<text class="textIcon icon-tongzhiguanli icon-navigation" style="margin-left: 30rpx"></text>
		</view>
		<view class="processNavigation">
			<view style="padding:10rpx;font-size:25rpx;color:#fff;font-weight: 650;margin-top: 10rpx;">服务完成</view>
		</view>
		<view class="process-box">
			<uni-section title="" padding>
				<uni-steps style="font-size: 20rpx;" :options="list1" :active="activeIndex" :active-color="'#4EAA83'">
				</uni-steps>
			</uni-section>
		</view>
		<!-- 服务倒计时 -->
		<view class="timer-box">
			服务结束：{{countdown}}
		</view>

		<!-- 中部 -->
		<view class="list-wrap">
			<scroll-view scroll-y="true" class="list">
				<view class="list-scroll-view">
					<!-- 地址 -->
					<view class="address-box">
						<view class="ss-flex-2 ss-col-center">
							<text class="textIcon icon-ditu icon-navigation" style="font-size:24rpx;"></text>
							<view style="margin-left: 10rpx; color: #3D444E; font-size: 19rpx">景好勇&nbsp;155****0417
							</view>
						</view>
						<view style="font-size:16rpx;color:#444;margin-top:10rpx;">
							烟台市莱山区华庭路橡树湾小区10-515
						</view>
					</view>
					<!-- 服务项目 -->
					<view class="service-box">
						<view style="font-size:22rpx;">服务项目</view>
						<!-- 左右布局 -->
						<view class="ss-flex-2" style="margin-top:10rpx;">
							<view style="width: 140rpx;min-height:120rpx;">
								<image class="wh" referrerpolicy="no-referrer"
									src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png" />
							</view>
							<view class="ss-flex-1" style="margin-left:10rpx;">
								<view class="ss-flex-2">
									<view style="font-size:24rpx;font-weight:650;">精油按摩</view>
									<view class="ss-flex-2 ss-col-center" style="margin-left:10rpx;margin-top:2rpx;">
										<text class="textIcon icon-chenghao icon-navigation"
											style="font-size:24rpx;"></text>
										<view style="margin-left: 3rpx; color: #3D444E; font-size: 20rpx">2</view>
									</view>
								</view>
								<view class="ss-flex-2" style="margin-top:5rpx;">
									<view class="ss-flex-2 ss-col-center" style="margin-left:10rpx;margin-top:2rpx;">
										<text class="textIcon icon-fenzhong icon-navigation"
											style="font-size:22rpx;color:#24C275;"></text>
										<view style="margin-left: 5rpx; color: #3D444E; font-size: 18rpx">60分钟</view>
									</view>
									<view class="ss-flex-1"></view>
									<view class="ss-flex-2 ss-col-center" style="margin-left:10rpx;margin-top:2rpx;">
										<text class="textIcon icon-renminbi1688 icon-navigation"
											style="font-size:24rpx;color:#EF853A;"></text>
										<view
											style="margin-left: 3rpx; color: #EF853A; font-size: 25rpx;font-weight:650;">
											499
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top:10rpx;">
							<view style="font-size:20rpx;color:#A0A0A0;">服务技师</view>
							<view class="ss-flex-1"></view>
							<view style="margin-left: 5rpx; color: #666; font-size: 20rpx">林雨馨</view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top:10rpx;">
							<view style="font-size:20rpx;color:#A0A0A0;">服务时间</view>
							<view class="ss-flex-1"></view>
							<view style="margin-left: 5rpx; color: #666; font-size: 20rpx">2024-09-09 18:00:00</view>
						</view>
					</view>

					<view class="service-box">
						<view class="title-box-service">加钟项目</view>
						<!-- 左右布局 -->
						<view class="ss-flex-2" style="margin-top:10rpx;">
							<view style="width: 140rpx;min-height:120rpx;">
								<image class="wh" referrerpolicy="no-referrer"
									src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png" />
							</view>
							<view class="ss-flex-1" style="margin-left:10rpx;">
								<view class="ss-flex-2">
									<view style="font-size:24rpx;font-weight:650;">头部按摩</view>
									<view class="ss-flex-2 ss-col-center" style="margin-left:10rpx;margin-top:2rpx;">
										<text class="textIcon icon-chenghao icon-navigation"
											style="font-size:24rpx;"></text>
										<view style="margin-left: 3rpx; color: #3D444E; font-size: 20rpx">1</view>
									</view>
								</view>
								<view class="ss-flex-2" style="margin-top:5rpx;">
									<view class="ss-flex-2 ss-col-center" style="margin-left:10rpx;margin-top:2rpx;">
										<text class="textIcon icon-fenzhong icon-navigation"
											style="font-size:22rpx;color:#24C275;"></text>
										<view style="margin-left: 5rpx; color: #3D444E; font-size: 18rpx">30分钟</view>
									</view>
									<view class="ss-flex-1"></view>
									<view class="ss-flex-2 ss-col-center" style="margin-left:10rpx;margin-top:2rpx;">
										<text class="textIcon icon-renminbi1688 icon-navigation"
											style="font-size:24rpx;color:#EF853A;"></text>
										<view
											style="margin-left: 3rpx; color: #EF853A; font-size: 25rpx;font-weight:650;">
											98
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 费用详情 -->
					<view class="cost-box">
						<view style="font-size: 22rpx;">费用详情</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;">
							<view class="travel-box">出行费用</view>
							<view class="describe-box">全程1.53公里</view>
							<view class="ss-flex-1"></view>
							<view class="ss-flex-2 ss-col-center" style="margin-left:10rpx;margin-top:2rpx;">
								<text class="textIcon icon-renminbi1688 icon-navigation"
									style="font-size:22rpx;"></text>
								<view style="margin-left: 3rpx; color: #3D444E; font-size: 20rpx">20.56</view>
							</view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;">
							<view class="travel-box">备注</view>
							<view class="describe-box">腰疼，腿疼......</view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;">
							<view class="travel-box">支付方式</view>
							<view class="describe-box">微信支付</view>
						</view>
						<!-- 分割线 -->
						<view style="width: 100%;height: 10rpx;border-bottom: 1rpx solid #F4F4F4;margin-bottom: 10rpx;">
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;">
							<view class="left-text">订单总额</view>
							<view class="ss-flex-1"></view>
							<view class="ss-flex-2 ss-col-center" style="margin-top:2rpx;">
								<text class="textIcon icon-renminbi1688 icon-navigation"
									style="font-size:22rpx;"></text>
								<view style="margin-left: 3rpx; color: #3D444E; font-size: 20rpx">218</view>
							</view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;">
							<view class="left-text">优惠劵</view>
							<view class="ss-flex-1"></view>
							<view class="ss-flex-2 ss-col-center" style="margin-top:2rpx;">
								<view style="color: #D56C66; font-size: 20rpx">-</view>
								<text class="textIcon icon-renminbi1688 icon-navigation"
									style="font-size:22rpx;color: #D56C66;"></text>
								<view style="margin-left: 2rpx; color: #D56C66; font-size: 20rpx">20</view>
							</view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;">
							<view class="left-text">实付金额</view>
							<view class="ss-flex-1"></view>
							<view class="ss-flex-2 ss-col-center" style="margin-top:2rpx;">
								<text class="textIcon icon-renminbi1688 icon-navigation"
									style="font-size:22rpx;color: #D56C66;"></text>
								<view style="margin-left: 2rpx; color: #D56C66; font-size: 20rpx">499</view>
							</view>
						</view>
					</view>

					<!-- 订单信息 -->
					<view class="orderingInformation-box">
						<view style="font-size: 22rpx;">订单信息</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;">
							<view class="travel-box">订单编号</view>
							<view class="describe-box">20240910457878784545</view>
							<view class="ss-flex-1"></view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;">
							<view class="travel-box">下单时间</view>
							<view class="describe-box">2024-09-10 15:45:12</view>
							<view class="ss-flex-1"></view>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;">
							<view class="travel-box">付款时间</view>
							<view class="describe-box">2024-09-10 15:55:12</view>
							<view class="ss-flex-1"></view>
						</view>
						<view class="ss-flex-2 ss-col-top ss-row-left" style="margin-top: 20rpx;">
							<view class="travel-box">订单进度</view>
							<!-- 使用进度条 -->
							<view class="ss-flex-1">
								<uni-section title="" padding>
									<uni-steps style="font-size: 20rpx;" direction="column" :options="list2"
										:active="activeIndexTwo" :active-color="'#4EAA83'">
									</uni-steps>
								</uni-section>
							</view>
						</view>
					</view>

					<!-- 订单评价 -->

					<view class="orderEvaluation-box">
						<view style="font-size:20rpx;">订单评价</view>
						<view class="ss-flex-2" style="margin-top:10rpx;">
							<!-- 左右布局 -->
							<view style="width: 70rpx;height:70rpx;border-radius:35rpx;">
								<image style="border-radius:35rpx;" class="wh" referrerpolicy="no-referrer"
									src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png" />
							</view>
							<!-- 上下布局 -->
							<view class="ss-flex-1" style="margin-left: 10rpx; margin-top: 5rpx">
								<view class="ss-flex-2">
									<view style="font-size:19rpx;color:#3E3E40;">匿名用户</view>
									<view class="ss-flex-1"></view>
									<view style="font-size:18rpx;color:#9A9A9A;">2024-09-10 14:45:41</view>
								</view>
								<view class="ss-flex-2">
									<view style="font-size:19rpx;color:#3E3E40;">
										<uni-rate v-model="rateValue" color="#bbb" active-color="red" :readonly="true"
											size="14" />
									</view>
									<view class="ss-flex-1"></view>
								</view>
								<view class="ss-flex-2">
									<view style="font-size:19rpx;color:#3E3E40;">
										互动货物都不为过抚慰抚慰i高飞球覅我去服务器覅我鬼泣非去过覅我去过七分互动货物都不为过抚慰抚慰i高飞球覅我去服务器覅我鬼泣非去过覅我去过七分
									</view>
									<view class="ss-flex-1"></view>
								</view>
							</view>
						</view>
					</view>



				</view>
			</scroll-view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-feat-box ss-flex-2">
			<view class="ss-flex-1"></view>
			<view class="butt-box">投诉</view>
			<view class="butt-box">删除订单</view>
			<view class="butt-box">确认技师离开</view>
			<view class="butt-box">再次购买</view>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	// uni.hideTabBar();

	// 返回首页
	const backPage = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/orderInfoList/orderInfoList',
		});
	};

	//	服务倒计时
	const countdown = ref('01:00:00')
	const timer = ref('')
	function startCountdown() {
		if (timer.value) return;
		let count = timeToSeconds(countdown.value);
		timer.value = setInterval(() => {
			if (count > 0) {
				count--;
				countdown.value = secondsToTime(count);
			} else {
				clearCountdown();
			}
		}, 1000);
	}
	startCountdown()
	function clearCountdown() {
		if (timer.value) {
			clearInterval(timer.value);
			timer.value = null;
		}
	}
	function timeToSeconds(time) {
		let parts = time.split(':');
		return parts[0] * 3600 + parts[1] * 60 + parseInt(parts[2], 10);
	}
	function secondsToTime(secs) {
		let hours = Math.floor(secs / 3600);
		let minutes = Math.floor((secs - (hours * 3600)) / 60);
		let seconds = secs - (hours * 3600) - (minutes * 60);

		hours = hours < 10 ? '0' + hours : hours;
		minutes = minutes < 10 ? '0' + minutes : minutes;
		seconds = seconds < 10 ? '0' + seconds : seconds;
		return hours + ':' + minutes + ':' + seconds;
	}
	// 步骤条
	const activeIndex = ref(1)
	const iconArray = ref([''])
	const list1 = ref([{
			title: '技师接单'
		},
		{
			title: '技师出发'
		},
		{
			title: '技师到达'
		},
		{
			title: '开始服务'
		},
		{
			title: '服务完成'
		},
		{
			title: '技师离开'
		}
	])

	const activeIndexTwo = ref(7)
	const list2 = ref([{
			title: '下单时间',
			desc: '2024-09-10 15:45:41'
		},
		{
			title: '付款时间',
			desc: '2024-09-10 15:45:41'
		},
		{
			title: '技师接单',
			desc: '2024-09-10 15:45:41'
		},
		{
			title: '技师出发',
			desc: '2024-09-10 15:45:41'
		},
		{
			title: '技师到达',
			desc: '2024-09-10 15:45:41'
		},
		{
			title: '开始服务',
			desc: '2024-09-10 15:45:41'
		},
		{
			title: '服务结束',
			desc: '2024-09-10 15:45:41'
		},
		{
			title: '客户确认技师离开',
			desc: '2024-09-10 15:45:41'
		},
		{
			title: '用户评价',
			desc: '2024-09-10 15:45:41'
		},
		{
			title: '订单结算',
			desc: '2024-09-10 15:45:41'
		},
	])
	list2.value.reverse()
	// 星星
	const rateValue = ref(4.5)



	const bottomHeight = ref('0rpx');
	// #ifdef APP-PlUS
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	bottomHeight.value = bottomHeightOne
	// #endif
</script>
<style scoped>
	/deep/.uni-steps__row-title {
		font-size: 20rpx !important;
	}

	/deep/.uni-section .uni-section-header {
		padding: 0rpx !important;
	}

	/deep/.uni-section {
		border-radius: 10rpx;
	}

	/deep/.uni-steps__column-title {
		font-size: 20rpx !important;
	}
</style>
<style scoped lang="scss">
	.timer-box{
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		background-color: #fff;
		padding: 15rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		text-align: center;
		font-size: 27rpx;
		color: red;
	}
	.butt-box {
		font-size: 20rpx;
		color: #777;
		padding: 5rpx 15rpx;
		box-sizing: border-box;
		border: 1rpx solid #666;
		border-radius: 15rpx;
		margin-right: 20rpx;
	}

	.bottom-feat-box {
		position: relative;
		width: 100%;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.orderEvaluation-box {
		width: 95%;
		min-height: 100rpx;
		margin-left: 2.5%;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 10rpx;
		margin-top: 20rpx;
	}

	.orderingInformation-box {
		width: 95%;
		min-height: 200rpx;
		margin-left: 2.5%;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 10rpx;
		margin-top: 20rpx;
	}

	.left-text {
		font-size: 20rpx;
		color: #9A9A9A;
		min-width: 100rpx;
	}

	.describe-box {
		font-size: 18rpx;
		color: #3E3E40;
	}

	.travel-box {
		font-size: 20rpx;
		color: #9A9A9A;
		margin-right: 50rpx;
		min-width: 100rpx;
	}

	.cost-box {
		width: 95%;
		margin-left: 2.5%;
		min-height: 150rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		background-color: #fff;
		margin-top: 20rpx;
		padding: 10rpx;
	}

	.title-box-service {
		font-size: 20rpx;
		padding: 5rpx 10rpx;
		background-color: #FFF0E1;
		border-radius: 10rpx;
		color: #DE9A46;
		font-weight: 650;
	}

	.service-box {
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		border-radius: 10rpx;
		background-color: #fff;
		margin-top: 20rpx;
		padding: 10rpx;
	}

	.address-box {
		width: 95%;
		margin-left: 2.5%;
		padding: 10rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.process-box {
		position: relative;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		border-radius: 10rpx;
		background-color: #fff;
		margin-top: -80rpx;
	}

	.processNavigation {
		width: 100%;
		height: 150rpx;
		box-sizing: border-box;
		background-color: #24C373;
	}

	.detail-box {
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.icon-navigation {
		font-size: 32rpx;
		color: #3D444E;
		font-weight: 700;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		background-color: #EEEEF0;
		height: 100vh;
		box-sizing: border-box;
	}

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 20rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
	}

	.list-scroll-view {
		width: 100%;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.course-card {
		width: 47vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	// 底部
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
</style>