<template>
	<view class="device-detail">
		<!-- 顶部导航栏 -->
		<uv-navbar title="设备详情" :placeholder="true" :titleStyle="{ color: '#ffffff' }" leftIconColor="#ffffff"
			bgColor="#1d345e" @leftClick="goBack"></uv-navbar>
		<!-- 设备卡片 -->
		<view class="device-card">
			<view class="card-header">
				<view class="title">{{ device.projectName }}</view>
				<view class="status-tag" :style="{ backgroundColor: statusColor }">
					{{ statusText }}
				</view>
			</view>
			<view class="card-content">
				<view class="row">
					<text class="label">设备编号：</text>
					<text class="value">{{ device.orderNo }}</text>
				</view>
				<view class="row">
					<text class="label">部署区域：</text>
					<text class="value">{{ device.orderContent }}</text>
				</view>
				<view class="row">
					<text class="label">最后更新：</text>
					<text class="value">{{ device.updateTime }}</text>
				</view>
				<view class="row">
					<text class="label">负责人：</text>
					<text class="value">赵工程师</text> <!-- 假设负责人字段 -->
				</view>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<!-- <view class="action-bar">
			<uv-button type="primary" shape="circle" @click="handleEdit">编辑设备</uv-button>
			<uv-button type="warning" shape="circle" @click="handleHistory">查看巡检记录</uv-button>
		</view> -->
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { onShow, onReady } from '@dcloudio/uni-app';

	// 模拟设备数据
	const device = ref({
		projectName: '工业机器人 KR210',
		orderNo: 'EK864467',
		orderStatus: 2, // 0: 待巡检, 1: 已完成, 2: 异常, 3: 超时
		orderContent: '自动化车间',
		updateTime: '2025-06-03 15:23:13',
	});

	// 状态文本和颜色计算
	const statusText = computed(() => {
		const statusMap = ['待巡检', '已完成', '异常', '超时'];
		return statusMap[device.value.orderStatus] || '未知';
	});

	const statusColor = computed(() => {
		switch (device.value.orderStatus) {
			case 0:
				return '#5bc0de'; // 待巡检 - 蓝色
			case 1:
				return '#5cb85c'; // 已完成 - 绿色
			case 2:
				return '#d9534f'; // 异常 - 红色
			case 3:
				return '#f0ad4e'; // 超时 - 橙色
			default:
				return '#6c757d';
		}
	});

	// 状态栏设置
	onReady(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle('light');
		// #endif
	});
	onShow(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle('light');
		// #endif
	});

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

	// 按钮事件（示例）
	const handleEdit = () => {
		uni.showToast({ title: '点击了编辑', icon: 'success' });
	};

	const handleHistory = () => {
		uni.showToast({ title: '查看巡检记录', icon: 'success' });
	};
</script>

<style lang="scss" scoped>
	.device-detail {
		min-height: 100vh;
		// padding-bottom: 80rpx; /* 底部操作栏预留空间 */
	}

	.device-card {
		margin: 20rpx 30rpx;
		background-color: #1a3e5a;
		border-radius: 12rpx;
		color: #e0e0e0;
		font-size: 28rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
		overflow: hidden;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #2b5b81;
		background-color: #132c46;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}

	.status-tag {
		padding: 8rpx 20rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.card-content {
		padding: 30rpx;
	}

	.row {
		display: flex;
		margin-bottom: 20rpx;
		align-items: center;
	}

	.label {
		width: 180rpx;
		color: #999;
	}

	.value {
		flex: 1;
		color: #e0e0e0;
	}

	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background-color: #1d345e;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.uv-button {
		flex: 1;
		margin: 0;
	}
</style>