<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<uv-navbar title="巡检详情" :placeholder="true" :titleStyle="{ color: '#ffffff' }" leftIconColor="#ffffff"
			bgColor="#1d345e" @leftClick="handleBack"></uv-navbar>
		<!-- 巡检详情内容 -->
		<view class="inspection-detail">
			<!-- 项目名称 -->
			<view class="detail-item">
				<text class="label">项目名称</text>
				<text class="value">{{ inspectionData.projectName }}</text>
			</view>

			<!-- 巡检编号 -->
			<view class="detail-item">
				<text class="label">巡检编号</text>
				<text class="value">{{ inspectionData.orderNo }}</text>
			</view>

			<!-- 巡检状态 -->
			<view class="detail-item">
				<text class="label">巡检状态</text>
				<view :class="['status', getStatusClass(inspectionData.orderStatus)]">
					{{ getStatusText(inspectionData.orderStatus) }}
				</view>
			</view>

			<!-- 巡检区域 -->
			<view class="detail-item">
				<text class="label">巡检区域</text>
				<text class="value">{{ inspectionData.orderContent }}</text>
			</view>

			<!-- 负责人 -->
			<view class="detail-item">
				<text class="label">负责人</text>
				<text class="value">{{ inspectionData.name }}</text>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';

	// 模拟巡检数据
	const inspectionData = ref({
		projectName: '安全隐患巡检',
		orderNo: 'EK864467',
		orderStatus: 0, // 0: 待巡检, 1: 已完成, 2: 异常, 3: 超时
		orderContent: '办公区C',
		name: '赵工程师',
	});

	// 获取状态文本
	const getStatusText = (status : number) : string => {
		switch (status) {
			case 0:
				return '待巡检';
			case 1:
				return '已完成';
			case 2:
				return '异常';
			case 3:
				return '超时';
			default:
				return '未知状态';
		}
	};

	// 获取状态样式类名
	const getStatusClass = (status : number) : string => {
		switch (status) {
			case 0:
				return 'pending';
			case 1:
				return 'completed';
			case 2:
				return 'error';
			case 3:
				return 'timeout';
			default:
				return '';
		}
	};

	// 返回上一页
	const handleBack = () => {
		uni.navigateBack({
			delta: 1,
		});
	};
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		color: #ffffff;
		padding: 20rpx;
	}

	.inspection-detail {
		margin-top: 20rpx;
		border-radius: 10rpx;
		background-color: #1a3e5a;
		padding: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
	}

	.detail-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		justify-content: space-between;

		.label {
			font-size: 30rpx;
			font-weight: bold;
		}

		.value {
			font-size: 30rpx;
			color: #cfd8dc;
		}

		.status {
			padding: 10rpx 20rpx;
			border-radius: 5rpx;
			font-size: 26rpx;
			font-weight: bold;
			text-align: center;
		}

		.pending {
			background-color: #5bc0de;
			color: #fff;
		}

		.completed {
			background-color: #5cb85c;
			color: #fff;
		}

		.error {
			background-color: #d9534f;
			color: #fff;
		}

		.timeout {
			background-color: #f0ad4e;
			color: #fff;
		}
	}
</style>