<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import { Page } from '@vben/common-ui';
import { ElCard, ElDescriptions, ElDescriptionsItem } from 'element-plus';

import { getSecurityAlertDetail } from '#/api/aiAnalysis/aiAnalysis';

// 预警详情数据
const warningInfo = ref({});

const route = useRoute();
const alertId = ref(Number(route.params.alertId));


// 初始化数据
const init = async () => {
  try {
    const res = await getSecurityAlertDetail(alertId.value);
    warningInfo.value = res || {};
  } catch (error) {
    console.error('获取预警详情失败:', error);
  }
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <Page title="预警详情" :auto-content-height="true">
    <div class="boxdev">
      <div class="min-w-0 flex-1">
        <!-- 基础信息卡片 -->
        <ElCard>
          <template #header>
            <div class="flex items-center gap-4">
              <div
                style="width: 4px; height: 12px; background-color: #215acd"
              ></div>
              <span
                class="text-lg font-bold text-gray-800"
                style="font-size: 14px; font-weight: 600"
              >
                基本信息
              </span>
            </div>
          </template>
          <ElDescriptions class="warning-info" :column="4">
            <ElDescriptionsItem label="预警时间:">
              {{ warningInfo.alertTime || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="预警场站:">
              {{ warningInfo.stationName || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="预警场景:">
              {{ 
                warningInfo.alertType === 'fire' ? '火焰' : 
                warningInfo.alertType === 'smoke' ? '烟雾' : 
                warningInfo.alertType === 'fire_danger' ? '火灾' : 
                warningInfo.alertType === 'intrusion' ? '入侵' : 
                warningInfo.alertType || '-' 
              }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="预警级别:">
              {{ 
                warningInfo.alertLevel === '1' ? '一般' : 
                warningInfo.alertLevel === '2' ? '重要' : 
                warningInfo.alertLevel === '3' ? '紧急' : 
                warningInfo.alertLevel || '-' 
              }}
            </ElDescriptionsItem>

            <ElDescriptionsItem label="处理状态:">
              {{ 
                warningInfo.status === 'unhandled' ? '未处理' : 
                warningInfo.status === 'handling' ? '处理中' : 
                warningInfo.status === 'resolved' ? '已解决' : 
                warningInfo.status === 'false_alarm' ? '误报' : 
                warningInfo.status || '-' 
              }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="摄像头位置:">
              {{ warningInfo.location || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="识别置信度:">
              {{ warningInfo.confidence || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="预警编号:">
              {{ warningInfo.alertCode || '-' }}
            </ElDescriptionsItem>

            <ElDescriptionsItem label="场站站长:">
              {{ warningInfo.stationManagerName || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="站长电话:">
              {{ warningInfo.stationManagerPhone || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="片区经理:">
              {{ warningInfo.areaManagerName || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="片区经理电话:">
              {{ warningInfo.areaManagerPhone || '-' }}
            </ElDescriptionsItem>

            <ElDescriptionsItem label="处理人ID:">
              {{ warningInfo.handleUserId || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="处理时间:">
              {{ warningInfo.handleTime || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="处理备注:">
              {{ warningInfo.handleRemark || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="预警ID:">
              {{ warningInfo.alertId || '-' }}
            </ElDescriptionsItem>
          </ElDescriptions>
        </ElCard>
        <!-- 异常图片卡片 -->
        <ElCard class="mt-4">
          <template #header>
            <div class="flex items-center gap-4">
              <div
                style="width: 4px; height: 12px; background-color: #215acd"
              ></div>
              <span
                class="text-lg font-bold text-gray-800"
                style="font-size: 14px; font-weight: 600"
              >
                异常图片
              </span>
            </div>
          </template>
          <div v-if="warningInfo.snapshotPathUrl" class="snapshot-container">
            <!-- snapshotPathUrl  是一个数组 -->
            <el-image
              v-for="url in warningInfo.snapshotPathUrl"
              :key="url"
              :src="url"
              style="width: 300px; height: 200px"
              fit="cover"
              :preview-src-list="[url]"
            />
          </div>
          <div v-else class="snapshot-container">
            <span>无异常图片</span>
          </div>
        </ElCard>
      </div>
    </div>
  </Page>
</template>

<style scoped lang="scss">
.boxdev {
  display: flex;
  gap: 20px;
}

.boxdev :deep(.el-card) {
  border: none !important;
  box-shadow: none !important;
}

.boxdev :deep(.el-card__header) {
  padding-top: 18px !important;
  padding-bottom: 4px !important;
  padding-left: 0px !important;
  border-bottom: none !important;
}

.boxdev :deep(.el-card__body) {
  padding-top: 16px !important;
}

::v-deep .el-descriptions__body {
  background: #ffffff00 !important;
}

.boxdev > div:nth-child(1) {
  flex: 1;
  min-width: 0;
}

.warning-info {
  :deep(.el-descriptions__label) {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color-secondary);
  }

  :deep(.el-descriptions__content) {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-primary);
  }

  :deep(.el-descriptions__table) {
    background: transparent !important;
  }
}

.mt-4 {
  margin-top: 16px;
}

.snapshot-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  padding: 20px;
}
</style>
