<template>
  <div class="cockpit-layout">
    <!-- <PageHeader /> -->
    <div class="cockpit-main">
      <div class="left-panel">
        <WeatherWarning />
        <EmergencyResources />
      </div>

      <div class="center-panel">
        <MapCenter />
        <LegendToolbar style="position: absolute; bottom: 10px; right: 50%; transform: translateX(50%);"/>
      </div>

      <div class="right-panel">
        <BlockEvent />
        <YearStatistics />
      </div>
    </div>
  </div>
</template>

<script setup>
import PageHeader from './PageHeader.vue'
import WeatherWarning from './WeatherWarning.vue'
import EmergencyResources from './EmergencyResources.vue'
import MapCenter from './MapCenter.vue'
import BlockEvent from './BlockEvent.vue'
import YearStatistics from './YearStatistics.vue'
import LegendToolbar from './LegendToolbar.vue'
</script>

<style scoped lang="scss">
/**
 * 驾驶舱布局 - 可嵌入组件
 *
 * 此组件设计为可嵌入到其他系统中（iframe/组件）。
 * 使用百分比和 rem 单位而非 vw/vh，以适应父容器尺寸。
 *
 * CSS 自定义属性（可被父级覆盖）：
 * - --cockpit-side-width: 侧边栏宽度（默认：minmax(15rem, 28%)）
 * - --cockpit-gap: 网格间距和面板间距（默认：1.25rem）
 * - --cockpit-padding-x: 水平内边距（默认：0.625rem）
 * - --cockpit-padding-top: 顶部内边距（默认：0）
 * - --cockpit-padding-bottom: 底部内边距（默认：0）
 * - --cockpit-min-height: 最小高度（默认：600px）
 *
 * 父级使用方式：<CockpitLayout style="--cockpit-gap: 2rem" />
 * 窄容器嵌入（<1100px 宽度）时，添加 .is-compact 修饰符类：
 *   <CockpitLayout class="is-compact" />
 * 如需在滚动父容器中嵌入，可覆盖 overflow: hidden
 *
 * 浏览器兼容性：需要 CSS 自定义属性支持（Chrome 49+, Safari 9.1+, Firefox 31+）
 * 未来计划：支持容器查询以实现响应式窄屏布局
 *
 * 基于 1920px 设计稿，根字体大小 16px
 */
.cockpit-layout {
  /* 容器查询设置，用于嵌入场景的自适应缩放 */
  container-name: cockpit-layout;
  container-type: size;

  /* 为旧版浏览器提供视口单位回退 */
  --cq-inline-100: 100vw;
  --cq-block-100: 100vh;

  /* 当支持容器单位时覆盖为容器单位 */
  @supports (width: 1cqw) {
    --cq-inline-100: 100cqw;
  }
  @supports (height: 1cqh) {
    --cq-block-100: 100cqh;
  }

  /* 嵌入场景的 CSS 自定义属性 */
  --cockpit-side-width: minmax(15rem, 28%);
  --cockpit-gap: 1rem;
  --cockpit-padding-x: 0.625rem;
  --cockpit-padding-top: 0;
  --cockpit-padding-bottom: 0;
  --cockpit-min-height: 600px;

  /* 使用 100% 填充父容器而非视口 */
  width: 100%;
  height: 100%;
  min-height: var(--cockpit-min-height);
  min-width: 0; /* 允许 flex 子元素收缩 */

  background: url(../assets/img/cockpit-main-bg.png) no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  overflow: auto; /* 当宿主高度 < 最小高度时允许滚动 */
}

/* 窄容器嵌入的紧凑布局（<1100px 宽度）*/
.cockpit-layout.is-compact {
  --cockpit-side-width: minmax(12rem, 24%);
  --cockpit-gap: 1rem;
}

.cockpit-main {
  flex: 1;
  min-height: 0; /* 允许网格在 flex 上下文中收缩 */
  display: grid;
  grid-template-columns: var(--cockpit-side-width) 1fr var(--cockpit-side-width);
  grid-auto-rows: 1fr; /* 强制行占据可用高度 */
  gap: var(--cockpit-gap);
  padding: var(--cockpit-padding-top) var(--cockpit-padding-x) var(--cockpit-padding-bottom);
}

.left-panel,
.right-panel {
  display: flex;
  flex-direction: column;
  gap: var(--cockpit-gap);
  min-width: 0; /* 防止在窄容器中溢出 */
  min-height: 0; /* 允许 flex 子元素收缩并启用滚动 */
}

.center-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0; /* 确保地图可以在需要时收缩 */
}
</style>
