<template>
  <div class="left-panel-wrapper">
    <div class="left-panel">
      <CollapsiblePanel title="快速感知" subtitle="「灾害分析」">
        <template #title-icon>
          <img
            src="../../assets/images/media_dvr_on.png"
            alt="摄像头"
            class="camera-icon"
            @click.stop="handleCameraClick"
          />
        </template>
        <DisasterAnalysis />
      </CollapsiblePanel>

      <CollapsiblePanel
        title="快速匹配"
        subtitle="「力量预置」"
        @title-click="handleForcePresetToggle"
      >
        <ForcePreset />
      </CollapsiblePanel>

      <CollapsiblePanel
        title="快速响应"
        subtitle="「力量调度」"
        @title-click="handleQuickResponseToggle"
      >
        <ForceDispatch
          @start-dispatch="handleStartDispatch"
          @view-plan="handleViewPlan"
        />
      </CollapsiblePanel>
    </div>

    <!-- 地理位置独立浮层 -->
    <div class="location-entry">
      <button
        id="location-toggle-btn"
        type="button"
        class="location-toggle"
        :class="{ 'is-open': isLocationOpen }"
        :aria-expanded="isLocationOpen"
        aria-controls="location-panel"
        @click="toggleLocation"
      >
        <img
          src="../../assets/images/LocationPanel/locationIcon.png"
          alt=""
          class="location-icon"
          aria-hidden="true"
        />
        <span class="location-text">地理位置</span>
        <img
          src="../../assets/images/LocationPanel/箭头.png"
          alt=""
          class="arrow-icon"
          aria-hidden="true"
        />
      </button>

      <LocationPanel
        :expanded="isLocationOpen"
        panel-id="location-panel"
        label-id="location-toggle-btn"
      >
        <DisasterAnalysis />
      </LocationPanel>
    </div>

    <!-- 视频弹窗 -->
    <VideoModal
      v-if="showVideoModal"
      :visible="showVideoModal"
      :monitor="cameraVideoData"
      @close="handleCloseVideoModal"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CollapsiblePanel from '../shared/CollapsiblePanel.vue'
import DisasterAnalysis from './DisasterAnalysis.vue'
import ForcePreset from './ForcePreset.vue'
import ForceDispatch from './ForceDispatch.vue'
import LocationPanel from './LocationPanel.vue'
import VideoModal from '../RightPanel/VideoModal.vue'

const isLocationOpen = ref(true)

const toggleLocation = () => {
  isLocationOpen.value = !isLocationOpen.value
}

// 视频弹窗状态
const showVideoModal = ref(false)
const cameraVideoData = ref({
  id: 999,
  type: 'drone',
  title: '快速感知',
  videoSrc: 'http://222.212.85.86:9000/300bdf2b-a150-406e-be63-d28bd29b409f/demo/ylzg/快速感知.mp4',  // 预留视频链接，后续补充
  dateRange: '',
  hasAudio: true,
  hasMegaphone: false,
  hasZoom: false,
  hasDirectionControl: false
})

// 打开视频弹窗
const handleCameraClick = () => {
  showVideoModal.value = true
}

// 关闭视频弹窗
const handleCloseVideoModal = () => {
  showVideoModal.value = false
}

// 定义对外事件
const emit = defineEmits(['start-dispatch', 'view-plan', 'force-preset-toggle'])

/**
 * 处理力量调度启动事件，向上传递给父组件
 */
const handleStartDispatch = (payload) => {
  emit('start-dispatch', payload)
}

/**
 * 处理查看智能应急方案事件，向上传递给父组件
 */
const handleViewPlan = (plan) => {
  emit('view-plan', plan)
}

/**
 * 处理快速匹配面板标题点击事件
 */
const handleForcePresetToggle = () => {
  console.log('[LeftPanel] 快速匹配标题被点击')
  emit('force-preset-toggle')
}

/**
 * 处理快速响应面板标题点击事件
 */
const handleQuickResponseToggle = () => {
  console.log('[LeftPanel] 快速响应标题被点击')
  emit('quick-response-toggle')
}
</script>

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

.left-panel-wrapper {
  position: relative;
  display: inline-block;
  height: 100%;
}

.left-panel {
  // width: vw(464);
  height: 100%;
  background: url('../../assets/images/框架左边.png') no-repeat;
  background-size: 100% 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-left: vw(40); // 为左侧折叠按钮预留空间
  padding-top: var(--sa-header-height);
  box-sizing: border-box;

  &::-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);
    }
  }
}

.location-entry {
  position: absolute;
  top: var(--sa-header-height);
  left: 100%;
  margin-left: vw(12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: vh(12);
  width: vw(220);
  z-index: 10;
}

.location-toggle {
  display: flex;
  align-items: center;
  gap: vw(8);
  padding: vh(6) vw(12);
  width: vw(133);
  height: vh(29);
  background: url('../../assets/images/LocationPanel/地理位置按钮背景.png') no-repeat center center;
  background-size: 100% 100%;
  border: none;
  border-radius: vw(4);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 0.9;
  }

  &:active {
    opacity: 0.8;
  }

  &:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }

  .location-icon {
    width: vw(19);
    height: vw(17);
    flex-shrink: 0;
  }

  .location-text {
    color: var(--text-white);
    font-size: fs(16);
    font-weight: 500;
    font-family: SourceHanSansCN-Medium, sans-serif;
    white-space: nowrap;
  }

  .arrow-icon {
    width: vw(10);
    height: vh(10);
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }

  &.is-open .arrow-icon {
    transform: rotate(90deg);
  }
}

.camera-icon {
  width: vw(30);
  height: vw(30);
  flex-shrink: 0;
  object-fit: contain;
  align-self: center;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    opacity: 0.8;
    transform: scale(1.1);
  }

  &:active {
    transform: scale(0.95);
  }
}
</style>
