<template>
  <div class="org-chart-container">
    <!-- Left Sidebar -->
    <div class="sidebar">
      <div class="logo-section">
        <span class="product-name">ProductName</span>
      </div>

      <div class="menu-section">
        <div class="menu-title">菜单类别标题</div>
        <div class="menu-item">
          <div class="menu-item-content active">
            <i class="i-lucide-layout-grid"></i>
            <span>组织架构</span>
          </div>
          <div class="submenu">
            <div class="submenu-item">系统模块1</div>
            <div class="submenu-item">xxx部门组织架构</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <div class="breadcrumb">
        <i class="i-lucide-folder text-gray-500"></i>
        <span>组织架构</span>
        <span>/</span>
        <span class="text-blue-500">xxx部门组织架构</span>
      </div>

      <div class="department-section">
        <div class="department-header">
          <h2>技术部门</h2>
          <button class="close-btn">
            <i class="i-lucide-x"></i>
          </button>
        </div>

        <div class="department-content">
          <!-- Department Columns -->
          <div v-for="dept in departments" :key="dept.name" class="department-column">
            <div class="department-head">
              <div class="avatar">
                <img :src="dept.avatar" :alt="dept.name" />
              </div>
              <div class="head-info">
                <div class="name">{{ dept.name }}</div>
                <div class="title">{{ dept.title }}</div>
              </div>
            </div>

            <div class="staff-list">
              <div v-for="(staff, index) in dept.staff" :key="index" class="staff-item">
                <i class="i-lucide-chevron-down text-gray-400"></i>
                <span>{{ staff.name }}-{{ staff.title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const departments = [
  {
    name: '张三',
    title: '信息架构部门主任',
    avatar: '/placeholder.svg?height=48&width=48',
    staff: [
      { name: '职员A', title: '职位' },
      { name: '职员B', title: '职位' },
      { name: '职员C', title: '职位' },
      { name: '职员D', title: '职位' },
      { name: '职员E', title: '职位' },
      { name: '职员F', title: '职位' },
      { name: '职员G', title: '职位' },
      { name: '职员H', title: '职位' },
      { name: '职员I', title: '职位' },
      { name: '职员J', title: '职位' }
    ]
  },
  {
    name: '李四',
    title: '信息架构部门主任',
    avatar: '/placeholder.svg?height=48&width=48',
    staff: [
      { name: '职员A', title: '职位' },
      { name: '职员B', title: '职位' },
      { name: '职员C', title: '职位' },
      { name: '职员D', title: '职位' },
      { name: '职员E', title: '职位' },
      { name: '职员F', title: '职位' },
      { name: '职员G', title: '职位' },
      { name: '职员H', title: '职位' },
      { name: '职员I', title: '职位' },
      { name: '职员J', title: '职位' }
    ]
  },
  {
    name: '王五',
    title: '信息架构部门主任',
    avatar: '/placeholder.svg?height=48&width=48',
    staff: [
      { name: '职员A', title: '职位' },
      { name: '职员B', title: '职位' },
      { name: '职员C', title: '职位' },
      { name: '职员D', title: '职位' },
      { name: '职员E', title: '职位' },
      { name: '职员F', title: '职位' },
      { name: '职员G', title: '职位' },
      { name: '职员H', title: '职位' },
      { name: '职员I', title: '职位' },
      { name: '职员J', title: '职位' }
    ]
  }
]
</script>

<style scoped>
.org-chart-container {
  @apply flex min-h-screen bg-white;
}

.sidebar {
  @apply w-64 bg-[#1D4B94] text-white flex flex-col;
}

.logo-section {
  @apply flex items-center gap-2 p-4 border-b border-white/10;
}

.product-name {
  @apply text-lg font-semibold;
}

.menu-section {
  @apply p-4;
}

.menu-title {
  @apply text-sm text-gray-300 mb-4;
}

.menu-item {
  @apply space-y-2;
}

.menu-item-content {
  @apply flex items-center gap-2 p-2 rounded hover:bg-white/10 cursor-pointer;
}

.menu-item-content.active {
  @apply bg-white/10;
}

.submenu {
  @apply ml-8 space-y-2;
}

.submenu-item {
  @apply text-sm py-1 px-2 hover:bg-white/10 rounded cursor-pointer;
}

.main-content {
  @apply flex-1 p-6;
}

.breadcrumb {
  @apply flex items-center gap-2 text-sm text-gray-600 mb-6;
}

.department-section {
  @apply bg-white rounded-lg shadow;
}

.department-header {
  @apply flex justify-between items-center p-4 border-b;
}

.department-header h2 {
  @apply text-xl font-semibold;
}

.close-btn {
  @apply p-2 hover:bg-gray-100 rounded;
}

.department-content {
  @apply grid grid-cols-3 gap-6 p-6;
}

.department-column {
  @apply border rounded-lg p-4;
}

.department-head {
  @apply flex items-center gap-4 p-4 bg-[#E8F0FF] rounded-lg mb-4;
}

.avatar {
  @apply w-12 h-12 rounded-full overflow-hidden;
}

.avatar img {
  @apply w-full h-full object-cover;
}

.head-info {
  @apply flex flex-col;
}

.name {
  @apply font-semibold;
}

.title {
  @apply text-sm text-gray-600;
}

.staff-list {
  @apply space-y-2;
}

.staff-item {
  @apply flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer text-sm text-gray-600;
}
</style>