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

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

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

    <!-- <CollapsiblePanel title="协同信息" subtitle="「多部门联动」">
    </CollapsiblePanel> -->
    <CollaborationInfo />
  </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'
</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);
  box-sizing: border-box;

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

  &::-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>
