<template>
  <div class="layer-menu">
    <!-- 侧边 Tab -->
    <div class="tab-bar">
      <div v-for="(g, i) in groups" :key="i"
        class="tab-item" :class="{ active: activeTab === i }"
        @click="onTabClick(i)">
        <span class="tab-text">{{ g.tab }}</span>
      </div>
    </div>

    <!-- 展开面板 -->
    <div class="layer-panel" v-show="activeTab !== null">
      <div class="panel-header">
        <span>{{ groups[activeTab]?.tab || '' }}</span>
        <el-icon class="close-btn" @click="activeTab = null"><Close /></el-icon>
      </div>
      <div class="panel-body">
        <div v-for="(cat, ci) in currentCategories" :key="activeTab + '-' + ci" class="layer-category">
          <div class="cat-title" @click="cat.expanded = !cat.expanded">
            <span class="cat-arrow">{{ cat.expanded ? '▼' : '▶' }}</span>
            <span>{{ cat.title }}</span>
          </div>
          <div v-show="cat.expanded" class="cat-items">
            <div v-for="layer in cat.layers" :key="layer.id"
              class="layer-item" :class="{ active: layer.checked }"
              @click="onLayerClick(layer)">
              <span class="check-box">{{ layer.checked ? '☑' : '☐' }}</span>
              <span class="layer-name">{{ layer.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { layerGroups } from '../config/layerMenu'

const emit = defineEmits(['layerToggle'])

// 响应式数据：用 ref 保证深度响应
const groups = ref(
  layerGroups.map(g => ({
    tab: g.tab,
    categories: g.categories.map(c => ({
      title: c.title,
      expanded: true,
      layers: c.layers.map(l => ({ ...l, checked: false }))
    }))
  }))
)

const activeTab = ref(null)

const currentCategories = computed(() => {
  if (activeTab.value === null) return []
  return groups.value[activeTab.value]?.categories || []
})

const onTabClick = (i) => {
  activeTab.value = activeTab.value === i ? null : i
}

const onLayerClick = (layer) => {
  layer.checked = !layer.checked
  emit('layerToggle', { layer, checked: layer.checked })
}
</script>

<style scoped>
.layer-menu { position: absolute; left: 0; top: 0; bottom: 0; z-index: 20; display: flex; pointer-events: none; }
.layer-menu * { pointer-events: auto; }

.tab-bar {
  width: 40px; background: rgba(27,53,111,.85); display: flex;
  flex-direction: column; padding-top: 8px; flex-shrink: 0;
}
.tab-item {
  width: 100%; height: 100px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; writing-mode: vertical-rl;
  color: #ccc; font-size: 13px; letter-spacing: 4px;
  border-bottom: 1px solid rgba(255,255,255,.1); user-select: none;
}
.tab-item:hover { color: #fff; }
.tab-item.active { background: rgba(43,102,223,.8); color: #fff; }

.layer-panel {
  width: 310px; background: rgba(43,68,156,.92); color: #fff;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 0 8px 8px 0; box-shadow: 4px 0 12px rgba(0,0,0,.3);
}
.panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.15);
  font-size: 15px; font-weight: 500; flex-shrink: 0;
}
.close-btn { cursor: pointer; }
.close-btn:hover { color: #7ec8f8; }

.panel-body { flex: 1; overflow-y: auto; padding: 8px 0; }

.layer-category { margin-bottom: 2px; }
.cat-title {
  display: flex; align-items: center; gap: 6px; padding: 10px 16px;
  font-size: 13px; font-weight: 500; cursor: pointer; user-select: none;
  background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08);
}
.cat-title:hover { background: rgba(255,255,255,.12); }
.cat-arrow { font-size: 10px; width: 14px; }

.cat-items { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px; }

.layer-item {
  width: calc(33.33% - 4px); display: flex; align-items: center;
  gap: 4px; padding: 6px 8px; border-radius: 4px; cursor: pointer;
  font-size: 12px; transition: background .15s; user-select: none;
}
.layer-item:hover { background: rgba(255,255,255,.12); }
.layer-item.active { background: rgba(38,11,150,.6); }
.check-box { font-size: 14px; flex-shrink: 0; }
.layer-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>
