<script setup lang="ts">
import { ref } from 'vue'
import { ElTabs, ElTabPane } from 'element-plus'
// 移除类型导入
import LLMConfigList from '../components/LLMConfigList.vue'
import LLMConfigForm from '../components/LLMConfigForm.vue'
import SensitiveWordManager from '../components/SensitiveWordManager.vue'
import SensitivePersonManager from '../components/SensitivePersonManager.vue'
import TextProcessConfig from '../components/TextProcessConfig.vue'

// 当前激活的标签页
const activeTab = ref('llm-config')

// 表单相关
const formVisible = ref(false)
const editData = ref<any>()

// 处理编辑
const handleEdit = (data: any) => {
  editData.value = data
  formVisible.value = true
}

// 处理表单成功
const handleFormSuccess = () => {
  formVisible.value = false
  editData.value = undefined
  // 刷新列表
  if (listRef.value) {
    listRef.value.refresh()
  }
}

// 列表引用
const listRef = ref()
</script>

<template>
  <div class="llm-management">
    <el-tabs v-model="activeTab" type="border-card" class="management-tabs">
      <!-- 大模型配置 -->
      <el-tab-pane label="大模型配置" name="llm-config">
        <LLMConfigList :on-edit="handleEdit" ref="listRef" />
      </el-tab-pane>

      <!-- 敏感词管理 -->
      <el-tab-pane label="敏感词管理" name="sensitive-word">
        <SensitiveWordManager />
      </el-tab-pane>

      <!-- 敏感人物管理 -->
      <el-tab-pane label="敏感人物管理" name="sensitive-person">
        <SensitivePersonManager />
      </el-tab-pane>

      <!-- 文本处理配置 -->
      <el-tab-pane label="文本处理配置" name="text-process">
        <TextProcessConfig />
      </el-tab-pane>
    </el-tabs>

    <!-- 大模型配置表单 -->
    <LLMConfigForm v-model:visible="formVisible" :edit-data="editData" @success="handleFormSuccess" />
  </div>
</template>

<style lang="scss" scoped>
.llm-management {
  .management-tabs {
    min-height: 600px;

    :deep(.el-tabs__content) {
      padding: 20px;
    }
  }
}
</style>
