<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>
        告警总数:{{ totalItems }}
      </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>
      <span slot="footer" class="dialog-footer">
        <div class=""></div>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } 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 totalItems = ref(0);
const token = ref(null);

// 获取类型映射
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;
  } catch (error) {
    console.error("Error fetching events data:", error);
  }
};

// 查看告警详情
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;
}

.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: 380px;
  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;
}

.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>
