<template>
    <div class="camera-container">
      <div class="top-header">
        <el-select v-model="filterStatus" placeholder="筛选状态" @change="fetchCameras" class="status-filter" >
          <el-option label="全部" value="all"></el-option>
          <el-option label="在线" value="online"></el-option>
          <el-option label="离线" value="offline"></el-option>
        </el-select>
        <div class="top-text">警戒点位</div>
        <el-select v-model="selectedCameraId" placeholder="搜索摄像头名称" @change="selectCameraById" clearable filterable
          class="camera-select" >
          <el-option v-for="camera in cameras" :key="camera.id" :label="camera.name" :value="camera.id">
            <span>{{ camera.id }}.</span> &nbsp;名称: {{ camera.name }}
          </el-option>
        </el-select>
  
      </div>
  
      <!-- 播放列表，设置为可滚动 -->
      <div class="camera-grid">
        <div v-for="(camera, index) in selectedCameras" :key="camera.id" class="grid-item">
          <div class="stream-control">
            <p class="camera-name-title">{{ camera.name }}</p>
            <div class="close-button" @click="closeStream(camera)">×</div>
          </div>
  
          <div class="play-button-container" @mouseenter="showButton = true" @mouseleave="showButton = false">
            <div class="camera-placeholder" v-if="!camera.playing && !camera.snapshot">
              <el-icon size="48">
                <VideoCameraFilled />
              </el-icon>
            </div>
            <img v-if="!camera.playing && camera.snapshot" :src="camera.snapshot" alt="camera snapshot"
              class="camera-snapshot" />
            <el-button v-show="!camera.playing || showButton" class="play-button" type="primary" circle size="large"
              @click="openDialog(camera)">
              <el-icon>
                <VideoPlay v-if="!camera.playing" />
                <VideoPause v-if="camera.playing" />
              </el-icon>
            </el-button>
          </div>
        </div>
      </div>
  
      <!-- 弹窗播放视频 -->
      <el-dialog v-model="dialogVisible" width="50%" @close="closeDialog">
        <template #title>播放摄像头: {{ currentCamera?.name }}</template>
        <canvas v-show="dialogVisible" ref="dialogCanvas" class="dialog-canvas"></canvas>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
  import { BoxApi } from '@/utils/boxApi.ts';
  import { VideoPlay, VideoPause, VideoCameraFilled } from '@element-plus/icons-vue';
  
  const cameras = ref([]);
  const selectedCameras = ref([]);
  const showButton = ref(false);
  const apiInstance = new BoxApi();
  const canvasRefs = ref({});
  const selectedCameraId = ref(null);
  const dialogVisible = ref(false); // 控制弹窗的显示与隐藏
  const currentCamera = ref(null); // 当前选中的摄像头
  
  // 弹窗中的canvas引用
  const dialogCanvas = ref(null);
  const filterStatus = ref("all");
  
  const fetchCameras = async () => {
    try {
      const token = localStorage.getItem('alertToken');
      const cameraData = await apiInstance.getMinCameras(token);
  
      // 根据 filterStatus 筛选摄像头状态
      if (filterStatus.value === "online") {
        cameras.value = cameraData.filter(camera => camera.status === "online");
      } else if (filterStatus.value === "offline") {
        cameras.value = cameraData.filter(camera => camera.status === "offline");
      } else {
        cameras.value = cameraData; // 默认 "all" 显示全部摄像头
      }
    } catch (error) {
      console.error('获取摄像头列表失败:', error);
    }
  };
  
  const selectCameraById = (cameraId) => {
    const camera = cameras.value.find(c => c.id === cameraId);
    if (camera && !selectedCameras.value.some(c => c.id === camera.id)) {
      selectedCameras.value.push({ ...camera, playing: false, streamPort: null });
    }
  };
  
  // 打开弹窗并开始播放
  const openDialog = async (camera) => {
    currentCamera.value = camera;
    dialogVisible.value = true;
    await nextTick();
    startStreamInDialog(camera);
  };
  
  // 在弹窗中播放视频
  const startStreamInDialog = async (camera) => {
    const canvas = dialogCanvas.value;
  
    if (!camera || !canvas) {
      console.error('未找到对应的 canvas');
      return;
    }
  
    const token = localStorage.getItem('alertToken');
    try {
      const response = await apiInstance.startCameraStream(token, camera.id);
      camera.streamPort = response.port;
      camera.playing = true;
  
      const url = `ws://192.168.28.33:${camera.streamPort}/`;
      console.log('播放路径:', url);
  
      if (window.JSMpeg) {
        const player = new window.JSMpeg.Player(url, {
          canvas: canvas,
          autoplay: true,
          videoBufferSize: 15 * 1024 * 1024,
          audioBufferSize: 5 * 1024 * 1024,
        });
        camera.player = player;
      } else {
        console.error('JSMpeg 未加载');
      }
    } catch (error) {
      console.error('启动视频流失败:', error);
    }
  };
  
  // 关闭弹窗并停止视频播放
  const closeDialog = () => {
    if (currentCamera.value) {
      handleStopStream(currentCamera.value);
    }
    dialogVisible.value = false;
    currentCamera.value = null;
  };
  
  const handleStopStream = async (camera) => {
    const token = localStorage.getItem('alertToken');
    try {
      await apiInstance.stopCameraStream(token, camera.id);
      camera.playing = false;
  
      if (camera.player) {
        camera.player.destroy();
        camera.player = null;
      }
    } catch (error) {
      console.error('停止视频流失败:', error);
    }
  };
  
  const closeStream = (camera) => {
    handleStopStream(camera);
    selectedCameras.value = selectedCameras.value.filter(c => c.id !== camera.id);
  };
  
  onMounted(() => {
    fetchCameras();
  });
  
  onBeforeUnmount(() => {
    selectedCameras.value.forEach(camera => {
      if (camera.player) {
        camera.player.destroy();
      }
    });
  });
  </script>
  
  <style  scoped>
  .camera-container {
    display: flex;
    flex-direction: column;
  }
  
  .top-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin: 0;
  }
  
  .status-filter {
    position: relative;
    top: 0vh;
    left: 0vw;
    width: 5vw;
    margin-left: 1vh;
    margin-top: 1vh;
  
  }
  ::v-deep .status-filter .el-select__wrapper{
    background-color: #001529;
    box-shadow: 0 0 0 0 !important;
    border-radius: 0;
  }
  
  ::v-deep .camera-select .el-select__wrapper{
    background-color: #001529;
    box-shadow: 0 0 0 0 !important;
    border-radius: 0;
  }
  
  ::v-deep .camera-select .el-select__selected-item {
    color: #ffffff !important; 
  }
  
  ::v-deep .status-filter .el-select__selected-item {
    color: #ffffff !important; 
  }
  
  .camera-select {
    position: relative;
    top: 0vh;
    left: 0vw;
    width: 12vw;
    margin-left: 0vh;
    margin-top: 1vh;
  }
  
  
  
  
  .top-text {
    display: block;
    font-size: 15px;
    width: 7vw;
    margin: 1vh 0 0 0;
    padding: 0 0 0 10vw;
    /* justify-content: center; */
    align-content: center;
    background-color: #001529;
    line-height: 0px;
    color: aliceblue;
    font-weight: bold;
  }
  
  .stream-control {
    display: flex;
    align-items: center;
    text-align: center;
    background-color: black;
  }
  
  .camera-name-title {
    padding: 0.2vh;
    margin: 0;
    font-size: 13px;
    display: block;
    color: white;
  }
  
  .camera-grid {
    margin: 0vh 1vh;
    padding: 0 0 2vh 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vh 0vh;
    width: 34vw;
    height: 39vh;
    max-height: 45vh;
    overflow-y: scroll;
    scrollbar-width: none;
    background-color: #001529;
  }
  
  .camera-grid::-webkit-scrollbar {
    display: none;
  }
  
  .grid-item {
    margin: 1vh;
    position: relative;
    height: 17vh;
    display: flex;
    flex-direction: column;
  }
  
  .camera-snapshot,
  .camera-large {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .close-button {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 15px;
    height: 15px;
    background-color: #000000;
    color: aliceblue;
    padding: 0 2px 2px 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .close-button:hover {
    background-color: red;
  }
  
  .play-button-container {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0.4;
    transition: opacity 0.2s ease-in-out;
  }
  
  .play-button:hover {
    opacity: 1;
  }
  
  .dialog-canvas {
    width: 100%;
    height: 100%;
  }
</style>
  