<template>
	<view class="alarm-details">
		<!-- 导航栏 -->
		<uv-navbar title="报警详情" :placeholder="true" :titleStyle="{ color: '#ffffff' }" leftIconColor="#ffffff"
			bgColor="#1d345e" @leftClick="goBack"></uv-navbar>

		<!-- 报警详情内容 -->
		<view class="details-container">
			<view class="item-detail">
				<text class="label">报警编号:</text>
				<text class="value">{{ alarmDetail.alarmId }}</text>
			</view>
			<view class="item-detail">
				<text class="label">报警类型:</text>
				<text class="value">{{ alarmDetail.alarmType }}</text>
			</view>
			<view class="item-detail">
				<text class="label">报警地点:</text>
				<text class="value">{{ alarmDetail.location }}</text>
			</view>
			<view class="item-detail">
				<text class="label">联系人:</text>
				<text class="value">{{ alarmDetail.contactName }} {{ alarmDetail.contactPhone }}</text>
			</view>
			<view class="item-detail">
				<text class="label">提交时间:</text>
				<text class="value">{{ alarmDetail.submitTime }}</text>
			</view>
			<view class="item-detail">
				<text class="label">报警描述:</text>
				<text class="value">{{ alarmDetail.description || '无描述' }}</text>
			</view>
			<view class="item-detail">
				<text class="label">处理状态:</text>
				<text class="value" :style="{ color: getAlarmStatusColor(alarmDetail.status) }">
					{{ getAlarmStatusText(alarmDetail.status) }}
				</text>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { onShow, onReady, onLoad } from '@dcloudio/uni-app';


	// 报警详情数据
	const alarmDetail = ref({
		alarmId: '',
		alarmType: '',
		location: '',
		contactName: '',
		contactPhone: '',
		submitTime: '',
		description: '',
		status: 'pending', // 待处理、已处理、异常、超时
	});

	// 状态颜色映射
	const statusColors : any = {
		pending: '#3c9cff', // 待处理 - 蓝色
		processed: '#22c55e', // 已处理 - 绿色
		abnormal: '#f26a6a', // 异常 - 红色
		overdue: '#efc43f', // 超时 - 橙色
	};

	// 获取报警状态的颜色
	function getAlarmStatusColor(status : string) {
		return statusColors[status] || '#ffffff';
	}

	// 获取报警状态的文本
	function getAlarmStatusText(status : string) {
		switch (status) {
			case 'pending':
				return '待处理';
			case 'processed':
				return '已处理';
			case 'abnormal':
				return '异常';
			case 'overdue':
				return '超时';
			default:
				return '未知';
		}
	}

	// 返回上一页
	function goBack() {
		uni.navigateBack({
			delta: 1
		});
	}
	onLoad((params : any) => {
		fetchAlarmDetails(params.alarmId);
	})

	// 模拟获取报警详情数据
	async function fetchAlarmDetails(alarmId : string) {
		// 模拟异步请求
		setTimeout(() => {
			alarmDetail.value = {
				alarmId,
				alarmType: '电梯厅摄像头监控',
				location: '电梯厅',
				contactName: '李某某',
				contactPhone: '17822222222',
				submitTime: '2025-06-12 09:01:22',
				description: '电梯厅摄像头检测到异常活动',
				status: 'pending',
			};
		}, 500);
	}
</script>

<style lang="scss" scoped>
	.alarm-details {
		background-color: #1d345e;
		min-height: 100vh;
	}

	.details-container {
		padding: 20rpx;
		background-color: rgba(85, 110, 143, 0.3);
		border-radius: 10rpx;
		margin: 20rpx;
	}

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

		.label {
			color: #fff;
			font-size: 28rpx;
			font-weight: bold;
		}

		.value {
			color: #fff;
			font-size: 28rpx;
		}
	}
</style>