<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import ContractReviewSettings from '@/views/contract-review-settings/index.vue';
import ModelConfig from '@/views/foreground-setting/modules/model-config/index.vue';
import UserConfig from '@/views/system/user/index.vue';
// import DeptConfig from '@/views/system/dept/index.vue';
import RoleConfig from '@/views/system/role/index.vue';
import MenuConfig from '@/views/system/menu/index.vue';

defineOptions({
  name: 'ForegroundSetting'
});

const show = defineModel<boolean>('show', { required: true });

const activeMenu = ref('system');

const menuItems = [
  { key: 'system', label: '合同审查规则设置', icon: 'ep:setting', component: ContractReviewSettings },
  { key: 'model', label: '模型设置', icon: 'tabler:box-model', component: ModelConfig },
  { key: 'user', label: '用户列表', icon: 'ep:user', component: UserConfig },
  // { key: 'dept', label: '部门列表', icon: 'ep:user-filled', component: DeptConfig },
  { key: 'role', label: '角色配置', icon: 'ep:lock', component: RoleConfig },
  { key: 'menu', label: '菜单管理', icon: 'ep:menu', component: MenuConfig }
];

function handleClose() {
  show.value = false;
}

function handleKeydown(e: KeyboardEvent) {
  if (e.key === 'Escape') {
    handleClose();
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleKeydown);
});

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown);
});
</script>

<template>
  <Teleport to="body">
    <Transition name="setting-fade">
      <div v-if="show" class="fixed inset-0 z-[101] overflow-auto">
        <!-- 毛玻璃背景 -->
        <div class="absolute inset-0 bg-white/80 backdrop-blur-md"></div>

        <!-- 内容区域 -->
        <div class="relative h-full w-full">
          <div class="mx-auto h-full w-85% transition-all-200 max-[1700px]:(w-98%)">
            <div class="h-full flex">
              <!-- 左侧菜单 -->
              <div class="min-w-200px rounded-md p-4">
                <h2 class="mb-6 text-xl text-[#333] font-bold">设置</h2>
                <div class="space-y-2">
                  <div
                    v-for="item in menuItems"
                    :key="item.key"
                    class="relative flex cursor-pointer items-center gap-2 rounded-md px-4 py-2 transition-colors"
                    :class="[
                      activeMenu === item.key
                        ? 'bg-[#f6f9ff] text-[#086AFB]'
                        : 'text-[#333] hover:bg-[#f6f9ff] hover:text-[#086AFB]'
                    ]"
                    @click="activeMenu = item.key"
                  >
                    <div v-if="activeMenu === item.key" class="h-5 w-[3px] bg-[#086AFB]"></div>
                    <div v-else class="h-5 w-[3px]"></div>
                    <SvgIcon
                      :icon="item.icon"
                      class="h-5 w-5"
                      :class="activeMenu === item.key ? 'text-[#086AFB]' : 'text-[#666]'"
                    />
                    <span>{{ item.label }}</span>
                  </div>
                </div>
              </div>

              <!-- 右侧内容 -->
              <div class="flex-col-stretch flex-1 overflow-auto bg-white p-6">
                <div class="mb-6 flex items-center justify-between">
                  <h3 class="text-xl text-[#333] font-bold">
                    {{ menuItems.find(item => item.key === activeMenu)?.label }}
                  </h3>
                  <div class="flex-y-center cursor-pointer gap-x-10px" @click="handleClose">
                    <NFlex
                      justify="center"
                      align="center"
                      class="mb-1 h-34px w-34px rounded-10px bg-[#F2F4F7] transition-shadow hover:shadow-md"
                    >
                      <SvgIcon icon="ep:close-bold" class="text-icon text-[#666666]"></SvgIcon>
                    </NFlex>
                    <span class="ml-1 text-[#666666]">ESC</span>
                  </div>
                </div>

                <!-- 配置内容 -->

                <Transition name="fade" mode="out-in">
                  <component :is="menuItems.find(item => item.key === activeMenu)?.component" class="flex-1"></component>
                </Transition>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.setting-fade-enter-active,
.setting-fade-leave-active {
  transition: all 0.3s ease;
}

.setting-fade-enter-from,
.setting-fade-leave-to {
  opacity: 0;
}

:deep(.setting-content) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  padding: 20px;
}
</style>
