<script lang="ts" setup>
/**
 * 系统配置通用壳：右侧二级 Tab，和 AI 模块同一套交互
 * 各 Tab 仍是独立面板，自己管 load/save，底部保存条不互相覆盖
 */
import type { Component } from 'vue';

import { onMounted, ref } from 'vue';

import { Tabs } from 'ant-design-vue';

export interface ModuleTabItem {
  key: string;
  title: string;
  component: Component;
}

const props = defineProps<{
  moduleKey: string;
  tabs: ModuleTabItem[];
}>();

const subTab = ref(props.tabs[0]?.key || '');

function storageKey() {
  return `system_config_${props.moduleKey}_sub_tab`;
}

function onSubTabChange(key: number | string) {
  subTab.value = String(key);
  localStorage.setItem(storageKey(), String(key));
}

onMounted(() => {
  const stored = localStorage.getItem(storageKey());
  if (stored && props.tabs.some((tab) => tab.key === stored)) {
    subTab.value = stored;
  }
});
</script>

<template>
  <div class="cfg-panel">
    <div class="cfg-panel-body module-tabs-body">
      <Tabs :active-key="subTab" @change="onSubTabChange">
        <Tabs.TabPane v-for="tab in tabs" :key="tab.key" :tab="tab.title">
          <component :is="tab.component" />
        </Tabs.TabPane>
      </Tabs>
    </div>
  </div>
</template>

<style scoped>
.module-tabs-body {
  display: flex;
  flex-direction: column;
  padding: 8px 0 0;
  overflow: hidden;
}

.module-tabs-body :deep(.ant-tabs) {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.module-tabs-body :deep(.ant-tabs-nav) {
  flex-shrink: 0;
  margin: 0 20px;
}

.module-tabs-body :deep(.ant-tabs-content-holder) {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.module-tabs-body :deep(.ant-tabs-content),
.module-tabs-body :deep(.ant-tabs-tabpane-active) {
  height: 100%;
}

/* 子面板铺满 Tab，自己滚内容、底栏固定 */
.module-tabs-body :deep(.cfg-panel) {
  height: 100%;
  min-height: 0;
}
</style>
