<template>
  <div class="meeting-container">
    <!-- 顶部导航栏 -->
    <header class="top-bar">
      <div class="logo">
        <img src="@/assets/logo/logo.png" />
        <span>信联</span>
      </div>
      <div class="title">{{ meetingTitle }}</div>
      <div class="window-controls">
        <i class="el-icon-minus" @click="minimizeWindow"></i>
        <i class="el-icon-close" @click="closeWindow"></i>
      </div>
    </header>

    <!-- 顶部状态信息条 -->
    <div class="status-bar">
      <span class="status-item">直播间口令:{{ meetingCode }}</span>
      <span class="divider">|</span>
      <span class="status-item">{{ participantCount }}人观看</span>
      <span class="divider">|</span>
      <span class="status-item">{{ timerDisplay }}</span>
      <span class="divider">|</span>
      <span class="status-item" :style="{ color: networkQuality.color }">
        <i class="el-icon-caret-top" style="transform: rotate(-90deg); margin-right: 4px;"></i>
      </span>
    </div>

    <!-- 主画面区域：左右双分屏 -->
    <main class="main-content">
      <!-- 左侧画面 -->
      <div class="video-stage left-stage" ref="videoContainerLeft">
        <!-- 采集卡/主视频画面 -->
        <video
          ref="shareVideo"
          class="share-preview"
          autoplay
          playsinline
          muted
          v-if="isSharing"
        ></video>
      </div>

      <!-- 右侧画面 -->
      <div class="video-stage right-stage" ref="videoContainerRight">
        <!-- 本地摄像头画面 -->
        <video
          ref="localVideo"
          class="local-camera"
          autoplay
          muted
          playsinline
          v-if="camOn"
        />
      </div>
    </main>

    <!-- 底部工具栏 -->
    <footer class="bottom-bar">
      <div class="tools-section">
        <div class="tool-item" @click="toggleMic">
          <div class="icon-wrapper">
            <i class="el-icon-microphone"></i>
            <span v-if="!micOn" class="slash-line"></span>
          </div>
          <span>麦克风</span>
        </div>
        <div class="tool-item" @click="toggleSpeaker">
          <div class="icon-wrapper">
            <i class="el-icon-phone-outline"></i>
            <span v-if="!speakerOn" class="slash-line"></span>
          </div>
          <span>扬声器</span>
        </div>
        <div class="tool-item" @click="toggleRecord">
          <div class="icon-wrapper">
            <i class="el-icon-video-play" :class="{ 'is-recording': isRecording }"></i>
          </div>
          <span>{{ isRecording ? "录制中" : "录制" }}</span>
        </div>
        <div class="tool-item" @click="handleMessage">
          <div class="icon-wrapper">
            <i class="el-icon-chat-line-round"></i>
          </div>
          <span>消息</span>
        </div>
        <div class="tool-item" @click="toggleShare">
          <div class="icon-wrapper">
            <i class="el-icon-share"></i>
          </div>
          <span>共享</span>
        </div>
        <div class="tool-item" @click="handleInvite">
          <div class="icon-wrapper">
            <i class="el-icon-user-solid"></i>
          </div>
          <span>邀请</span>
        </div>
        <div class="tool-item" @click="openSettingDialog">
          <div class="icon-wrapper">
            <i class="el-icon-setting"></i>
          </div>
          <span>设置</span>
        </div>
        <div class="divider-line"></div>
        <div class="tool-item end-btn" @click="endMeeting">
          <div class="icon-wrapper">
            <i class="el-icon-switch-button"></i>
          </div>
          <span>结束会议</span>
        </div>
      </div>
    </footer>

    <!-- 邀请弹窗 -->
    <CreateGroupDialog
      :visible.sync="inviteDialogVisible"
      title="通讯录邀请"
      @confirm="handleInviteConfirm"
      @close="inviteDialogVisible = false"
    />

    <!-- 设置弹窗 -->
    <el-dialog
      title="设置"
      :visible.sync="settingDialogVisible"
      width="31%"
      @open="onSettingDialogOpen"
      :show-close="false"
    >
      <el-tabs v-model="settingTab" tab-position="left">
        <el-tab-pane label="通用" name="general">
          <el-form :model="tempSetting" label-width="140px">
            <el-form-item label="会诊名称">
              <el-input
                v-model="tempSetting.meetingTitle"
                style="width: 240px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="视频" name="video">
          <el-form :model="tempSetting" label-width="140px">
            <el-form-item label="摄像头/工作站">
              <el-select v-model="tempSetting.cameraId" style="width: 100%">
                <el-option
                  v-for="item in videoDeviceList"
                  :key="item.deviceId"
                  :label="item.label"
                  :value="item.deviceId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="绿联采集卡">
              <el-select
                v-model="tempSetting.captureCard"
                style="width: 100%"
                @change="switchCaptureCard"
              >
                <el-option label="不使用采集卡" value=""></el-option>
                <el-option
                  v-for="item in videoDeviceList"
                  :key="item.deviceId"
                  :label="item.label"
                  :value="item.deviceId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="网络调控策略">
              <el-select v-model="tempSetting.netStrategy" style="width: 100%">
                <el-option label="弱网流畅优先" value="smooth"></el-option>
                <el-option label="弱网清晰优先" value="quality"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="摄像头分辨率">
              <el-select v-model="tempSetting.resolution" style="width: 100%">
                <el-option label="240P" value="240P"></el-option>
                <el-option label="480P" value="480P"></el-option>
                <el-option label="720P" value="720P"></el-option>
                <el-option label="1080P" value="1080P"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="采集卡分辨率">
              <el-select v-model="tempSetting.captureRes" style="width: 100%">
                <el-option label="1080P" value="1080P"></el-option>
                <el-option label="720P" value="720P"></el-option>
                <el-option label="480P" value="480P"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="采集卡帧率">
              <el-select v-model="tempSetting.captureFps" style="width: 100%">
                <el-option label="30" value="30"></el-option>
                <el-option label="25" value="25"></el-option>
                <el-option label="15" value="15"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="采集卡码率">
              <el-input v-model="tempSetting.captureBitrate"></el-input>
            </el-form-item>
            <el-form-item label="视频镜像">
              <el-radio-group v-model="tempSetting.videoMirror">
                <el-radio :label="true">开启</el-radio>
                <el-radio :label="false">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="音频" name="audio">
          <el-form :model="tempSetting" label-width="140px">
            <el-form-item label="麦克风">
              <el-select v-model="tempSetting.micId" style="width: 100%">
                <el-option
                  v-for="item in audioInList"
                  :key="item.deviceId"
                  :label="item.label"
                  :value="item.deviceId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="扬声器">
              <el-select v-model="tempSetting.speakerId" style="width: 100%">
                <el-option
                  v-for="item in audioOutList"
                  :key="item.deviceId"
                  :label="item.label"
                  :value="item.deviceId"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="标注" name="draw">
          <el-form :model="tempSetting" label-width="140px">
            <el-form-item label="画笔颜色">
              <el-color-picker v-model="tempSetting.brushColor" />
            </el-form-item>
            <el-form-item label="">
              <el-checkbox v-model="tempSetting.syncColor"
                >同步标记颜色</el-checkbox
              >
            </el-form-item>
            <el-form-item label="画笔类型">
              <el-radio-group v-model="tempSetting.brushType">
                <el-radio label="dashed">虚线</el-radio>
                <el-radio label="arrow">箭头</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="快捷键" name="shortcut">
          <el-form :model="tempSetting" label-width="140px">
            <el-form-item label="截图快捷键">
              <el-input v-model="tempSetting.screenshotKey"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <template slot="footer">
        <el-button @click="settingDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveSetting">保存并应用</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import CreateGroupDialog from "@/views/message/components/CreateGroupDialog";

export default {
  name: "MeetingRoom",
  components: {
    CreateGroupDialog,
  },
  data() {
    return {
      // ==================== 会议基础信息 ====================
      meetingTitle: "超声事业部的云教学",
      meetingCode: "9019100",
      participantCount: 1,
      resolution: "1080P",
      frameRate: 25,
      networkDelay: 0,
      networkQuality: { text: "良好", color: "#00e676" },

      // ==================== 计时器 ====================
      timer: 0,
      timerInterval: null,
      timerRunning: false,

      // ==================== 录制相关 ====================
      isRecording: false,
      recordedChunks: [],
      mediaRecorder: null,
      recordingStartTime: null,
      recordingTime: "00:00:00",
      recordingTimer: null,

      // ==================== 音视频设备 ====================
      inviteDialogVisible: false,
      settingDialogVisible: false,
      settingTab: "general",
      micOn: true,      // 麦克风（默认开启）
      speakerOn: true,  // 扬声器（默认开启，非静音）
      camOn: true,      // 摄像头（默认开启）
      localStream: null,

      // ==================== 屏幕共享 / 采集卡 ====================
      isSharing: true,
      shareStream: null,
      captureCheckTimer: null,

      // ==================== 设置模块 ====================
      videoDeviceList: [],
      audioInList: [],
      audioOutList: [],
      tempSetting: {},
      globalSetting: {
        meetingTitle: "超声事业部的云教学",
        cameraId: "",
        micId: "",
        speakerId: "",
        resolution: "480P",
        netStrategy: "smooth",
        brushColor: "#FF69B4",
        brushWidth: 3,
        screenshotKey: "Ctrl+1",
        captureCard: "",
        captureRes: "1080P",
        captureFps: "30",
        captureBitrate: "",
        videoMirror: false,
        brushType: "dashed",
        syncColor: true,
      },
    };
  },
  computed: {
    // 计时器格式化显示
    timerDisplay() {
      const h = Math.floor(this.timer / 3600)
        .toString()
        .padStart(2, "0");
      const m = Math.floor((this.timer % 3600) / 60)
        .toString()
        .padStart(2, "0");
      const s = (this.timer % 60).toString().padStart(2, "0");
      return `${h}:${m}:${s}`;
    },
  },
  mounted() {
    this.initPage();
    this.initSDK();
  },
  methods: {
    // ==================== 【1】初始化 ====================
    initPage() {
      this.loadLocalSetting();
      this.startTimer();
      this.openCameraAndMic(); // 进入页面自动打开摄像头和麦克风
      this.fetchMeetingInfo();
      this.startNetworkMonitoring();
      // 隐藏侧边栏、调整布局
      this.$store.dispatch("app/toggleSideBarHide", true);
      this.$store.dispatch("settings/changeSetting", {
        key: "fixedHeader",
        value: false,
      });
      this.$store.dispatch("settings/changeSetting", {
        key: "tagsView",
        value: false,
      });
    },

    // SDK 初始化加入房间
    initSDK() {
      window.hirtcwebsdk.init({
        serviceID: "90f4d5a954ab449e9b6ac92",
        serviceKey: "2c17c6393771ee3048ae30d6b380c5ec",
        cameraLayers: [
          {
            width: 320,
            height: 180,
            frameRate: 20,
            targetBw: 160000,
            layerIndex: 0,
          },
          {
            width: 640,
            height: 360,
            frameRate: 20,
            targetBw: 500000,
            layerIndex: 1,
          },
          {
            width: 1280,
            height: 720,
            frameRate: 20,
            targetBw: 1100000,
            layerIndex: 2,
          },
        ],
        leaveBeforeUnload: false,
        debug: false,
        forceArea: true,
        screenEnableAudio: true,
      });

      const roomId = "room_" + (this.meetingCode || "default");
      const uid = String(this.$store.state.user.id || Date.now());
      const uName = (this.$store.state.user.name || "用户").trim();

      window.hirtcwebsdk.join(roomId, uid, uName);
      window.hirtcwebsdk.addListener("joined", () => {
        this.$message.success("加入会议成功");
        this.updateParticipantCount();
      });
      window.hirtcwebsdk.addListener(
        "user-joined",
        this.updateParticipantCount
      );
      window.hirtcwebsdk.addListener("user-left", this.updateParticipantCount);
    },

    // ==================== 【2】设备：摄像头 + 麦克风 ====================
    // 打开摄像头+麦克风并渲染（进入页面自动执行）
    async openCameraAndMic() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true,
        });
        this.localStream = stream;
        this.$refs.localVideo.srcObject = stream;
        // 默认扬声器开启（不静音）
        this.$refs.localVideo.muted = !this.speakerOn;
      } catch (err) {
        console.error("打开设备失败", err);
        this.$message.error("请允许摄像头/麦克风权限");
      }
    },

    // 麦克风开关（控制上传的声音）
    toggleMic() {
      if (!this.localStream) return;
      this.micOn = !this.micOn;
      this.localStream
        .getAudioTracks()
        .forEach((t) => (t.enabled = this.micOn));
      this.$message[this.micOn ? "success" : "warning"](
        this.micOn ? "麦克风已打开" : "麦克风已关闭"
      );
    },

    // 扬声器开关（控制本地播放的声音，静音/取消静音）
    toggleSpeaker() {
      this.speakerOn = !this.speakerOn;
      // 控制所有视频元素的静音状态
      if (this.$refs.localVideo) {
        this.$refs.localVideo.muted = !this.speakerOn;
      }
      if (this.$refs.shareVideo) {
        this.$refs.shareVideo.muted = !this.speakerOn;
      }
      this.$message[this.speakerOn ? "success" : "warning"](
        this.speakerOn ? "扬声器已打开" : "扬声器已静音"
      );
    },

    // 摄像头开关（控制上传的视频画面）
    toggleCam() {
      if (!this.localStream) return;
      this.camOn = !this.camOn;
      this.localStream
        .getVideoTracks()
        .forEach((t) => (t.enabled = this.camOn));
      this.$message[this.camOn ? "success" : "warning"](
        this.camOn ? "摄像头已打开" : "摄像头已关闭"
      );
    },

    // ==================== 【3】采集卡设备 ====================
    async switchCaptureCard(deviceId) {
      // 清理旧采集卡流
      if (this.captureCheckTimer) clearTimeout(this.captureCheckTimer);
      this.closeCaptureCard();

      if (!deviceId) {
        this.isSharing = false;
        this.$message.success("已关闭采集卡");
        return;
      }

      this.isSharing = true;
      await this.$nextTick();

      const constraints = {
        video: {
          deviceId: { exact: deviceId },
          width: { ideal: 1920 },
          height: { ideal: 1080 },
          frameRate: { ideal: 30 },
        },
        audio: false,
      };

      let captureStream = null;
      try {
        captureStream = await navigator.mediaDevices.getUserMedia(constraints);
      } catch (err) {
        console.error("采集卡获取流失败：", err);
        const lowConstraints = {
          video: { deviceId: { exact: deviceId } },
          audio: false,
        };
        try {
          captureStream = await navigator.mediaDevices.getUserMedia(
            lowConstraints
          );
        } catch (e2) {
          this.$message.error(
            "无法打开采集卡，请检查USB口、权限、是否被其他软件占用"
          );
          this.isSharing = false;
          return;
        }
      }

      const videoEl = this.$refs.shareVideo;
      videoEl.srcObject = captureStream;
      videoEl.muted = true;
      videoEl.playsinline = true;
      videoEl.autoplay = true;

      let hasValidFrame = false;
      videoEl.onloadeddata = () => (hasValidFrame = true);

      // 3秒超时无信号判定失败
      this.captureCheckTimer = setTimeout(() => {
        if (!hasValidFrame) {
          this.$message.error("采集卡无信号，请检查设备、HDMI线、USB3.0接口");
          this.closeCaptureCard();
          this.isSharing = false;
        }
      }, 3000);

      // 监听采集卡断开
      const videoTrack = captureStream.getVideoTracks()[0];
      if (videoTrack)
        videoTrack.onended = () => {
          this.$message.warning("采集卡信号已断开");
          this.closeCaptureCard();
          this.isSharing = false;
        };
    },

    // 关闭采集卡并释放资源
    closeCaptureCard() {
      try {
        if (this.captureCheckTimer) clearTimeout(this.captureCheckTimer);
        const videoEl = this.$refs.shareVideo;
        if (!videoEl) return;
        const stream = videoEl.srcObject;
        if (stream)
          stream.getTracks().forEach((t) => {
            t.stop();
            t.onended = null;
          });
        videoEl.srcObject = null;
        videoEl.onloadeddata = null;
      } catch (e) {
        console.log("关闭采集卡异常：", e);
      }
    },

    // ==================== 【4】屏幕共享 ====================
    async toggleShare() {
      if (this.isSharing) {
        this.stopShare();
        return;
      }
      try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
          video: { width: 1920, height: 1080, frameRate: 15 },
          audio: false,
        });
        const track = stream.getVideoTracks()[0];
        track.onended = () => this.stopShare();
        this.shareStream = stream;
        this.$refs.shareVideo.srcObject = stream;
        this.isSharing = true;
        this.$message.success("开始共享");
        window.hirtcwebsdk?.publishScreen(stream);
      } catch (e) {
        this.$message.error("共享失败");
      }
    },

    // 停止共享
    stopShare() {
      if (this.shareStream)
        this.shareStream.getTracks().forEach((t) => {
          t.stop();
          t.onended = null;
        });
      this.shareStream = null;
      this.isSharing = false;
      this.$refs.shareVideo.srcObject = null;
      this.$message.info("已停止共享");
      window.hirtcwebsdk?.unPublishScreen();
    },

    // ==================== 【5】录制 ====================
    async toggleRecord() {
      this.isRecording ? this.stopRecording() : await this.startRecording();
    },

    // 开始录制
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
          video: true,
          audio: true,
        });
        this.mediaRecorder = new MediaRecorder(stream, {
          mimeType: "video/webm;codecs=vp8,opus",
        });
        this.recordedChunks = [];
        this.mediaRecorder.ondataavailable = (e) =>
          e.data.size && this.recordedChunks.push(e.data);
        this.mediaRecorder.onstop = () => {
          const blob = new Blob(this.recordedChunks, { type: "video/webm" });
          const url = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = url;
          a.download = `${
            this.meetingTitle
          }录制_${new Date().toLocaleString()}.webm`;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          URL.revokeObjectURL(url);
          this.$message.success("录制完成");
        };
        this.mediaRecorder.start();
        this.isRecording = true;
        this.recordingStartTime = new Date();
        this.startRecordingTimer();
        this.$message.warning("录制中");
      } catch (e) {
        this.$message.error("录制失败");
      }
    },

    // 停止录制
    stopRecording() {
      if (this.mediaRecorder && this.isRecording) {
        this.mediaRecorder.stop();
        this.mediaRecorder.stream.getTracks().forEach((t) => t.stop());
        this.isRecording = false;
        this.stopRecordingTimer();
      }
    },

    // 录制计时
    startRecordingTimer() {
      this.recordingTimer = setInterval(() => {
        const sec = Math.floor((new Date() - this.recordingStartTime) / 1000);
        const h = String(Math.floor(sec / 3600)).padStart(2, "0");
        const m = String(Math.floor((sec % 3600) / 60)).padStart(2, "0");
        const s = String(sec % 60).padStart(2, "0");
        this.recordingTime = `${h}:${m}:${s}`;
      }, 1000);
    },

    // 停止录制计时
    stopRecordingTimer() {
      clearInterval(this.recordingTimer);
      this.recordingTime = "00:00:00";
    },

    // ==================== 【6】计时器 ====================
    toggleTimer() {
      this.timerRunning ? this.pauseTimer() : this.startTimer();
    },
    startTimer() {
      if (this.timerInterval) return;
      this.timerRunning = true;
      this.timerInterval = setInterval(() => this.timer++, 1000);
    },
    pauseTimer() {
      clearInterval(this.timerInterval);
      this.timerInterval = null;
      this.timerRunning = false;
    },

    // ==================== 【7】网络状态监控 ====================
    startNetworkMonitoring() {
      setInterval(() => {
        if (!window.hirtcwebsdk) return;
        const s = window.hirtcwebsdk.getNetworkStats();
        if (s?.rtt) {
          this.networkDelay = Math.round(s.rtt);
          if (this.networkDelay < 100)
            this.networkQuality = { text: "优秀", color: "#00e676" };
          else if (this.networkDelay < 300)
            this.networkQuality = { text: "良好", color: "#00e676" };
          else if (this.networkDelay < 600)
            this.networkQuality = { text: "一般", color: "#ffc107" };
          else this.networkQuality = { text: "差", color: "#f56c6c" };
        }
      }, 2000);
    },

    // ==================== 【8】设置模块 ====================
    openSettingDialog() {
      this.settingDialogVisible = true;
    },
    async onSettingDialogOpen() {
      this.tempSetting = { ...this.globalSetting };
      await this.enumerateDevices();
    },

    // 枚举音视频设备
    async enumerateDevices() {
      try {
        await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        const devices = await navigator.mediaDevices.enumerateDevices();
        this.videoDeviceList = devices.filter((d) => d.kind === "videoinput");
        this.audioInList = devices.filter((d) => d.kind === "audioinput");
        this.audioOutList = devices.filter((d) => d.kind === "audiooutput");
      } catch (e) {
        this.$message.warning("请允许音视频权限以查看设备");
      }
    },

    // 保存设置
    saveSetting() {
      this.globalSetting = { ...this.tempSetting };
      this.meetingTitle = this.globalSetting.meetingTitle;
      this.resolution = this.globalSetting.resolution;
      localStorage.setItem(
        "meetingGlobalSetting",
        JSON.stringify(this.globalSetting)
      );
      this.settingDialogVisible = false;
      this.$message.success("设置已保存");
    },

    // 加载本地缓存设置
    loadLocalSetting() {
      const cache = localStorage.getItem("meetingGlobalSetting");
      if (cache) {
        this.globalSetting = JSON.parse(cache);
        this.meetingTitle = this.globalSetting.meetingTitle;
        this.resolution = this.globalSetting.resolution;
      }
    },

    // ==================== 【9】会议成员、邀请、消息 ====================
    handleInvite() {
      this.inviteDialogVisible = true;
    },
    handleInviteConfirm(selectedContacts) {
      console.log('邀请的联系人:', selectedContacts);
      this.$message.success(`已邀请 ${selectedContacts.length} 位联系人`);
      this.inviteDialogVisible = false;
    },
    handleMessage() {
      this.$message.info("消息功能待开发");
    },
    fetchMeetingInfo() {
      const q = this.$route.query;
      if (q.title) this.meetingTitle = q.title;
      if (q.code) this.meetingCode = q.code;
      if (q.resolution) this.resolution = q.resolution;
      if (q.frameRate) this.frameRate = q.frameRate;
    },
    updateParticipantCount() {
      if (window.hirtcwebsdk) {
        const us = window.hirtcwebsdk.getUsers();
        this.participantCount = us ? us.length : 1;
      }
    },

    // ==================== 【10】窗口与会议控制 ====================
    minimizeWindow() {
      this.$router.push("/video/index");
    },
    closeWindow() {
      this.$confirm("确定退出会诊?", "提示", { type: "warning" }).then(() => {
        this.$store.dispatch("app/toggleSideBarHide", false);
        this.$store.dispatch("settings/changeSetting", {
          key: "fixedHeader",
          value: true,
        });
        this.$store.dispatch("settings/changeSetting", {
          key: "tagsView",
          value: true,
        });
        this.$router.push("/");
      });
    },
    endMeeting() {
      this.$confirm("确定结束会议?", "提示", { type: "warning" }).then(() => {
        this.stopShare();
        this.localStream?.getTracks().forEach((t) => t.stop());
        this.$store.dispatch("app/toggleSideBarHide", false);
        this.$store.dispatch("settings/changeSetting", {
          key: "fixedHeader",
          value: true,
        });
        this.$store.dispatch("settings/changeSetting", {
          key: "tagsView",
          value: true,
        });
        window.name === "consultationWindow"
          ? window.close()
          : this.$router.push("/");
      });
    },
  },
  beforeDestroy() {
    // 页面销毁清理所有资源
    clearInterval(this.timerInterval);
    this.stopRecording();
    this.stopShare();
    this.closeCaptureCard();
    this.localStream?.getTracks().forEach((t) => t.stop());
  },
};
</script>

<style lang="scss">
.meeting-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #004d40;
  color: #ffffff;
}

.top-bar {
  height: 40px;
  background: linear-gradient(180deg, #00695c 0%, #004d40 100%);
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: space-between;
  border-bottom: 1px solid #00796b;

  .logo {
    display: flex;
    align-items: center;
    font-weight: 600;

    img {
      width: 30px;
      margin-right: 5px;
    }
  }

  .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: #b2dfdb;
  }

  .window-controls {
    display: flex;
    align-items: center;

    i {
      margin-left: 10px;
      cursor: pointer;
      font-size: 13px;
      color: #b2dfdb;
    }
  }
}

.status-bar {
  height: 40px;
  background-color: #004d40;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #b2dfdb;

  .status-item {
    font-family: Consolas, monospace;
  }

  .divider {
    margin: 0 6px;
    color: #00796b;
  }
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.video-stage {
  flex: 1;
  background-color: #000;
  position: relative;

  &.left-stage {
    border-right: 2px solid #00796b;
  }

  .share-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5;
  }

  .local-camera {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5;
  }
}

.bottom-bar {
  height: 90px;
  background: linear-gradient(180deg, #004d40 0%, #00695c 100%);
  border-top: 1px solid #00796b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;

  .tools-section {
    display: flex;
    justify-content: center;
    gap: 18px;
    align-items: center;

    .tool-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
      cursor: pointer;
      font-size: 11px;
      width: 60px;
      padding: 8px 4px;
      border-radius: 4px;
      position: relative;
      transition: background-color 0.2s ease;

      .icon-wrapper {
        position: relative;
      }

      i {
        font-size: 22px;
        margin-bottom: 3px;
      }

      &:hover {
        background-color: #00897b;
      }

      &.active {
        background-color: #00897b;
      }

      .slash-line {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 22px;
        height: 22px;
        border-top: 2px solid #f44336;
        transform: rotate(45deg);
        transform-origin: left top;
        pointer-events: none;
      }
    }

    .divider-line {
      width: 1px;
      height: 30px;
      background-color: #00796b;
      margin: 0 4px;
    }

    .end-btn {
      color: #ff5252;

      &:hover {
        background-color: rgba(255, 82, 82, 0.2);
      }
    }
  }
}

.is-recording {
  color: #ef5350;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>