<template>
  <div class="hospital-layout">
    <header class="hospital-header">
      <div class="brand flex gap-8">
        <SvgIcon name="logo" :size="26" color="#fff" />
        <span class="title">康策CSM</span>
        <el-divider direction="vertical" class="divider" />
        <span class="sub-title">{{ userStore.userInfo?.hospitalName || '医院端' }}</span>
      </div>

      <nav class="hospital-nav">
        <NavBar
          mode="horizontal"
          class="head-menu"
          :isNested="false"
          :routes="topRoutes"
          :activeMenu="$route.path"
          :isIcon="false"
        />
      </nav>

      <div class="user-area">
        <el-dropdown trigger="hover" @command="handleCommand">
          <div class="user-trigger">
            <el-avatar :size="28">医</el-avatar>
            <span class="username">{{ userStore.userInfo?.name || userStore.userInfo?.userName || '用户' }}</span>
            <el-icon><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="password">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <main class="hospital-main">
      <slot />
    </main>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import { ArrowDown } from "@element-plus/icons-vue";
import NavBar from "@/components/navBar/NavBar.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { useUserStore } from "@/stores/api/user";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

// 顶部菜单：当前路由的兄弟路由
const topRoutes = computed(() => {
  const hospitalRoute = route.matched.find((r) => r.path === "/hospital");
  if (!hospitalRoute || !hospitalRoute.children) return [];
  return hospitalRoute.children
    .filter((c) => c.meta?.title && !c.meta?.hidden)
    .map((c) => ({
      path: `/hospital/${c.path}`,
      title: c.meta.title,
      iconName: c.meta?.icon || "Document",
      children: [],
    }));
});

const handleCommand = async (cmd) => {
  if (cmd === "password") {
    router.push("/hospital/password");
    return;
  }
  if (cmd === "logout") {
    try {
      await ElMessageBox.confirm("确定要退出登录吗？", "提示", {
        confirmButtonText: "退出",
        cancelButtonText: "取消",
        type: "warning",
      });
      userStore.clear();
      router.push("/login");
    } catch (_) {
      /* canceled */
    }
  }
};
</script>

<style scoped lang="scss">
.hospital-layout {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background: var(--bg-color-page);

  .hospital-header {
    flex-shrink: 0;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    background: linear-gradient(135deg, #8b9ff5 0%, #6c7cf3 100%);
    color: #fff;

    .brand {
      align-items: center;
      .title {
        font-size: 18px;
        font-weight: 600;
      }
      .divider {
        height: 18px;
        background: rgba(255, 255, 255, 0.4);
      }
      .sub-title {
        font-size: 14px;
        opacity: 0.9;
      }
    }

    .hospital-nav {
      flex: 1;
      display: flex;
      justify-content: center;

      :deep(.head-menu) {
        --el-menu-active-color: #fff;
        --el-menu-text-color: #fff;
        --el-menu-hover-bg-color: rgba(255, 255, 255, 0.16);
        --el-menu-horizontal-height: 60px;
        --el-menu-item-font-size: 15px;
        --el-menu-border-color: transparent;

        :deep(.el-sub-menu .el-sub-menu__title) {
          color: #fff !important;
        }
      }
    }

    .user-area {
      flex-shrink: 0;
      .user-trigger {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        color: #fff;
        font-size: 14px;
        padding: 0 8px;
      }
    }
  }

  .hospital-main {
    flex: 1;
    overflow: auto;
    padding: 16px;
  }
}
</style>
