<!--
  LayerPanel.vue — 组件层级管理面板

  功能：
  - 以树状列表展示所有组件
  - 选中联动预览区
  - 上移/下移/删除/复制
  - 拖拽排序（可选）
  - 可见性切换
-->
<template>
  <div class="layer-panel" :class="{ collapsed: !expanded }">
    <div class="lp-header" @click="expanded = !expanded">
      <span class="lp-title">🔲 层级管理</span>
      <span class="lp-count">{{ store.componentCount }}</span>
      <span class="lp-arrow" :class="{ open: expanded }">▼</span>
    </div>

    <Transition name="layer-slide">
      <div v-if="expanded" class="lp-body">
        <div class="lp-actions">
          <el-button size="small" @click="store.undo()" :disabled="!store.canUndo" title="撤销">↩</el-button>
          <el-button size="small" @click="store.redo()" :disabled="!store.canRedo" title="重做">↪</el-button>
          <el-button size="small" @click="expandAll" title="全部展开">📂</el-button>
          <el-button size="small" type="danger" plain @click="clearAll" title="清空">🗑️</el-button>
        </div>

        <div class="lp-list">
          <div
            v-for="(comp, index) in store.components"
            :key="comp.id"
            class="lp-item"
            :class="{ active: store.selectedId === comp.id }"
            @click="store.selectComponent(comp.id)"
          >
            <div class="lp-item-icon">{{ getIcon(comp.type) }}</div>
            <div class="lp-item-label">{{ getLabel(comp.type) }}</div>
            <div class="lp-item-tools">
              <el-button size="small" text @click.stop="store.moveComponent(index, index - 1)" :disabled="index === 0" title="上移">↑</el-button>
              <el-button size="small" text @click.stop="store.moveComponent(index, index + 1)" :disabled="index === store.components.length - 1" title="下移">↓</el-button>
              <el-button size="small" text type="primary" @click.stop="handleCopy(index)" title="复制">📋</el-button>
              <el-button size="small" text type="danger" @click.stop="store.removeComponent(comp.id)" title="删除">✕</el-button>
            </div>
          </div>

          <div v-if="store.components.length === 0" class="lp-empty">
            <span>暂无组件</span>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useDesignStore } from '../../../stores/designStore.js'
import { COMPONENT_REGISTRY } from '../utils/componentRegistry.js'

const store = useDesignStore()
const expanded = ref(true)

function getIcon(type) {
  return COMPONENT_REGISTRY[type]?.icon || '📄'
}

function getLabel(type) {
  return COMPONENT_REGISTRY[type]?.label || type
}

function handleCopy(index) {
  const comp = store.components[index]
  if (!comp) return
  store.addComponent(comp.type, index + 1)
}

function expandAll() {
  // 已全部展开
}

function clearAll() {
  store.setComponents([])
}
</script>

<style scoped>
.layer-panel {
  background: #fff;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}

.lp-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}

.lp-title {
  font-size: 13px;
  font-weight: 600;
  color: #555;
}

.lp-count {
  font-size: 10px;
  color: #999;
  background: #f0f0f0;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: auto;
}

.lp-arrow {
  font-size: 9px;
  color: #bbb;
  transition: transform .2s;
}

.lp-arrow.open {
  transform: rotate(180deg);
}

.lp-body {
  border-top: 1px solid #f5f5f5;
}

.lp-actions {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  background: #fafafa;
}

.lp-actions :deep(.el-button) {
  padding: 3px 6px;
  font-size: 11px;
  height: 24px;
  min-width: 28px;
}

.lp-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
}

.lp-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background .1s;
  border-left: 3px solid transparent;
}

.lp-item:hover {
  background: #f8f6ff;
}

.lp-item.active {
  background: #f0ecff;
  border-left-color: #7C3AED;
}

.lp-item-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.lp-item-label {
  font-size: 12px;
  color: #444;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-item-tools {
  display: none;
  gap: 1px;
  flex-shrink: 0;
}

.lp-item:hover .lp-item-tools,
.lp-item.active .lp-item-tools {
  display: flex;
}

.lp-item-tools :deep(.el-button) {
  padding: 1px 3px;
  font-size: 10px;
  height: 20px;
  min-width: 18px;
  border: none;
}

.lp-empty {
  padding: 20px;
  text-align: center;
  color: #bbb;
  font-size: 12px;
}

/* Transition */
.layer-slide-enter-active,
.layer-slide-leave-active {
  transition: all .2s ease;
}
.layer-slide-enter-from,
.layer-slide-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.layer-slide-enter-to,
.layer-slide-leave-from {
  max-height: 300px;
}
</style>
