<template>
  <div class="layout">
    <!-- 顶部信息栏 -->
    <div class="header">
      <div class="header-left">
        <span class="system-icon">🏥</span>
        <span class="system-name">智慧病房管理平台</span>
      </div>
      <div class="header-right">
        <span class="user-info">欢迎，{{ userInfo.name || userInfo.username }}</span>
        <button class="logout-btn" @click="handleLogout">退出登录</button>
      </div>
    </div>

    <div class="main-container">
      <!-- 左侧导航栏 -->
      <div class="sidebar">
        <div class="menu">
          <!-- 院区信息管理 -->
          <div class="menu-item">
            <div class="menu-title" @click="toggleMenu('hospital')">
              <span class="menu-icon">🏢</span>
              <span>院区信息管理</span>
              <span class="arrow" :class="{ expanded: expandedMenus.hospital }">▶</span>
            </div>
            <div class="sub-menu" v-show="expandedMenus.hospital">
              <router-link to="/hospital/overview" class="sub-menu-item">医院概况</router-link>
              <router-link to="/hospital/department" class="sub-menu-item">科室管理</router-link>
              <router-link to="/hospital/ward-area" class="sub-menu-item">病区管理</router-link>
              <router-link to="/hospital/ward" class="sub-menu-item">病房管理</router-link>
              <router-link to="/hospital/bed" class="sub-menu-item">床位管理</router-link>
              <router-link to="/hospital/patient" class="sub-menu-item">患者管理</router-link>
            </div>
          </div>

          <!-- 设备管理 -->
          <div class="menu-item">
            <router-link to="/device" class="menu-title menu-link">
              <span class="menu-icon">🔧</span>
              <span>设备管理</span>
            </router-link>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const userInfo = reactive({
  name: '',
  username: ''
})

const expandedMenus = reactive({
  hospital: true
})

onMounted(() => {
  const info = localStorage.getItem('userInfo')
  if (info) {
    Object.assign(userInfo, JSON.parse(info))
  }
})

const toggleMenu = (menu) => {
  expandedMenus[menu] = !expandedMenus[menu]
}

const handleLogout = () => {
  localStorage.removeItem('userInfo')
  localStorage.removeItem('userType')
  router.push('/login')
}
</script>

<style scoped>
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶部信息栏 */
.header {
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  color: #fff;
}

.header-left {
  display: flex;
  align-items: center;
}

.system-icon {
  font-size: 28px;
  margin-right: 10px;
}

.system-name {
  font-size: 20px;
  font-weight: bold;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-info {
  font-size: 14px;
}

.logout-btn {
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.logout-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 主容器 */
.main-container {
  flex: 1;
  display: flex;
}

/* 左侧导航栏 */
.sidebar {
  width: 220px;
  background: #304156;
  min-height: calc(100vh - 60px);
}

.menu {
  padding: 10px 0;
}

.menu-item {
  color: #bfcbd9;
}

.menu-title {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.menu-title:hover {
  background: #263445;
}

.menu-link {
  text-decoration: none;
  color: #bfcbd9;
}

.menu-link.router-link-active {
  background: #667eea;
  color: #fff;
}

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

.arrow {
  margin-left: auto;
  font-size: 12px;
  transition: transform 0.3s;
}

.arrow.expanded {
  transform: rotate(90deg);
}

.sub-menu {
  background: #1f2d3d;
}

.sub-menu-item {
  display: block;
  padding: 12px 20px 12px 50px;
  color: #bfcbd9;
  text-decoration: none;
  transition: all 0.3s;
}

.sub-menu-item:hover {
  background: #001528;
}

.sub-menu-item.router-link-active {
  background: #667eea;
  color: #fff;
}

/* 右侧内容区域 */
.content {
  flex: 1;
  padding: 20px;
  background: #f0f2f5;
  overflow-y: auto;
}
</style>
