<template>
  <div class="min-h-screen bg-base-100">
    <div class="container mx-auto p-6 space-y-6">
      <!-- 控制面板 -->
      <div class="card bg-base-200 shadow-xl">
        <div class="card-body">
          <h2 class="card-title text-primary">
            <svg
              class="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"
              />
            </svg>
            控制面板
          </h2>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- 服务状态 -->
            <div class="stats shadow">
              <div class="stat">
                <div class="stat-figure text-primary">
                  <div
                    class="badge"
                    :class="
                      statusInfo.isRunning ? 'badge-success' : 'badge-error'
                    "
                  >
                    {{ statusInfo.isRunning ? "运行中" : "已停止" }}
                  </div>
                </div>
                <div class="stat-title">服务状态</div>
                <div class="stat-value text-primary">HTTP</div>
                <div class="stat-desc">端口: {{ statusInfo.serverPort }}</div>
              </div>
            </div>

            <!-- 流信息 -->
            <div class="stats shadow">
              <div class="stat">
                <div class="stat-figure text-secondary">
                  <svg
                    class="w-8 h-8"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
                    />
                  </svg>
                </div>
                <div class="stat-title">视频规格</div>
                <div class="stat-value text-secondary">
                  {{ streamInfo.frameWidth }}×{{ streamInfo.frameHeight }}
                </div>
                <div class="stat-desc">{{ streamInfo.frameRate }} FPS</div>
              </div>
            </div>

            <!-- 连接数 -->
            <div class="stats shadow">
              <div class="stat">
                <div class="stat-figure text-accent">
                  <svg
                    class="w-8 h-8"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
                    />
                  </svg>
                </div>
                <div class="stat-title">连接数</div>
                <div class="stat-value text-accent">
                  {{ statusInfo.connectedClients }}
                </div>
                <div class="stat-desc">
                  <div class="dropdown dropdown-hover">
                    <div
                      tabindex="0"
                      role="button"
                      class="text-xs underline cursor-help"
                    >
                      查看客户端
                    </div>
                    <ul
                      tabindex="0"
                      class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
                    >
                      <li
                        v-for="(client, index) in statusInfo.clientEndpoints"
                        :key="index"
                        class="text-xs"
                      >
                        <a>{{ client }}</a>
                      </li>
                      <li
                        v-if="
                          !statusInfo.clientEndpoints ||
                          statusInfo.clientEndpoints.length === 0
                        "
                      >
                        <a class="text-xs opacity-50">无活跃连接</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 摄像头配置 -->
          <div class="card bg-base-100 shadow-sm mt-4">
            <div class="card-body">
              <h3 class="card-title text-sm text-info">
                <svg
                  class="w-5 h-5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                  />
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                  />
                </svg>
                摄像头配置
              </h3>
              <div class="flex flex-row justify-between items-center gap-4">
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">IP地址</span>
                  </label>
                  <input
                    type="text"
                    v-model="cameraConfig.address"
                    placeholder="例如: 192.168.1.100"
                    class="input input-bordered input-sm"
                  />
                </div>
                <div class="form-control">
                  <label class="label">
                    <span class="label-text">端口号</span>
                  </label>
                  <input
                    type="number"
                    v-model="cameraConfig.port"
                    placeholder="例如: 8080"
                    class="input input-bordered input-sm"
                  />
                </div>
                <button
                  class="btn btn-primary btn-sm"
                  @click="confirmCameraConfig"
                  :disabled="configuring"
                >
                  <svg
                    v-if="configuring"
                    class="animate-spin h-4 w-4 mr-1"
                    fill="none"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      class="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      stroke-width="4"
                    ></circle>
                    <path
                      class="opacity-75"
                      fill="currentColor"
                      d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                  </svg>
                  <svg
                    v-else
                    class="w-4 h-4 mr-1"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                  {{ configuring ? "配置中..." : "确认" }}
                </button>
              </div>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="card-actions justify-end mt-4">
            <button
              class="btn btn-outline btn-primary"
              @click="refreshStatus"
              :disabled="loading"
            >
              <svg
                v-if="loading"
                class="animate-spin h-4 w-4 mr-2"
                fill="none"
                viewBox="0 0 24 24"
              >
                <circle
                  class="opacity-25"
                  cx="12"
                  cy="12"
                  r="10"
                  stroke="currentColor"
                  stroke-width="4"
                ></circle>
                <path
                  class="opacity-75"
                  fill="currentColor"
                  d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                ></path>
              </svg>
              {{ loading ? "刷新中..." : "刷新状态" }}
            </button>
            <button
              class="btn btn-primary"
              @click="testConnection"
              :disabled="testing"
            >
              <svg
                v-if="testing"
                class="animate-spin h-4 w-4 mr-2"
                fill="none"
                viewBox="0 0 24 24"
              >
                <circle
                  class="opacity-25"
                  cx="12"
                  cy="12"
                  r="10"
                  stroke="currentColor"
                  stroke-width="4"
                ></circle>
                <path
                  class="opacity-75"
                  fill="currentColor"
                  d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                ></path>
              </svg>
              {{ testing ? "测试中..." : "测试连接" }}
            </button>
          </div>
        </div>
      </div>

      <!-- 视频预览区域 -->
      <div class="card bg-base-200 shadow-xl">
        <div class="card-body">
          <h2 class="card-title text-primary">
            <svg
              class="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
              />
            </svg>
            视频预览
          </h2>

          <div
            class="relative bg-black rounded-lg overflow-hidden"
            style="aspect-ratio: 4/3"
          >
            <!-- 视频播放器 - 使用img标签直接显示MJPEG流 -->
            <div
              v-show="isPlaying"
              class="w-full h-full flex items-center justify-center"
            >
              <img
                :src="currentVideoSource"
                alt="视频流"
                class="max-w-full max-h-full object-contain"
                @error="handleVideoError"
                @load="handleVideoLoad"
              />
            </div>

            <!-- 错误信息显示 -->
            <div
              v-if="hasVideoError"
              class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70"
            >
              <div class="card bg-error text-white shadow-lg w-full max-w-lg">
                <div class="card-body">
                  <h3 class="card-title flex items-center gap-2">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-6 w-6"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                      />
                    </svg>
                    视频流加载失败
                  </h3>
                  <p>无法连接到视频服务器，请检查以下内容：</p>
                  <ul class="list-disc list-inside">
                    <li>视频流服务是否已启动</li>
                    <li>网络连接是否正常</li>
                    <li>端口 {{ statusInfo.serverPort }} 是否可访问</li>
                  </ul>
                  <div class="card-actions justify-end mt-2">
                    <button
                      class="btn btn-sm btn-outline btn-primary"
                      @click="tryReconnect"
                    >
                      重试连接
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 占位符 -->
            <div
              v-show="!isPlaying && !hasVideoError"
              class="absolute inset-0 flex items-center justify-center text-white"
            >
              <div class="text-center">
                <svg
                  class="w-16 h-16 mx-auto mb-4 opacity-50"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
                  />
                </svg>
                <p class="text-lg opacity-75">{{ videoStatus }}</p>
                <p class="text-sm opacity-60 mt-2">
                  点击"播放视频流"按钮开始查看实时视频
                </p>
              </div>
            </div>
          </div>

          <!-- 视频控制 -->
          <div class="flex justify-between items-center mt-4">
            <div class="text-sm text-base-content/70">
              流地址:
              <code class="bg-base-300 px-2 py-1 rounded">{{
                streamInfo.mjpegUrl
              }}</code>
            </div>
            <div class="space-x-2">
              <div class="dropdown dropdown-hover dropdown-top dropdown-end">
                <div
                  tabindex="0"
                  role="button"
                  class="btn btn-sm btn-outline btn-accent"
                >
                  <svg
                    class="w-4 h-4 mr-1"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                    />
                  </svg>
                  更多功能
                </div>
                <ul
                  tabindex="0"
                  class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52"
                >
                  <li>
                    <a @click="openInNewTab(streamInfo.htmlUrl)"
                      >在新标签打开视频页面</a
                    >
                  </li>
                  <li><a @click="takeSnapshot">获取并下载快照</a></li>
                  <li>
                    <a @click="copyToClipboard(streamInfo.mjpegUrl)"
                      >复制MJPEG地址</a
                    >
                  </li>
                </ul>
              </div>
              <button
                class="btn btn-success btn-sm"
                @click="startStream"
                :disabled="isPlaying"
              >
                <svg
                  class="w-4 h-4 mr-1"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
                  />
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
                播放视频流
              </button>
              <button
                class="btn btn-error btn-sm"
                @click="stopStream"
                :disabled="!isPlaying"
              >
                <svg
                  class="w-4 h-4 mr-1"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"
                  />
                </svg>
                停止视频流
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 日志区域 -->
      <div class="card bg-base-200 shadow-xl">
        <div class="card-body">
          <h2 class="card-title text-primary">
            <svg
              class="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
              />
            </svg>
            操作日志
          </h2>

          <div class="bg-base-300 rounded-lg p-4 h-48 overflow-y-auto">
            <div
              v-for="(log, index) in logs"
              :key="index"
              class="text-sm font-mono mb-1"
            >
              <span class="text-base-content/50"
                >[{{ formatTime(log.time) }}]</span
              >
              <span :class="getLogClass(log.level)">{{ log.message }}</span>
            </div>
            <div
              v-if="logs.length === 0"
              class="text-base-content/50 text-center py-8"
            >
              暂无日志记录
            </div>
          </div>

          <div class="card-actions justify-end mt-2">
            <button class="btn btn-outline btn-sm" @click="clearLogs">
              清空日志
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { VideoStreamClient, CameraConfigRequest } from "@/APIClient";

// 状态管理
const loading = ref(false);
const testing = ref(false);
const configuring = ref(false);
const testingCamera = ref(false);
const isPlaying = ref(false);
const hasVideoError = ref(false);
const videoStatus = ref('点击"播放视频流"按钮开始查看实时视频');

// 数据
const statusInfo = ref({
  isRunning: false,
  serverPort: 8080,
  streamUrl: "",
  mjpegUrl: "",
  snapshotUrl: "",
  connectedClients: 0,
  clientEndpoints: [] as string[],
});

const streamInfo = ref({
  frameRate: 30,
  frameWidth: 640,
  frameHeight: 480,
  format: "MJPEG",
  htmlUrl: "",
  mjpegUrl: "",
  snapshotUrl: "",
});

// 摄像头配置
const cameraConfig = ref({
  address: "192.168.1.100",
  port: 8080,
});

const currentVideoSource = ref("");
const logs = ref<Array<{ time: Date; level: string; message: string }>>([]);

// API 客户端
const videoClient = new VideoStreamClient();

// 添加日志
const addLog = (level: string, message: string) => {
  logs.value.push({
    time: new Date(),
    level,
    message,
  });
  // 限制日志数量
  if (logs.value.length > 100) {
    logs.value.shift();
  }
};

// 加载摄像头配置
const loadCameraConfig = async () => {
  try {
    addLog("info", "正在加载摄像头配置...");

    const config = await videoClient.getCameraConfig();
    if (config && config.address && config.port) {
      cameraConfig.value.address = config.address;
      cameraConfig.value.port = config.port;
      addLog("success", `摄像头配置加载成功: ${config.address}:${config.port}`);
    } else {
      addLog("warning", "未找到保存的摄像头配置，使用默认值");
    }
  } catch (error) {
    addLog("error", `加载摄像头配置失败: ${error}`);
    console.error("加载摄像头配置失败:", error);
  }
};

// 确认摄像头配置
const confirmCameraConfig = async () => {
  if (!cameraConfig.value.address || !cameraConfig.value.port) {
    addLog("error", "请填写完整的摄像头IP地址和端口号");
    return;
  }

  configuring.value = true;
  try {
    addLog(
      "info",
      `正在配置摄像头: ${cameraConfig.value.address}:${cameraConfig.value.port}`,
    );

    const result = await videoClient.configureCamera(
      CameraConfigRequest.fromJS(cameraConfig.value),
    );

    if (result) {
      addLog("success", "摄像头配置保存成功");
      // 配置成功后刷新状态
      await refreshStatus();
    } else {
      addLog("error", "摄像头配置保存失败");
    }
  } catch (error) {
    addLog("error", `配置摄像头失败: ${error}`);
    console.error("配置摄像头失败:", error);
  } finally {
    configuring.value = false;
  }
};

// 测试摄像头连接
const testCameraConnection = async () => {
  if (!cameraConfig.value.address || !cameraConfig.value.port) {
    addLog("error", "请先配置摄像头IP地址和端口号");
    return;
  }

  testingCamera.value = true;
  try {
    addLog(
      "info",
      `正在测试摄像头连接: ${cameraConfig.value.address}:${cameraConfig.value.port}`,
    );

    const result = await videoClient.testCameraConnection();

    if (result && result.success) {
      addLog("success", "摄像头连接测试成功");
    } else {
      addLog("error", `摄像头连接测试失败: ${result?.message || "未知错误"}`);
    }
  } catch (error) {
    addLog("error", `摄像头连接测试失败: ${error}`);
    console.error("摄像头连接测试失败:", error);
  } finally {
    testingCamera.value = false;
  }
};

// 格式化时间
const formatTime = (time: Date) => {
  return time.toLocaleTimeString();
};

// 获取日志样式
const getLogClass = (level: string) => {
  switch (level) {
    case "error":
      return "text-error";
    case "warning":
      return "text-warning";
    case "success":
      return "text-success";
    default:
      return "text-base-content";
  }
};

// 清空日志
const clearLogs = () => {
  logs.value = [];
  addLog("info", "日志已清空");
};

// 复制到剪贴板
const copyToClipboard = (text: string) => {
  navigator.clipboard
    .writeText(text)
    .then(() => {
      addLog("success", "已复制到剪贴板");
    })
    .catch((err) => {
      addLog("error", `复制失败: ${err}`);
    });
};

// 在新标签中打开视频页面
const openInNewTab = (url: string) => {
  window.open(url, "_blank");
  addLog("info", `已在新标签打开视频页面: ${url}`);
};

// 获取并下载快照
const takeSnapshot = async () => {
  try {
    addLog("info", "正在获取快照...");

    // 使用当前的快照URL
    const snapshotUrl = streamInfo.value.snapshotUrl;
    if (!snapshotUrl) {
      addLog("error", "快照URL不可用");
      return;
    }

    // 添加时间戳防止缓存
    const urlWithTimestamp = `${snapshotUrl}?t=${new Date().getTime()}`;

    // 创建一个临时链接下载图片
    const a = document.createElement("a");
    a.href = urlWithTimestamp;
    a.download = `fpga-snapshot-${new Date().toISOString().replace(/:/g, "-")}.jpg`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

    addLog("success", "快照已下载");
  } catch (error) {
    addLog("error", `获取快照失败: ${error}`);
    console.error("获取快照失败:", error);
  }
};

// 刷新状态
const refreshStatus = async () => {
  loading.value = true;
  try {
    addLog("info", "正在获取服务状态...");

    // 使用新的API方法名称
    const status = await videoClient.getStatus();
    statusInfo.value = status;

    const info = await videoClient.getStreamInfo();
    streamInfo.value = info;

    addLog("success", "服务状态获取成功");
  } catch (error) {
    addLog("error", `获取状态失败: ${error}`);
    console.error("获取状态失败:", error);
  } finally {
    loading.value = false;
  }
};

// 测试连接
const testConnection = async () => {
  testing.value = true;
  try {
    addLog("info", "正在测试视频流连接...");

    const result = await videoClient.testConnection();

    if (result) {
      addLog("success", "视频流连接测试成功");
    } else {
      addLog("error", "视频流连接测试失败");
    }
  } catch (error) {
    addLog("error", `连接测试失败: ${error}`);
    console.error("连接测试失败:", error);
  } finally {
    testing.value = false;
  }
};

// 视频错误处理
const handleVideoError = () => {
  if (isPlaying.value) {
    hasVideoError.value = true;
    addLog("error", "视频流加载失败");
  }
};

// 视频加载成功处理
const handleVideoLoad = () => {
  hasVideoError.value = false;
  addLog("success", "视频流加载成功");
};

// 尝试重新连接
const tryReconnect = () => {
  addLog("info", "尝试重新连接视频流...");
  hasVideoError.value = false;

  // 重新设置视频源，添加时间戳避免缓存问题
  currentVideoSource.value = `${streamInfo.value.mjpegUrl}?t=${new Date().getTime()}`;
};

// 启动视频流
const startStream = async () => {
  try {
    addLog("info", "正在启动视频流...");
    videoStatus.value = "正在连接视频流...";

    // 刷新状态
    await refreshStatus();

    // 设置视频源
    currentVideoSource.value = streamInfo.value.mjpegUrl;

    // 设置播放状态
    isPlaying.value = true;
    hasVideoError.value = false;

    addLog("success", "视频流已启动");
  } catch (error) {
    addLog("error", `启动视频流失败: ${error}`);
    videoStatus.value = "启动视频流失败";
    console.error("启动视频流失败:", error);
  }
};

// 停止视频流
const stopStream = () => {
  try {
    addLog("info", "正在停止视频流...");

    // 清除视频源
    currentVideoSource.value = "";

    // 更新状态
    isPlaying.value = false;
    hasVideoError.value = false;
    videoStatus.value = '点击"播放视频流"按钮开始查看实时视频';

    addLog("success", "视频流已停止");
  } catch (error) {
    addLog("error", `停止视频流失败: ${error}`);
    console.error("停止视频流失败:", error);
  }
};

// 生命周期
onMounted(async () => {
  addLog("info", "HTTP 视频流页面已加载");
  await loadCameraConfig();
  await refreshStatus();
});

onUnmounted(() => {
  stopStream();
});
</script>

<style scoped>
/* 自定义样式 */
.stats {
  background-color: var(--b1);
  color: var(--bc); /* 添加适配文本颜色 */
}

code {
  font-size: 0.75rem;
}

img {
  /* 确保视频流居中显示 */
  margin: 0 auto;
}

* {
  transition: all 500ms ease-in-out;
}
</style>
