<template>
  <div class="decoration-container">
    <el-row :gutter="20" class="decoration-row">
      <!-- 左侧导航菜单 -->
      <el-col :span="isCollapse ? 1 : 4" class="sidebar-col">
        <el-card shadow="hover" class="sidebar-card">
          <div class="sidebar-header">
            <h3>平台装修</h3>
            <el-button
              link
              :icon="isCollapse ? 'ArrowRight' : 'ArrowLeft'"
              @click="toggleCollapse"
              class="collapse-btn"
            />
          </div>
          <div v-show="!isCollapse" class="menu-list">
            <div
              v-for="item in menuList"
              :key="item.key"
              class="menu-item"
              :class="{ active: activeMenu === item.key }"
              @click="handleMenuClick(item.key)"
            >
              <el-icon class="menu-icon">
                <component :is="item.icon" />
              </el-icon>
              <span class="menu-text">{{ item.label }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧内容区 -->
      <el-col :span="isCollapse ? 23 : 20" class="content-col">
        <component :is="currentComponent" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="PlatformDecoration" lang="ts">
import { ref, shallowRef, markRaw } from 'vue';
import { Picture, Document, Shop, Star, Lightning } from '@element-plus/icons-vue';
import Carousel from './carousel/index.vue';
import Solution from './solution/index.vue';
import Brand from './brand/index.vue';
import Fresh from './fresh/index.vue';
import FlashSale from './flashSale/index.vue';

const isCollapse = ref(false);
const activeMenu = ref('carousel');

// 菜单列表
const menuList = [
  { key: 'carousel', label: '轮播广告', icon: Picture },
  { key: 'solution', label: '方案管理', icon: Document },
  { key: 'brand', label: '品牌中心', icon: Shop },
  { key: 'fresh', label: '新鲜好物', icon: Star },
  { key: 'flashSale', label: '品牌闪购', icon: Lightning }
];

// 组件映射
const componentMap = {
  carousel: markRaw(Carousel),
  solution: markRaw(Solution),
  brand: markRaw(Brand),
  fresh: markRaw(Fresh),
  flashSale: markRaw(FlashSale)
};

const currentComponent = shallowRef(componentMap.carousel);

// 切换折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

// 菜单点击
const handleMenuClick = (key: string) => {
  activeMenu.value = key;
  currentComponent.value = componentMap[key as keyof typeof componentMap];
};
</script>

<style scoped lang="scss">
.decoration-container {
  padding: 20px;
  height: calc(100vh - 84px);
}

.decoration-row {
  height: 100%;
}

.sidebar-col {
  transition: all 0.3s;
}

.sidebar-card {
  height: 100%;
  :deep(.el-card__body) {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
  background: #fafafa;

  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .collapse-btn {
    padding: 0;
    font-size: 16px;
  }
}

.menu-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all 0.3s;
  color: #606266;

  &:hover {
    background: #f5f7fa;
  }

  &.active {
    background: #e6f4ff;
    color: #409eff;
    font-weight: 500;
  }

  .menu-icon {
    font-size: 18px;
    margin-right: 10px;
  }

  .menu-text {
    font-size: 14px;
  }
}

.content-col {
  height: 100%;
  overflow: hidden;
}
</style>

