<template>
  <el-container style="min-height: 100vh;">
    <el-aside width="220px" style="background: #0f2f23; color: #fff;">
      <div style="padding: 18px 16px; font-size: 18px; font-weight: 600;">
        颐云养老院管理平台
      </div>
      <el-menu
        :default-active="activeMenu"
        router
        background-color="#0f2f23"
        text-color="#c7e7d5"
        active-text-color="#ffffff">
        <el-menu-item v-for="item in menu" :key="item.path" :index="item.path">
          {{ item.label }}
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header-bar">
        <div>{{ roleLabel }}</div>
        <div>
          <el-button size="mini" type="primary" @click="handleLogout">退出登录</el-button>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { logout } from "../api";

export default {
  data() {
    return {
      role: localStorage.getItem("role")
    };
  },
  computed: {
    menu() {
      if (this.role === "ADMIN") {
        return [
          { path: "/admin/dashboard", label: "运营概览" },
          { path: "/admin/users", label: "账号管理" },
          { path: "/admin/elders", label: "长者档案" },
          { path: "/admin/schedules", label: "排班管理" },
          { path: "/admin/bills", label: "账单管理" },
          { path: "/admin/feedback", label: "反馈处理" },
          { path: "/admin/notices", label: "通知公告" }
        ];
      }
      if (this.role === "NURSE") {
        return [
          { path: "/nurse/dashboard", label: "工作台" },
          { path: "/nurse/schedules", label: "我的排班" },
          { path: "/nurse/care", label: "护理记录" },
          { path: "/nurse/health", label: "健康监测" },
          { path: "/nurse/handovers", label: "交班记录" },
          { path: "/nurse/notices", label: "通知中心" }
        ];
      }
      return [
        { path: "/family/dashboard", label: "家属首页" },
        { path: "/family/elders", label: "亲人档案" },
        { path: "/family/care", label: "每日动态" },
        { path: "/family/health", label: "健康记录" },
        { path: "/family/bills", label: "账单支付" },
        { path: "/family/feedback", label: "服务反馈" },
        { path: "/family/notices", label: "通知中心" }
      ];
    },
    activeMenu() {
      return this.$route.path;
    },
    roleLabel() {
      if (this.role === "ADMIN") return "管理员";
      if (this.role === "NURSE") return "护工";
      return "家属";
    }
  },
  methods: {
    async handleLogout() {
      try {
        await logout();
      } catch (e) {
        // ignore
      }
      localStorage.removeItem("token");
      localStorage.removeItem("role");
      this.$router.push("/login");
    }
  }
};
</script>
