<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>环视系统</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
  <link href="https://vjs.zencdn.net/8.23.3/video-js.css" rel="stylesheet" />
  <style>
    html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
    #app { display: flex; height: 100vh; }
    #sidebar { width: 200px; background: #393D49; color: white; padding: 20px 0; }
    #main { flex: 1; position: relative; background: black; }
    #video { width: 100%; height: 100%; object-fit: contain; }
    #video-player { width: 100%; height: 100%; display: none; }
    .menu-item { padding: 12px 20px; cursor: pointer; }
    .menu-item:hover { background: #4B515D; }
    .active { background: #009688 !important; }
    .disk-info { padding: 10px; background: #4B515D; margin: 10px; border-radius: 5px; font-size: 12px; }
    .disk-bar { width: 100%; height: 6px; background: #5a5e6a; border-radius: 3px; margin: 5px 0; overflow: hidden; }
    .disk-fill { height: 100%; background: #009688; transition: width 0.3s; }
    .control-panel { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 5px; color: white; }
    .playback-panel { position: absolute; top: 10px; left: 220px; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 5px; color: white; display: none; }
  </style>
</head>
<body>
<div id="app">
  <div id="sidebar">
    <div class="menu-item active" data-view="all">全景鸟瞰</div>
    <div class="menu-item" data-view="front">前视</div>
    <div class="menu-item" data-view="back">后视</div>
    <div class="menu-item" data-view="left">左视</div>
    <div class="menu-item" data-view="right">右视</div>
    <hr style="border-color:#5a5e6a;margin:15px 10px">
    <div class="menu-item" id="live-view">实时监控</div>
    <div class="menu-item" id="playback-view">视频回放</div>
    <hr style="border-color:#5a5e6a;margin:15px 10px">
    <div class="disk-info">
      <div>硬盘使用率</div>
      <div class="disk-bar"><div class="disk-fill" id="disk-fill" style="width: 0%"></div></div>
      <div id="disk-text">0%</div>
    </div>
    <hr style="border-color:#5a5e6a;margin:15px 10px">
    <div class="menu-item" onclick="logout()">退出登录</div>
  </div>
  <div id="main">
    <img id="video" src="/video_feed" />
    <video id="video-player" class="video-js vjs-default-skin" controls preload="auto" data-setup="{}">
      <p class="vjs-no-js">
        要查看此视频，请启用JavaScript，并考虑升级到支持HTML5视频的浏览器
        <a href="https://videojs.com.cn/html5-video-support/" target="_blank">支持HTML5视频</a>
      </p>
    </video>
    <div class="control-panel">
      <div>当前模式：<span id="mode-text">实时监控</span></div>
    </div>
    <div class="playback-panel" id="playback-panel">
      <div style="margin-bottom: 10px">
        <label>选择日期：</label>
        <input type="date" id="date-picker" style="padding: 5px; border-radius: 3px; border: 1px solid #ccc;">
        <button onclick="loadVideos()" style="padding: 5px 10px; background: #009688; color: white; border: none; border-radius: 3px; cursor: pointer;">加载</button>
      </div>
      <div>
        <label>选择视频：</label>
        <select id="video-select" style="padding: 5px; border-radius: 3px; border: 1px solid #ccc; width: 200px;">
          <option value="">请选择视频</option>
        </select>
      </div>
    </div>
  </div>
</div>

<script src="https://vjs.zencdn.net/8.23.3/video.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
  // 初始化日期选择器为当前日期
  document.getElementById('date-picker').value = new Date().toISOString().split('T')[0];
  
  // 实时监控和回放模式切换
  document.getElementById('live-view').addEventListener('click', function() {
    setMode('live');
  });
  
  document.getElementById('playback-view').addEventListener('click', function() {
    setMode('playback');
  });
  
  function setMode(mode) {
    const liveViewBtn = document.getElementById('live-view');
    const playbackViewBtn = document.getElementById('playback-view');
    const videoImg = document.getElementById('video');
    const videoPlayer = document.getElementById('video-player');
    const playbackPanel = document.getElementById('playback-panel');
    const modeText = document.getElementById('mode-text');
    
    if (mode === 'live') {
      liveViewBtn.classList.add('active');
      playbackViewBtn.classList.remove('active');
      videoImg.style.display = 'block';
      videoPlayer.style.display = 'none';
      playbackPanel.style.display = 'none';
      modeText.textContent = '实时监控';
    } else if (mode === 'playback') {
      liveViewBtn.classList.remove('active');
      playbackViewBtn.classList.add('active');
      videoImg.style.display = 'none';
      videoPlayer.style.display = 'block';
      playbackPanel.style.display = 'block';
      modeText.textContent = '视频回放';
      loadVideos(); // 加载当天视频
    }
  }
  
  // 加载指定日期的视频列表
  function loadVideos() {
    const datePicker = document.getElementById('date-picker');
    const videoSelect = document.getElementById('video-select');
    const selectedDate = datePicker.value;
    
    if (!selectedDate) {
      alert('请选择日期');
      return;
    }
    
    // 清空视频选择器
    videoSelect.innerHTML = '<option value="">请选择视频</option>';
    
    // 请求视频列表
    fetch('/api/videos')
      .then(response => response.json())
      .then(data => {
        if (data.error) {
          alert('获取视频列表失败：' + data.error);
          return;
        }
        
        // 筛选指定日期的视频
        const filteredVideos = data.videos.filter(video => video.date === selectedDate);
        
        if (filteredVideos.length === 0) {
          videoSelect.innerHTML += '<option value="">当天没有视频</option>';
          return;
        }
        
        // 添加视频选项
        filteredVideos.forEach(video => {
          const option = document.createElement('option');
          option.value = video.path;
          option.textContent = video.time + ' (' + video.size + 'MB)';
          videoSelect.appendChild(option);
        });
        
        // 监听选择变化，播放视频
        videoSelect.addEventListener('change', function() {
          const selectedPath = this.value;
          if (selectedPath) {
            playVideo(selectedPath);
          }
        });
      })
      .catch(error => {
        console.error('获取视频列表出错：', error);
        alert('获取视频列表失败');
      });
  }
  
  // 播放选定的视频
  function playVideo(videoPath) {
    const videoElement = document.getElementById('video-player');
    const player = videojs(videoElement);
    
    // 根据文件扩展名设置视频类型
    const videoType = videoPath.endsWith('.avi') ? 'video/x-msvideo' : 'video/mp4';
    
    // 设置视频源
    player.src({
      src: '/api/video/' + videoPath,
      type: videoType
    });
    
    // 播放视频
    player.play();
  }
  
  // 更新磁盘使用率信息
  function updateDiskUsage() {
    fetch('/api/disk_usage')
      .then(response => response.json())
      .then(data => {
        if (data.error) {
          console.error('获取磁盘使用率失败：', data.error);
          return;
        }
        
        const diskFill = document.getElementById('disk-fill');
        const diskText = document.getElementById('disk-text');
        const usagePercent = data.usage_percent;
        
        diskFill.style.width = usagePercent + '%';
        diskText.textContent = usagePercent + '% (' + data.used + 'GB / ' + data.total + 'GB)';
        
        // 根据使用率设置不同颜色
        if (usagePercent > 80) {
          diskFill.style.background = '#FF5722'; // 红色
        } else if (usagePercent > 60) {
          diskFill.style.background = '#FFC107'; // 黄色
        } else {
          diskFill.style.background = '#009688'; // 绿色
        }
      })
      .catch(error => {
        console.error('获取磁盘使用率出错：', error);
      });
  }
  
  // 初始化并定期更新磁盘使用率
  updateDiskUsage();
  setInterval(updateDiskUsage, 60000); // 每分钟更新一次
  
  // 退出登录
  function logout() {
    if (confirm('确定退出？')) {
      window.location.href = '/logout';
    }
  }
</script>
</body>
</html>