<template>
  <div class="situational-awareness">
    <!-- 顶部导航栏 -->
    <PageHeader @back="handleBack" />

    <!-- 主内容区域 -->
    <div class="situational-awareness__main">
      <!-- 左侧面板 -->
      <LeftPanel />

      <!-- 中央地图区域 -->
      <MapViewer @marker-click="handleMarkerClick" />

      <!-- 右侧面板 -->
      <RightPanel />
    </div>

    <!-- 弹窗组件 -->
    <PersonnelDetail
      :visible="showPersonnelDetail"
      :personnel-data="selectedPersonnel"
      @close="showPersonnelDetail = false"
      @link="handlePersonnelLink"
    />

    <EmergencyCenterDetail
      :visible="showCenterDetail"
      :center-data="selectedCenter"
      @close="showCenterDetail = false"
    />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'
import PageHeader from './components/PageHeader.vue'
import LeftPanel from './components/LeftPanel/index.vue'
import MapViewer from './components/MapViewer/index.vue'
import RightPanel from './components/RightPanel/index.vue'
import PersonnelDetail from './components/Popups/PersonnelDetail.vue'
import EmergencyCenterDetail from './components/Popups/EmergencyCenterDetail.vue'
import { useDisasterData } from './composables/useDisasterData'

// 使用灾害数据
const disasterData = useDisasterData()

// 提供给子组件使用
provide('disasterData', disasterData)

// 弹窗状态
const showPersonnelDetail = ref(false)
const showCenterDetail = ref(false)

// 选中的数据
const selectedPersonnel = ref({
  name: '张强',
  department: '安全生产部',
  distance: 0.6,
  estimatedArrival: 10,
  avatar: null
})

const selectedCenter = ref({
  name: '忠县应急中心',
  adminLevel: '国道',
  department: '交通公路部门',
  distance: 0.6,
  image: null
})

// 返回驾驶舱
const handleBack = () => {
  console.log('返回驾驶舱')
  // 实际实现：路由跳转
  // router.push('/cockpit')
}

// 处理地图标记点击
const handleMarkerClick = (type) => {
  if (type === 'personnel') {
    showPersonnelDetail.value = true
  } else if (type === 'center') {
    showCenterDetail.value = true
  }
}

// 处理人员联动
const handlePersonnelLink = (personnel) => {
  console.log('联动人员:', personnel)
  // 实际实现：在地图上定位该人员，调用通信功能等
  showPersonnelDetail.value = false
}
</script>

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

.situational-awareness {
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-dark);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &__main {
    flex: 1;
    display: grid;
    grid-template-columns: vw(564) 1fr vw(526);
    gap: 0;
    min-height: 0;
    background: url(./assets/images/main-bg.png) center/cover no-repeat;
    position: relative;

    // 背景地图图片
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url(../3DSituationalAwarenessCopy/assets/img/SketchPng6e145958ea0dbf76e6562cc7965debbb95226caff3271c366ac9b254cbe6e796.png)
        center/cover no-repeat;
      opacity: 0.3;
      pointer-events: none;
      z-index: 0;
    }

    > * {
      position: relative;
      z-index: 1;
    }
  }
}
</style>
