<template>
	<view class="container">
		<view class="containerBody">
			<VNavigationBar title="订单详情" background-color="rgba(0,0,0,0)" title-color="#333"></VNavigationBar>
			<view class="body">
				<view class="orderStatus card">
					<template v-if="orderInfo.status === '1'">
						<image class="statusIcon" src="@/static/icons/order-icon8.png" mode="aspectFit"></image>
						<text>维修中</text>
					</template>
					<template v-else-if="orderInfo.status === '0'">
						<image class="statusIcon" src="@/static/icons/order-icon9.png" mode="aspectFit"></image>
						<text>等待维修</text>
					</template>
				</view>
				<view class="reservationOrder card">
					<reservationOrder :hideFooter="orderInfo.status === '0'" :order-info="orderInfo" :isDetail="true">
					</reservationOrder>
				</view>

				<view v-if="orderInfo.status !== '0'" class="progress card">
					<view v-for="(item, index) in processList" :key="index" class="processItem">
						<view class="row1">
							<view v-if="item.status !== '3'" class="processIndex">{{ index + 1 }}</view>
							<view v-if="item.status === '3'" class="processIndex end">
								<uni-icons type="checkmarkempty" color="#fff"></uni-icons>
							</view>
							<text class="processTitle">{{ item.title }}</text>
						</view>
						<view class="row2">
							<view class="lineBox">
								<view v-if="index < processList.length - 1" class="line"></view>
							</view>
							<view class="row2_body">
								<view class="desc">{{item.desc}}</view>
								<view class="imageList">
									<image class="imageItem" v-for="(img, imgIndex) in item.imageList" :key="imgIndex"
										:src="img" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="reservationInfo card">
					<view class="row">
						<text class="col1">姓名</text>
						<text class="col2">{{'魏书豪'}}</text>
					</view>
					<view class="row">
						<text class="col1">联系电话</text>
						<text class="col2">{{'15728586970'}}</text>
					</view>
					<view class="row">
						<text class="col1">预约项目</text>
						<text class="col2">{{'车辆维修'}}</text>
					</view>
					<view class="row">
						<text class="col1">预约时间</text>
						<text class="col2">{{'2024-06-05 13:00'}}</text>
					</view>
				</view>
			</view>
			<view class="footer" v-if="['0', '2'].includes(orderInfo.status)">
				<view v-if="orderInfo.status === '2'" class="footerBtn" @click="gotoEvaluate">服务评价</view>
				<template v-else-if="orderInfo.status === '0'">
					<view class="footerBtn phone">
						<image class="footerBtnIcon" src="../../static/icons/order-icon7.png" mode="aspectFit"></image>
						拨打电话
					</view>
					<view class="footerBtn address">
						<image class="footerBtnIcon" src="../../static/icons/order-icon6.png" mode="aspectFit"></image>地址导航
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'
	import reservationOrder from '@/components/reservationOrder/reservationOrder.vue'
	export default {
		components: {
			VNavigationBar,
			reservationOrder
		},
		data() {
			return {
				orderInfo: {
					title: '顺捷汽车维修搭电救援补胎中心',
					address: '济南市历下区福瑞达历下护理院东南门旁',
					phone: '15726506879',
					busiTypeStr: '15726506879',
					status: '1'
				},
				processList: [{
						title: '接收车辆',
						desc: '车辆已到维修厂，工作人员正准备开始维修',
						imageList: ['', '', ''],
						status: '1'
					},
					{
						title: '开始维修轮胎',
						desc: '工作人员开始对车辆轮胎进行维修',
						imageList: [],
						status: '2'
					},
					{
						title: '车辆维修完成',
						desc: '车辆维修完成，请选择合适时间到店提车',
						imageList: [],
						status: '3'
					}
				]
			};
		},
		methods: {
			gotoEvaluate() {
				uni.navigateTo({
					url: '/pages/orderDetail/evaluate'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		background-color: #F3F5F7;

		.containerBody {
			height: 100%;
			display: flex;
			flex-direction: column;
			background: linear-gradient(180deg, #C1DEFF 0%, rgba(193, 222, 255, 0) 100%);
			background-size: 100% 500rpx;
			background-repeat: no-repeat;
		}

		.body {
			flex: 1;
			height: 0;
			overflow: auto;
		}

		.card {
			box-sizing: border-box;
			width: 686rpx;
			margin: 30rpx auto;
		}

		.orderStatus {
			font-weight: bold;
			font-size: 36rpx;
			color: #0174F6;

			display: flex;
			align-items: center;
			column-gap: 20rpx;

			.statusIcon {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.reservationOrder {
			box-sizing: border-box;
			width: 686rpx;
			margin: 20rpx auto;
		}

		.progress {
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			display: flex;
			flex-direction: column;
			row-gap: 20rpx;

			.processItem {
				.row1 {
					display: flex;
					align-items: center;
					column-gap: 10rpx;
				}

				.processIndex {
					width: 44rpx;
					height: 44rpx;
					background: #E1EFFF;
					border-radius: 22rpx 22rpx 22rpx 22rpx;

					font-size: 28rpx;
					text-align: center;
					color: #0174F6;
					line-height: 44rpx;

					&.end {
						background: #0174F6;
					}
				}

				.processTitle {
					font-size: 28rpx;
					color: #333333;
					line-height: 44rpx;
				}

				.row2 {
					display: flex;
					align-items: stretch;
					column-gap: 10rpx;

					.lineBox {
						width: 44rpx;
						position: relative;
						padding-top: 10rpx;
					}

					.line {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						width: 2rpx;
						height: 100%;
						background-color: #0174F6;
					}

					.row2_body {
						padding-bottom: 20rpx;

						.desc {
							font-size: 24rpx;
							color: #858BA0;
							margin-bottom: 16rpx;
						}

						.imageList {
							display: flex;
							row-gap: 20rpx;
							column-gap: 20rpx;
						}

						.imageItem {
							width: 120rpx;
							height: 120rpx;
							background-color: #efefef;
						}
					}
				}
			}
		}

		.reservationInfo {
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			display: flex;
			flex-direction: column;
			row-gap: 40rpx;

			.row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;

				.col1 {
					color: #333333;
				}

				.col2 {
					color: #858BA0;
				}
			}
		}

		.footer {
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 12rpx 32rpx;

			display: flex;
			align-items: center;
			column-gap: 22rpx;

			.footerBtn {
				flex: 1;
				width: 0;
				height: 76rpx;
				margin: 0 auto;
				background: #0174F6;
				border-radius: 38rpx 38rpx 38rpx 38rpx;

				font-size: 32rpx;
				color: #FFFFFF;
				
				display: flex;
				align-items: center;
				justify-content: center;
				column-gap: 8rpx;
				line-height: 1.5;
				
				&.phone {
					background: #E8A321;
				}
				
				&.address {
					
				}
				
				.footerBtnIcon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>