<script lang="tsx">
import { Transition } from 'vue'
export default defineComponent(() => {
  interface MenuItem {
    path: string
    title: string
    children?: MenuItem[]
  }

  const route = useRoute()
  const router = useRouter()

  const menuList: MenuItem[] = [
    // { path: '/backend/manager', title: '企业文化管理员' },
    { path: '/backend/tags', title: '官方标签' },
    { path: '/backend/carousel', title: '轮播图设置' },
    // { path: '/backend/topic-admin', title: '专栏——管理员' },
    // { path: '/backend/columnSettings', title: '专栏——栏目管理' },
    // { path: '/backend/interview-admin', title: '专访——管理员' },
    // { path: '/backend/interviewSettings', title: '专访——栏目管理' },
    // { path: '/backend/videoSettings', title: '视频——栏目管理' },
    // { path: '/backend/videoManage', title: '视频管理' },
    { path: '/backend/caseManage', title: 'YAYA案例库管理' },
    { path: '/backend/goodsManage', title: '积分商城——商品配置' },
    { path: '/backend/goodsDistribution', title: '积分商城——商品分发' },
    // 内容管理
    {
      path: '/backend/contentsMenu',
      title: '内容管理',
      children: [
        { path: '/backend/contentsMenu/columnManage', title: '专栏管理' },
        { path: '/backend/contentsMenu/interviewManage', title: '专访管理' },
        { path: '/backend/contentsMenu/videoManage', title: '视频管理' },
        { path: '/backend/contentsMenu/questionManage', title: '问吧管理' },
      ],
    },

    // 配置管理
    {
      path: '/backend/settingsMenu',
      title: '配置管理',
      children: [
        { path: '/backend/settingsMenu/auctionManage', title: '限时竞拍配置' },
        { path: '/backend/settingsMenu/goodsManage', title: '积分商城配置' },
      ],
    },
    // 栏目管理
    {
      path: '/backend/columnsMenu',
      title: '栏目管理',
      children: [
        { path: '/backend/columnsMenu/columnManage', title: '专栏——栏目管理' },
        { path: '/backend/columnsMenu/interviewManage', title: '专访——栏目管理' },
        { path: '/backend/columnsMenu/videoManage', title: '视频——栏目管理' },
      ],
    },
  ]

  const activeMenu = computed(() => route.path)
  const currentTitle = computed(() => {
    const current = menuList.find((item) => item.path === route.path)
    return current?.title || ''
  })

  const handleMenuSelect = (path: string) => {
    router.push(path)
  }

  const renderMenu = (menuList: MenuItem[]) =>
    menuList.map((item) =>
      item.children?.length ? (
        <el-sub-menu key={item.path} index={item.path}>
          {{
            title: () => {
              return <span>{item.title}</span>
            },
            default: () => {
              return renderMenu(item.children || [])
            },
          }}
        </el-sub-menu>
      ) : (
        <el-menu-item key={item.path} index={item.path}>
          <span>{item.title}</span>
        </el-menu-item>
      ),
    )

  return () => (
    <div class="backend-layout">
      <aside class="backend-sidebar">
        <div class="sidebar-header">
          <img src="/webicon.png" alt="SOUNDASIA" class="logo" />
          <span class="header-title">企业文化后台管理</span>
        </div>

        <el-menu
          defaultActive={activeMenu.value}
          class="sidebar-menu"
          onSelect={handleMenuSelect}
          router
          collapse={false}
        >
          {renderMenu(menuList)}
        </el-menu>
      </aside>

      <div class="backend-content">
        <header class="content-header">
          <div class="header-left">
            <img src="/webicon.png" alt="" class="header-icon" />
            <h1 class="header-title">{currentTitle.value}</h1>
          </div>
          <div class="header-right"></div>
        </header>

        <main class="content-main">
          <RouterView>
            {({ Component }: { Component: VNode }) => (
              <Transition name="fade" mode="out-in">
                {Component}
              </Transition>
            )}
          </RouterView>
        </main>
      </div>
    </div>
  )
})
</script>

<style scoped lang="scss">
.backend-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.backend-sidebar {
  width: 200px;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;

  .sidebar-header {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;

    .logo {
      height: 32px;
      width: 32px;
    }

    .header-title {
      font-size: 14px;
      color: #333;
      font-weight: 500;
    }
  }

  .sidebar-menu {
    flex: 1;
    border-right: none;

    :deep(.el-menu-item) {
      height: 48px;
      line-height: 48px;
      font-size: 14px;

      &:hover {
        background: #f5f7fa;
      }

      &.is-active {
        background: #e6f4ff;
        color: #409eff;
        border-right: 3px solid #409eff;
      }
    }
  }
}

.backend-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f5f7fa;
}

.content-header {
  height: 60px;
  background: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 10;

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;

    .header-icon {
      width: 32px;
      height: 32px;
    }

    .header-title {
      font-size: 18px;
      font-weight: 500;
      color: #333;
      margin: 0;
    }
  }
}

.content-main {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
