<script setup>
import { ref } from 'vue'
import UserManagementTab from '@/components/settings/UserManagementTab.vue'
import RoleManagementTab from '@/components/settings/RoleManagementTab.vue'
import PermissionManagementTab from '@/components/settings/PermissionManagementTab.vue'
import UnitManagementTab from '@/components/settings/UnitManagementTab.vue'

const tabs = [
  { key: 'users', label: '用户管理' },
  { key: 'roles', label: '角色管理' },
  { key: 'permissions', label: '权限管理' },
  { key: 'units', label: '单位管理' },
  { key: 'departments', label: '部门管理' },
]
const active = ref('users')
</script>

<template>
  <section class="view is-visible settings-view">
    <div class="settings-card">
      <header class="settings-header">
        <h2>权限管理</h2>
        <div class="settings-tabs">
          <button
            v-for="tab in tabs"
            :key="tab.key"
            type="button"
            class="settings-tab"
            :class="{ active: active === tab.key }"
            @click="active = tab.key"
          >{{ tab.label }}</button>
        </div>
      </header>

      <div class="settings-body">
        <UserManagementTab v-if="active === 'users'" />
        <RoleManagementTab v-else-if="active === 'roles'" />
        <PermissionManagementTab v-else-if="active === 'permissions'" />
        <UnitManagementTab v-else-if="active === 'units'" category="company" />
        <UnitManagementTab v-else-if="active === 'departments'" category="department" />
      </div>
    </div>
  </section>
</template>

<style scoped>
.settings-view {
  padding: 20px;
}
.settings-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
}
.settings-header {
  padding: 18px 22px 0;
  border-bottom: 1px solid var(--line);
}
.settings-header h2 {
  margin: 0 0 12px;
  font-size: 18px;
}
.settings-tabs {
  display: flex;
  gap: 22px;
}
.settings-tab {
  height: 38px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.settings-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 700;
}
.settings-tab:hover:not(.active) {
  color: var(--ink);
}
.settings-body {
  padding: 18px 22px 22px;
  overflow: auto;
  min-height: 0;
}
</style>
