<template>
  <div class="demo-page">
    <!-- ═══ 顶部信息栏 ═══ -->
    <div class="demo-header">
      <h2>🔄 地图单例模式 & 页面切换演示</h2>
      <span class="demo-badge">Q2 面试题现场版</span>
    </div>

    <!-- ═══ 标签切换栏 ═══ -->
    <div class="demo-tabs">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        class="demo-tab"
        :class="{ active: activeTab === tab.id }"
        @click="switchTab(tab.id)"
      >
        {{ tab.label }}
      </button>

      <!-- 全局状态指示器 -->
      <div class="demo-indicator">
        <span class="indicator-dot" :class="jsapiLoaded ? 'on' : 'off'" />
        JSAPI: {{ jsapiLoaded ? '✅ 已加载（全局单例）' : '⏳ 未加载' }}
      </div>
    </div>

    <!-- ═══ 地图区域 ═══ -->
    <div class="demo-map-area">
      <!-- 页面 A：北京 -->
      <MapPanel
        v-if="activeTab === 'pageA'"
        key="pageA"
        title="📍 页面 A — 北京天安门"
        :center="[116.397428, 39.90923]"
        :zoom="12"
        color="#42b883"
        @map-created="onMapCreated('A')"
        @map-destroyed="onMapDestroyed('A')"
      />

      <!-- 页面 B：上海 -->
      <MapPanel
        v-if="activeTab === 'pageB'"
        key="pageB"
        title="📍 页面 B — 上海东方明珠"
        :center="[121.473701, 31.230416]"
        :zoom="13"
        color="#4A90D9"
        @map-created="onMapCreated('B')"
        @map-destroyed="onMapDestroyed('B')"
      />
    </div>

    <!-- ═══ 底部日志面板 ═══ -->
    <div class="demo-log">
      <div class="demo-log-header">
        <span>📋 生命周期日志</span>
        <button class="demo-log-clear" @click="logs.length = 0">清空</button>
      </div>
      <div class="demo-log-list" ref="logListRef">
        <div
          v-for="(log, i) in logs"
          :key="i"
          class="demo-log-item"
          :class="'log-' + log.type"
        >
          <span class="log-time">{{ log.time }}</span>
          <span class="log-msg">{{ log.msg }}</span>
        </div>
        <div v-if="logs.length === 0" class="demo-log-empty">
          暂无日志 — 点击上方标签切换页面试试
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue'
import MapPanel from '@/components/MapPanel.vue'

// ═══ 标签页配置 ═══
const tabs = [
  { id: 'pageA' as const, label: '🏙️ 页面 A — 北京' },
  { id: 'pageB' as const, label: '🌆 页面 B — 上海' },
]
const activeTab = ref<'pageA' | 'pageB'>('pageA')

// ═══ JSAPI 状态 ═══
const jsapiLoaded = ref(false)

// ═══ 日志系统 ═══
interface LogEntry {
  time: string
  msg: string
  type: 'created' | 'destroyed' | 'info'
}
const logs = ref<LogEntry[]>([])
const logListRef = ref<HTMLDivElement | null>(null)

function addLog(msg: string, type: LogEntry['type'] = 'info') {
  const now = new Date()
  const time = now.toLocaleTimeString('zh-CN', { hour12: false })
  logs.value.push({ time, msg, type })
  // 自动滚到底部
  nextTick(() => {
    if (logListRef.value) {
      logListRef.value.scrollTop = logListRef.value.scrollHeight
    }
  })
}

// ═══ 标签切换 ═══
function switchTab(id: 'pageA' | 'pageB') {
  if (activeTab.value === id) return
  const from = activeTab.value === 'pageA' ? 'A' : 'B'
  const to = id === 'pageA' ? 'A' : 'B'
  addLog(`🔄 用户点击切换：页面 ${from} → 页面 ${to}`, 'info')
  activeTab.value = id
}

// ═══ 地图事件回调 ═══
function onMapCreated(page: string) {
  jsapiLoaded.value = true
  addLog(`✅ 页面 ${page} 地图实例创建完成（new AMap.Map 挂载到自己的 containerRef）`, 'created')
}

function onMapDestroyed(page: string) {
  addLog(`💀 页面 ${page} 地图实例已销毁（onUnmounted → destroyMap → map.destroy()）`, 'destroyed')
}

onMounted(() => {
  addLog('🚀 演示页面加载，当前显示页面 A', 'info')
})
</script>

<style scoped>
/* ═══ 页面容器 ═══ */
.demo-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: #f5f5f5;
}

/* ═══ 顶部 ═══ */
.demo-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}

.demo-header h2 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.demo-badge {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 10px;
  background: #f0faf5;
  color: #42b883;
  font-weight: 600;
}

/* ═══ 标签栏 ═══ */
.demo-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}

.demo-tab {
  padding: 10px 20px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #999;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: -1px;
}

.demo-tab:hover {
  color: #555;
  background: #fafafa;
}

.demo-tab.active {
  color: #333;
  font-weight: 600;
  border-bottom-color: #42b883;
}

.demo-indicator {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #888;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.indicator-dot.on {
  background: #27ae60;
  box-shadow: 0 0 4px rgba(39, 174, 96, 0.4);
}

.indicator-dot.off {
  background: #ccc;
}

/* ═══ 地图区域 ═══ */
.demo-map-area {
  flex: 1;
  min-height: 0;
  position: relative;
}

/* ═══ 日志面板 ═══ */
.demo-log {
  height: 160px;
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.demo-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  background: #2d2d2d;
  border-bottom: 1px solid #3e3e3e;
  flex-shrink: 0;
}

.demo-log-clear {
  padding: 2px 10px;
  border: 1px solid #555;
  border-radius: 3px;
  background: transparent;
  color: #999;
  font-size: 11px;
  cursor: pointer;
}

.demo-log-clear:hover {
  background: #444;
  color: #ccc;
}

.demo-log-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
}

.demo-log-item {
  padding: 2px 0;
  line-height: 1.6;
}

.log-time {
  color: #6a9955;
  margin-right: 8px;
}

.log-created .log-msg {
  color: #4ec9b0;
}

.log-destroyed .log-msg {
  color: #ce9178;
}

.log-info .log-msg {
  color: #9cdcfe;
}

.demo-log-empty {
  color: #666;
  font-style: italic;
  padding: 8px 0;
}
</style>
