<template>
	<view class="alarm-list">
		<!-- 导航栏 -->
		<uv-navbar title="报警列表" :placeholder="true" :titleStyle="{ color: '#ffffff' }" leftIconColor="#ffffff"
			bgColor="#1d345e" @leftClick="goBack"></uv-navbar>
		<!-- 报警列表 -->
		<view style="margin: 0rpx 20rpx;" v-if="alarmData.length > 0">
			<view class="item_alarm" v-for="(item, index) in alarmData" :key="index" @click="goToDetails(item)">
				<view class="white_color">{{ item.alarmId }}</view>
				<view class="white_color">类型: {{ item.alarmType }}</view>
				<view class="white_color">地点: {{ item.location }}</view>
				<view class="white_color">联系人: {{ item.contactName }} {{ item.contactPhone }}</view>
				<view class="white_color">提交时间: {{ item.submitTime }}</view>
			</view>
		</view>

		<!-- 无数据提示 -->
		<view style="margin-top: 30%;" v-else>
			<x-empty></x-empty>
		</view>
	</view>
</template>

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

	// 报警数据
	const alarmData = ref([
		{
			alarmId: '777876556',
			alarmType: '电梯厅摄像头监控',
			location: '电梯厅',
			contactName: '李某某',
			contactPhone: '17822222222',
			submitTime: '2025-06-12 09:01:22',
		},
		{
			alarmId: '888987667',
			alarmType: '消防通道监控',
			location: '消防通道',
			contactName: '张某某',
			contactPhone: '17833333333',
			submitTime: '2025-06-12 10:15:30',
		},
	]);

	// 返回上一页
	function goBack() {
		uni.navigateBack({
			delta: 1,
		});
	}

	// 跳转到报警详情页
	function goToDetails(alarm : any) {
		uni.navigateTo({
			url: `/pages/alarms/details?alarmId=${alarm.alarmId}`,
		});
	}
</script>

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

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

	.white_color {
		color: #fff;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}
</style>