<template>
    <div class="alert-container">
      <el-row class="top-pan">
        <el-col :sm="24" :md="12" class="panel-section">
          <statistics />
        </el-col>
        <el-col :sm="24" :md="12" class="panel-section">
          <alertChart />
        </el-col>
      </el-row>
      <el-row class="middle-row">
        <span>
          告警总数:{{ displayTotalItems }}
        </span>
      </el-row>
      <el-row class="table-row">
        <el-col :span="24">
          <div class="table-container">
            <el-table :data="tableData" style="width:100%; height: 100%;" header-row-class-name="table-header" :fit="true">
              <el-table-column prop="id" label="告警编号" min-width="100"></el-table-column>
              <el-table-column label="告警类型" min-width="150">
                <template v-slot="scope">
                  {{ typeMapping[scope.row.types] }}
                </template>
              </el-table-column>
              <el-table-column prop="camera.name" label="告警位置" min-width="150"></el-table-column>
              <el-table-column label="告警时间" min-width="200">
                <template v-slot="scope">
                  {{ formatDateTime(scope.row.ended_at) }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="告警状态" min-width="100">
                <template v-slot="scope">
                  <el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">{{ statusMapping[scope.row.status]
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="100">
                <template v-slot="scope">
                  <el-button type="text" @click="handleView(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="currentPage"
              :page-size="pageSize" :total="totalItems" layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
      <el-dialog v-model="dialogVisible" title="告警详情" width="80%">
        <div>
          <el-row>
            <el-col :span="6">
              <p>告警编号: {{ selectedRow.id }}</p>
            </el-col>
            <el-col :span="6">
              <p>告警类型: {{ typeMapping[selectedRow.types] }}</p>
            </el-col>
            <el-col :span="6">
              <p>告警位置: {{ selectedRow.camera.name }}</p>
            </el-col>
            <el-col :span="6">
              <p>告警时间: {{ selectedRow.formatted_started_at }}</p>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <p>告警状态: <el-tag :type="selectedRow.status === 'pending' ? 'warning' : 'success'">{{
                statusMapping[selectedRow.status]
              }}</el-tag></p>
            </el-col>
            <el-col :span="6">
              <p>摄像头编号: {{ selectedRow.camera_id }}</p>
            </el-col>
            <el-col :span="6">
              <p>持续时间: {{ duration }}</p>
            </el-col>
            <el-col :span="6">
              <p>备注: {{ selectedRow.note }}</p>
            </el-col>
          </el-row>
          <!-- <div class="event-media">
            <div v-for="medium in selectedRow.mediums" :key="medium.id" class="media-container">
              <div v-if="medium.name === 'video'" class="media-item video-item">
                <p>告警关联视频</p>
                <video :src="medium.file" controls></video>
              </div>
              <div v-if="medium.name === 'snapshot'" class="media-item image-item">
                <p>告警关联图片</p>
                <el-image :src="medium.file" fit="contain"></el-image>
              </div>
            </div>
          </div> -->
          <div class="event-media" :class="{ 'center-media': mediums.length === 1 }">
            <!-- 告警关联视频 -->
            <div v-if="hasVideo" class="media-container">
              <p>告警关联视频</p>
              <video :src="videoFile" controls></video>
            </div>
  
            <!-- 告警关联图片 -->
            <div v-if="hasSnapshot" class="media-container">
              <p>告警关联图片</p>
              <el-image :src="snapshotFile" fit="contain"></el-image>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <div class=""></div>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, computed } from 'vue';
  import Statistics from '@/components/Statistics.vue';
  import AlertChart from '@/components/AlertChart.vue';
  import { BoxApi } from '@/utils/boxApi.ts';  // 导入 BoxApi
  
  // 创建 BoxApi 实例
  const boxApi = new BoxApi();
  
  // 响应式数据
  const tableData = ref([]);
  const dialogVisible = ref(false);
  const selectedRow = ref({});
  const mediums = ref([]);
  const duration = ref('');
  const typeMapping = reactive({});
  const statusMapping = {
    'pending': '待处理',
    'closed': '已处理'
  };
  const currentPage = ref(1);
  const pageSize = ref(20);
  const token = ref(null);
  const totalItems = ref(0);
  const displayTotalItems = ref(0); // 用于展示的数字
  
  // 计算属性：根据 mediums 动态判断是否存在视频和图片
  const hasVideo = computed(() => mediums.value.some(medium => medium.name === 'video'));
  const hasSnapshot = computed(() => mediums.value.some(medium => medium.name === 'snapshot'));
  
  // 获取视频和图片的文件
  const videoFile = computed(() => {
    const video = mediums.value.find(medium => medium.name === 'video');
    return video ? video.file : '';
  });
  
  const snapshotFile = computed(() => {
    const snapshot = mediums.value.find(medium => medium.name === 'snapshot');
    return snapshot ? snapshot.file : '';
  });
  
  // 获取类型映射
  const fetchTypeMapping = async (token) => {
    try {
      const algorithms = await boxApi.getAlgorithms(token);  // 使用 BoxApi 的 getAlgorithms 方法
      const additionalMappings = [{ code_name: 'minizawu:532', name: '杂物堆积' }];
      algorithms.forEach((algorithm) => {
        typeMapping[algorithm.code_name] = algorithm.name;
      });
    } catch (error) {
      console.error("Error fetching algorithms:", error);
    }
  };
  
  // 获取告警数据
  const fetchEvents = async () => {
    try {
      const { tableData: data, totalItems: total } = await boxApi.getEvents(token.value, pageSize.value, currentPage.value);  // 使用 BoxApi 的 getEvents 方法
      tableData.value = data;
      totalItems.value = total;
      animateNumberChange(total);
    } catch (error) {
      console.error("Error fetching events data:", error);
    }
  };
  
  const animateNumberChange = (newTotal) => {
    const stepTime = 50; // 每次递增的时间间隔
    // const stepCount = Math.abs(newTotal - displayTotalItems.value);
    const stepCount = Math.abs(newTotal - displayTotalItems.value) / 20;
  
    const incrementStep = Math.ceil((newTotal - displayTotalItems.value) / stepCount); // 每次递增的值
  
    const step = () => {
      if (displayTotalItems.value < newTotal) {
        displayTotalItems.value = Math.min(displayTotalItems.value + incrementStep, newTotal);
        requestAnimationFrame(step);
      } else if (displayTotalItems.value > newTotal) {
        displayTotalItems.value = Math.max(displayTotalItems.value - incrementStep, newTotal);
        requestAnimationFrame(step);
      }
    };
  
    step();
  };
  
  // 查看告警详情
  const handleView = (row) => {
    selectedRow.value = row;
    duration.value = calculateDuration(row.started_at, row.ended_at);
    row.formatted_started_at = formatDateTime(row.started_at);
    dialogVisible.value = true;
    mediums.value = row.mediums || [];
  };
  
  // 分页处理
  const handlePageChange = (page) => {
    currentPage.value = page;
    fetchEvents();
  };
  
  // 页大小处理
  const handleSizeChange = (size) => {
    pageSize.value = size;
    fetchEvents();
  };
  
  // 计算持续时间
  const calculateDuration = (started_at, ended_at) => {
    const start = new Date(started_at);
    const end = new Date(ended_at);
    const durationMs = end - start;
    const minutes = Math.floor(durationMs / 60000);
    const seconds = ((durationMs % 60000) / 1000).toFixed(0);
    return `${minutes}分${seconds < 10 ? '0' : ''}${seconds}秒`;
  };
  
  // 格式化日期时间
  const formatDateTime = (datetime) => {
    const date = new Date(datetime);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    const seconds = date.getSeconds().toString().padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };
  
  // 页面加载后执行
  onMounted(async () => {
    token.value = localStorage.getItem('alertToken');
    await fetchTypeMapping(token.value);
    await fetchEvents();
  });
  </script>
  
  <style scoped>
  .alert-container {
    padding: 0;
    margin: 0;
    background-color: #f5f7fa;
  }
  
  .top-pan {
    padding: 0px;
    margin: 0px;
    display: flex;
    gap: 10px;
    background-color: #fff;
    overflow: auto;
  }
  
  .panel-section {
    flex: 1;
    background-color: #fff;
    box-shadow: 0 20px 8px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    transform: scale(0.8);
    transform-origin: center center;
  }
  
  .middle-row {
    min-height: 5vw;
    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 30px;
    font-weight: bold;
    background: linear-gradient(to bottom left, rgb(150, 151, 243), rgb(215, 214, 250));
    border-radius: 8px;
  }
  
  .table-container {
    width: 100%;
    height: 650px;
    min-height: 60%;
    overflow-x: auto;
  }
  
  .table-header {
    background-color: #f7f8fa;
    font-weight: bold;
  }
  
  ::v-deep .el-table th.el-table__cell {
    background-color: #000;
    color: #fff;
  }
  
  .event-media {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .center-media {
    justify-content: center;
  }
  
  .media-container {
    flex: 0 0 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-sizing: border-box;
    padding: 10px;
  }
  
  .video-item video,
  .image-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .video-item p,
  .image-item p {
    margin-bottom: 8px;
    text-align: center;
    font-weight: bold;
  }
  
  .pagination-container {
    display: flex;
    justify-content: flex-end;
    background-color: #e8e9e4;
  }
  
  ::v-deep .pagination-container .el-pagination__total,
  ::v-deep .pagination-container .el-pagination__goto,
  ::v-deep .pagination-container .el-pagination__classifier {
    color: #000;
  }
  </style>
  