<!--
 * @Author: 赵丽婷
 * @Date: 2025-11-10 10:30:43
 * @LastEditors: 赵丽婷
 * @LastEditTime: 2025-12-04 14:10:55
 * @FilePath: \LinkMed\linkmed-vue3\src\pages\Settings.vue
 * @Description: 
 * Copyright (c) 2025 by 北京连心医疗科技有限公司, All Rights Reserved. 
-->
<template>
  <div class="settings-root">
    <div :class="['settings-sidebar-wrapper', { 'is-collapsed': isCollapsed }]">
      <SettingsSidebar
        class="settings-sidebar"
        :activeKey="activeKey"
        :isCollapsed="isCollapsed"
        @select="handleSelect"
        @toggle="toggleSidebar"
      />
    </div>
    <div class="settings-content">
      <SettingsPanel :activeKey="activeKey" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { DArrowLeft, DArrowRight } from "@element-plus/icons-vue";
import SettingsSidebar from "@/components/Settings/SettingsSidebar.vue";
import SettingsPanel from "@/components/Settings/SettingsPanel.vue";

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

const activeKey = ref("general");
const isCollapsed = ref(false);

const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value;
};

const handleSelect = (key: string) => {
  if (key === "helpCenter") {
    router.push({ name: "HelpCenter" });
  } else {
    activeKey.value = key;
  }
};

// 根据URL参数设置默认标签页
onMounted(() => {
  const tab = route.query.tab as string;
  if (
    tab &&
    [
      "general", // 通用设置
      "shortcut", // 快捷键设置
      "profile", // 账号信息
      "authentication", // 信息认证
      "membersRecords", // 充值中心
      "memberReferral", // 会员推荐
      // "knowledge", // 暂时隐藏
      // "ai", // 暂时隐藏
      // "apikey", // 暂时隐藏
    ].includes(tab)
  ) {
    activeKey.value = tab;
  }
});

// 监听路由参数变化
watch(
  () => route.query.tab,
  (newTab) => {
    if (
      newTab &&
      [
        "general",
        "shortcut",
        "profile",
        "authentication",
        "membersRecords",
        "memberReferral",
        // "knowledge", // 暂时隐藏
        // "ai", // 暂时隐藏
        // "apikey", // 暂时隐藏
      ].includes(newTab as string)
    ) {
      activeKey.value = newTab as string;
    }
  },
);

// 监听 activeKey 变化，同步更新路由参数
watch(activeKey, (newKey) => {
  // 只有当路由参数与当前 activeKey 不一致时才更新路由
  if (route.query.tab !== newKey) {
    router
      .replace({
        name: "Settings",
        query: { tab: newKey },
      })
      .catch((err) => {
        if (err.name !== "NavigationDuplicated") {
          console.error("Navigation error:", err);
        }
      });
  }
});
</script>

<style scoped lang="scss">
.settings-root {
  display: flex;
  height: 100%;
  width: 100%;
  background: var(--color-bg, #18181a);
}

.settings-sidebar-wrapper {
  display: flex;
  flex-direction: column;
  width: 260px;
  background: var(--color-card, #232323);
  border-right: 1px solid var(--color-border, #333);
  transition: width 0.3s ease;
  overflow: hidden;

  &.is-collapsed {
    width: 64px;
    min-width: 64px;
  }
}

.settings-sidebar {
  flex: 1;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  border-right: none !important;
}

.settings-content {
  flex: 1;
  min-width: 0;
  background: var(--color-bg, #18181a);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

@media (max-width: 1024px) {
  .settings-sidebar-wrapper {
    // 平板模式下的特殊样式可以放在这里
  }
}
</style>