<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 { getSecurityCameraDetail } from '#/api/aiAnalysis/aiAnalysis';

// 摄像头详情数据
const cameraInfo = ref({});

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


// 初始化数据
const init = async () => {
  try {
    const res = await getSecurityCameraDetail(cameraId.value);
    cameraInfo.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="camera-info" :column="4">
            <ElDescriptionsItem label="摄像头位置:">
              {{ cameraInfo.location || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="所属场站:">
              {{ cameraInfo.stationName || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="通道地址:">
              {{ cameraInfo.httpUrl || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="摄像头名称:">
              {{ cameraInfo.cameraName || '-' }}
            </ElDescriptionsItem>

            <ElDescriptionsItem label="摄像头编码:">
              {{ cameraInfo.cameraCode || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="摄像头类型:">
              {{ cameraInfo.cameraType || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="IP地址:">
              {{ cameraInfo.ipAddress || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="端口号:">
              {{ cameraInfo.port || '-' }}
            </ElDescriptionsItem>

            <ElDescriptionsItem label="登录用户名:">
              {{ cameraInfo.username || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="RTSP流地址:">
              {{ cameraInfo.rtspUrl || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="是否启用AI:">
              {{ cameraInfo.aiEnabled === '1' ? '是' : '否' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="设备状态:">
              {{ 
                cameraInfo.status === '0' ? '在线' : 
                cameraInfo.status === '1' ? '离线' : 
                cameraInfo.status === '2' ? '故障' : '-' 
              }}
            </ElDescriptionsItem>

            <ElDescriptionsItem label="对接平台类型:">
              {{ cameraInfo.platformType || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="平台设备ID:">
              {{ cameraInfo.platformId || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="最后在线时间:">
              {{ cameraInfo.lastOnlineTime || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="最后维护时间:">
              {{ cameraInfo.lastMaintenance || '-' }}
            </ElDescriptionsItem>

            <ElDescriptionsItem label="维护周期（天）:">
              {{ cameraInfo.maintenanceCycle || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="经度:">
              {{ cameraInfo.longitude || '-' }}
            </ElDescriptionsItem>
            <ElDescriptionsItem label="纬度:">
              {{ cameraInfo.latitude || '-' }}
            </ElDescriptionsItem>
          </ElDescriptions>
        </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;
}

.camera-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;
  }
}
</style>
