<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="filter-row">
      <el-col :span="5">
        <el-form-item label="摄像头名称">
          <el-select v-model="filterParams.cameraId" placeholder="请选择摄像头" filterable>
            <el-option v-for="camera in cameras" :key="camera.id" :label="camera.name" :value="camera.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col> 
      <el-col :span="4">
        <el-form-item label="告警类型">
          <el-select v-model="filterParams.types" placeholder="请选择告警类型">
            <el-option v-for="(label, key) in typeMapping" :key="key" :label="label" :value="key"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="开始时间">
          <el-date-picker v-model="filterParams.timeAfter" type="datetime" placeholder="请选择开始时间"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="结束时间">
          <el-date-picker v-model="filterParams.timeBefore" type="datetime" placeholder="请选择结束时间"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="2" class="filter-buttons">
        <el-button type="primary" @click="handleFilter">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>
    </el-row>

    <el-row class="table-row">
      <el-col :span="24" class="table-col">
        <div class="table-container">
          <el-table :data="tableData" header-row-class-name="table-header" :fit="true" height="580">
            <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="150">
              <template v-slot="scope">
                <el-button type="text" @click="handleView(scope.row)">查看</el-button>
                <el-button type="text" v-if="scope.row.status === 'pending'"
                  @click="submitStatusUpdate('closed', 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.remark }}</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 video-item">
            <p>告警关联视频</p>
            <video :src="videoFile" controls @click="openMediaDialog('video', videoFile)"></video>
          </div>

          <!-- 告警关联图片 -->
          <div v-if="hasSnapshot" class="media-container image-item">
            <p>告警关联图片</p>
            <el-image :src="snapshotFile" fit="contain" @click="openMediaDialog('image', snapshotFile)"></el-image>
          </div>
        </div>
        <!-- 备注输入框 -->
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-input v-model="remark" placeholder="请描述事件原因，处理过程方法，以及处理结果" type="textarea" rows="5"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 条件显示按钮 -->
        <el-row class="dialog-button">
          <el-col :span="24" style="text-align: center;">
            <el-button v-if="selectedRow.status === 'pending'" type="primary" @click="submitStatusUpdate('closed')">
              标记为已处理
            </el-button>
            <el-button v-else type="primary" @click="submitStatusUpdate(selectedRow.status)">
              提交
            </el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog v-model="mediaDialogVisible" width="70%">
      <div v-if="mediaType === 'image'">
        <el-image :src="mediaSrc" fit="contain" style="width: 100%;"></el-image>
      </div>
      <div v-if="mediaType === 'video'">
        <video :src="mediaSrc" controls style="width: 100%;"></video>
      </div>
    </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 remark = ref("");
const mediaDialogVisible = ref(false);
const mediaType = ref('');
const mediaSrc = ref('');

const selectedRow = ref({});
const mediums = ref([]);
const duration = ref('');
const typeMapping = reactive({});
const statusMapping = {
  'pending': '待处理',
  'assigned': '处理中',
  'closed': '已处理'
};
const currentPage = ref(1);
const pageSize = ref(20);
const token = ref(null);
const totalItems = ref(0);
const displayTotalItems = ref(0); // 用于展示的数字
const cameras = ref([]);

const fetchCameras = async () => {
  try {
    const token = localStorage.getItem('alertToken');
    const limit = 20; // 每次请求 20 条数据
    let offset = 0; // 从 0 开始
    let allCameras = [];

    // 第一次请求，用于获取总数
    const firstResponse = await boxApi.getCameras(limit, offset, token);
    const cameraCount = firstResponse.count;
    allCameras = firstResponse.results;

    // 根据总数继续请求剩余的数据
    while (offset + limit < cameraCount) {
      offset += limit;
      const response = await boxApi.getCameras(limit, offset, token);
      allCameras = allCameras.concat(response.results);
    }

    cameras.value = allCameras; // 存储所有摄像头信息
  } catch (error) {
    console.error("Error fetching cameras:", error);
  }
};




const filterParams = reactive({
  types: null,
  timeAfter: null,
  timeBefore: null,
});


// 更新状态和备注的方法
const submitStatusUpdate = async (newStatus, row = null) => {
  try {
    // console.console.log(row,row.id);
    const eventId = row ? row.id : selectedRow.value.id;
    const remarkContent = remark.value && remark.value.trim() !== "" ? remark.value : null;

    // 调用 setEventStatus 更新事件状态和备注
    await boxApi.setEventStatus(eventId, newStatus, remarkContent);


    if (row) {
      row.status = newStatus;
      row.remark = remarkContent; // 更新该行的备注
    } else {
      selectedRow.value.status = newStatus;
      selectedRow.value.remark = remarkContent;
      dialogVisible.value = false; // 关闭弹窗
      remark.value = ""; // 清空备注
    }
  } catch (error) {
    console.error("Error updating event status:", error);
  }
};

const handleFilter = async () => {
  try {
    const types = filterParams.types || null;
    // const timeAfter = filterParams.timeAfter ? new Date(filterParams.timeAfter).toISOString() : null;
    // const timeBefore = filterParams.timeBefore ? new Date(filterParams.timeBefore).toISOString() : null;
    const timeAfter = filterParams.timeAfter ? formatDateTime(new Date(filterParams.timeAfter)) : null;
    const timeBefore = filterParams.timeBefore ? formatDateTime(new Date(filterParams.timeBefore)) : null;
    const cameraId = filterParams.cameraId || null;

    const { results, count } = await boxApi.getEventsByParams(
      token.value,
      pageSize.value,
      currentPage.value,
      timeBefore,
      timeAfter,
      types,
      cameraId
    );
    tableData.value = results;
    totalItems.value = count;
  } catch (error) {
    console.error("Error fetching filtered events:", error);
  }
};

const handleReset = () => {
  filterParams.types = null;
  filterParams.timeAfter = null;
  filterParams.timeBefore = null;
  filterParams.cameraId = null;
  fetchEvents(); // 重置筛选条件后，重新获取所有告警数据
};



const openMediaDialog = (type, src) => {
  mediaType.value = type;  // 设置媒体类型
  mediaSrc.value = src;  // 设置媒体源文件
  mediaDialogVisible.value = true;  // 打开弹窗
};

// 计算属性：根据 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 || [];
  remark.value = row.remark || "";
};

const closeDialog = () => {
  remark.value = "";
};

// 分页处理
const handlePageChange = (page) => {
  currentPage.value = page;
  if (filterParams.types || filterParams.timeAfter || filterParams.timeBefore) {
    handleFilter();
  } else {
    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();
  await fetchCameras();
});
</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 {
  max-width: 100%;
  /* min-height: 50vh; */
  /* max-height: 70vh; */
  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;
  width: 100%;
}

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

.table-col {
  max-height: 100%;
}

.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-start;
  background-color: #e8e9e4;
  padding-left: 20px;
}

::v-deep .pagination-container .el-pagination__total,
::v-deep .pagination-container .el-pagination__goto,
::v-deep .pagination-container .el-pagination__classifier {
  color: #000;
}

.dialog-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.filter-row {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 80px;
  padding: 20px;
  margin-top: 20px;
  gap: 20px;
  font-weight: bold;
}
</style>
