<template>
  <div class="right-panel">
    <div class="right-panel__content">
      <CollapsiblePanel
        title="快速处置"
        subtitle="「调度指挥」"
        @title-click="handleQuickDisposalClick"
      >
        <DispatchCommand />
      </CollapsiblePanel>

      <!-- <CollapsiblePanel title="现场监控" subtitle="「实时视频」">
    </CollapsiblePanel> -->
      <VideoMonitorGrid />

      <!-- 如需启用调度建议面板，可取消下面注释 -->
      <!--
    <CollapsiblePanel title="调度建议" subtitle="「智能推荐」">
      <DispatchSuggestion />
    </CollapsiblePanel>
    -->

      <!-- <CollapsiblePanel title="协同信息" subtitle="「多部门联动」">
    </CollapsiblePanel> -->
      <CollaborationInfo />
    </div>
  </div>
</template>

<script setup>
import CollapsiblePanel from "../shared/CollapsiblePanel.vue";
import DispatchCommand from "./DispatchCommand.vue";
import VideoMonitorGrid from "./VideoMonitorGrid.vue";
// import DispatchSuggestion from './DispatchSuggestion.vue'
import CollaborationInfo from "./CollaborationInfo.vue";

const emit = defineEmits(["quick-disposal-click"]);

const handleQuickDisposalClick = () => {
  emit("quick-disposal-click");
};
</script>

<style scoped lang="scss">
@use "@/styles/mixins.scss" as *;
@use "../../assets/styles/common.scss" as *;

.right-panel {
  // width: vw(486);
  height: 100%;
  background: url("../../assets/images/框架右边.png") no-repeat;
  background-size: 100% 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: vw(40); // 为右侧折叠按钮预留空间
  padding-top: var(--sa-header-height);
  padding-left: 10px;
  box-sizing: border-box;
  // &__content {
  //   &:hover {
  //     cursor: pointer;
  //     // border: 2px solid rgba(255, 80, 80, 0.8);
  //     animation: glowPulse 1.6s ease-in-out infinite;

  //     box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5),
  //       0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8),
  //       inset 0 0 35px rgba(255, 30, 30, 0.55),
  //       inset 0 0 55px rgba(255, 0, 0, 0.4);
  //   }

  //   /* 闪动动画 */
  //   @keyframes glowPulse {
  //     0% {
  //       box-shadow: 0 0 12px rgba(255, 80, 80, 0.8),
  //         0 0 25px rgba(255, 0, 0, 0.5), 0 0 45px rgba(255, 0, 0, 0.35),
  //         inset 0 0 18px rgba(255, 80, 80, 0.8),
  //         inset 0 0 35px rgba(255, 30, 30, 0.55),
  //         inset 0 0 55px rgba(255, 0, 0, 0.4);
  //     }

  //     50% {
  //       box-shadow: 0 0 18px rgba(255, 120, 120, 1),
  //         0 0 35px rgba(255, 40, 40, 0.7), 0 0 65px rgba(255, 0, 0, 0.45),
  //         inset 0 0 25px rgba(255, 80, 80, 1),
  //         inset 0 0 45px rgba(255, 40, 40, 0.7),
  //         inset 0 0 75px rgba(255, 0, 0, 0.5);
  //     }

  //     100% {
  //       box-shadow: 0 0 12px rgba(255, 80, 80, 0.8),
  //         0 0 25px rgba(255, 0, 0, 0.5), 0 0 45px rgba(255, 0, 0, 0.35),
  //         inset 0 0 18px rgba(255, 80, 80, 0.8),
  //         inset 0 0 35px rgba(255, 30, 30, 0.55),
  //         inset 0 0 55px rgba(255, 0, 0, 0.4);
  //     }
  //   }
  // }

  &::-webkit-scrollbar {
    width: vw(0);
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: vw(3);

    &:hover {
      background: rgba(28, 161, 255, 0.6);
    }
  }
}
</style>
