<template>
  <div class="model-config-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>模型配置</h2>
      <p>配置主模型关联的rerank/embedding模型信息</p>
    </div>

    <!-- 核心表单卡片（调整为80%宽度） -->
    <el-card
      class="config-form-card"
      shadow="hover"
      header-class="card-header"
    >
      <template #header>
        <div class="card-title">
          <el-icon class="title-icon"><Setting /></el-icon>
          <span>模型关联配置</span>
        </div>
      </template>

      <el-form
        ref="configFormRef"
        :model="form"
        :rules="rules"
        label-width="110px"
        class="main-form"
        size="default"
      >
        <!-- 主模型 -->
        <el-form-item label="主模型" prop="model" class="form-item">
          <el-select
            v-model="form.model"
            placeholder="请选择主模型"
            clearable
            class="form-select"
            prefix-icon="Select"
            filterable
          >
            <el-option
              v-for="model in modelList"
              :key="model.id"
              :label="model.model"
              :value="model.model"
              class="option-item"
            />
          </el-select>
        </el-form-item>

        <!-- rerank模型（下拉选择） -->
        <el-form-item label="rerank模型" prop="rerankModel" class="form-item">
          <el-select
            v-model="form.rerankModel"
            placeholder="请选择rerank模型"
            clearable
            class="form-select"
            prefix-icon="Select"
            filterable
          >
            <el-option
              v-for="rerank in rerankList"
              :key="rerank.id"
              :label="rerank.model"
              :value="rerank.model"
              class="option-item"
            />
          </el-select>
        </el-form-item>

        <!-- embedding模型（下拉选择） -->
        <el-form-item label="embedding模型" prop="embeddingModel" class="form-item">
          <el-select
            v-model="form.embeddingModel"
            placeholder="请选择embedding模型"
            clearable
            class="form-select"
            prefix-icon="Select"
            filterable
          >
            <el-option
              v-for="embedding in embeddingList"
              :key="embedding.id"
              :label="embedding.model"
              :value="embedding.model"
              class="option-item"
            />
          </el-select>
        </el-form-item>

        <!-- 保存按钮区域（调整为右对齐） -->
        <el-form-item class="form-btn-group">
          <el-button
            type="primary"
            :loading="buttonLoading"
            @click="submitForm"
            class="save-btn"
            icon="Check"
          >
            保存配置
          </el-button>
          <el-button
            type="default"
            @click="resetForm"
            class="reset-btn"
            icon="Refresh"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup name="ModelConfigForm" lang="ts">
import { getConfig, updateConfig, listModel,getSysConfig,editSysConfig } from '@/api/system/modelConfig';
import { ConfigVO, ConfigForm,ConfigModelVO } from '@/api/system/modelConfig/types';
import { Setting, Monitor, Select, Check, Refresh } from '@element-plus/icons-vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

// 按钮加载状态
const buttonLoading = ref(false);
// 表单Ref
const configFormRef = ref<ElFormInstance>();
// rerank/embedding模型下拉列表
const rerankList = ref<ConfigVO[]>([]);
const modelList = ref<ConfigVO[]>([]);
const embeddingList = ref<ConfigVO[]>([]);

// 表单初始数据
const initFormData: ConfigForm = {
  id: undefined,          // 主键（用于修改时匹配数据）
  model: undefined,       // 主模型
  rerankModel: undefined,// rerank模型
  embeddingModel: undefined// embedding模型
};

// 表单数据 + 验证规则
const data = reactive({
  form: { ...initFormData },
  rules: {
    model: [
      { required: true, message: "请选择主模型", trigger: "change" }
    ],
    rerankModel: [
      { required: true, message: "请选择rerank模型", trigger: "change" }
    ],
    embeddingModel: [
      { required: true, message: "请选择embedding模型", trigger: "change" }
    ]
  }
});
const { form, rules } = toRefs(data);
/** 加载rerank模型下拉数据 */
const getModelList = async () => {
  const params = { modelType: "1" }; // 匹配rerank模型类型
  const res = await listModel(params);
  modelList.value = res.data || [];
};

/** 加载rerank模型下拉数据 */
const getRerankList = async () => {
  const params = { modelType: "2" }; // 匹配rerank模型类型
  const res = await listModel(params);
  rerankList.value = res.data || [];
};

/** 加载embedding模型下拉数据 */
const getEmbeddingList = async () => {
  const params = { modelType: "3" }; // 匹配embedding模型类型
  const res = await listModel(params);
  embeddingList.value = res.data || [];
};

/** 获取当前模型配置（假设是单条主模型数据，可根据实际业务调整ID） */
const getCurrentConfig = async () => {
  // 注意：这里的ID需要替换为你实际的主模型配置ID（或根据业务逻辑获取唯一主模型）
  const MAIN_MODEL_ID = 1;
  try {
    const res = await getSysConfig();
    Object.assign(form.value, res.data);
  } catch (err) {
    proxy?.$modal.msgError("加载配置失败，请检查数据");
  }
};

/** 表单重置 */
const resetForm = () => {
  form.value = { ...initFormData };
  configFormRef.value?.resetFields();
};

/** 提交保存 */
const submitForm = () => {
  configFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      try {
        // 调用修改接口（若业务需要新增，可加判断：form.value.id ? update : add）
        await editSysConfig(form.value);
        proxy?.$modal.msgSuccess("配置保存成功！");
      } catch (err) {
        proxy?.$modal.msgError("保存失败，请重试");
      } finally {
        buttonLoading.value = false;
      }
    }
  });
};

// 页面挂载时加载数据
onMounted(async () => {
  await Promise.all([
    getRerankList(),    // 加载rerank下拉
    getEmbeddingList(), // 加载embedding下拉
    getCurrentConfig(),  // 加载当前配置数据
    getModelList()
  ]);
});
</script>

<style scoped>
/* 页面整体样式 */
.model-config-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 40px 20px; /* 增加上下内边距，适配80%宽度 */
  box-sizing: border-box;
}

/* 页面标题（与80%宽度卡片对齐） */
.page-header {
  width: 80%;
  max-width: 1400px; /* 限制最大宽度，避免超宽屏拉伸 */
  margin: 0 auto 30px;
}

.page-header h2 {
  color: #1f2937;
  font-size: 26px; /* 放大标题字号 */
  font-weight: 600;
  margin: 0 0 10px;
}

.page-header p {
  color: #6b7280;
  font-size: 15px;
  margin: 0;
  line-height: 1.5;
}

/* 表单卡片（核心调整：80%宽度） */
.config-form-card {
  width: 80%;          /* 改为80%宽度 */
  max-width: 1400px;   /* 限制最大宽度，适配超宽屏 */
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: none;
  overflow: hidden;
  transition: all 0.3s ease;
}

.config-form-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 卡片头部 */
.card-header {
  background-color: #409eff;
  padding: 20px 30px; /* 增加头部内边距，适配宽布局 */
  border-bottom: none;
}

.card-title {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 18px; /* 放大卡片标题 */
  font-weight: 500;
}

.title-icon {
  margin-right: 10px;
  font-size: 20px;
}

/* 主表单样式（适配宽布局） */
.main-form {
  padding: 40px 30px; /* 增加表单内边距，布局更舒展 */
}

/* 表单项样式（适配宽布局） */
.form-item {
  margin-bottom: 24px; /* 增加表单项间距 */
  transition: all 0.2s ease;
}

/* 输入框/下拉框样式（适配宽布局） */
.form-input, .form-select {
  width: 100%;
  max-width: 600px; /* 限制输入框最大宽度，避免过宽 */
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 15px; /* 放大输入框文字 */
  padding: 12px 16px; /* 增加输入框内边距 */
  transition: all 0.3s ease;
}

.form-input:disabled {
  background-color: #f9fafb;
  color: #4b5563;
  border-color: #e5e7eb;
}

.form-input:focus, .form-select:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
  outline: none;
}

.form-input:hover, .form-select:hover:not(.is-disabled) {
  border-color: #94a3b8;
}

/* 下拉选项样式 */
.option-item {
  padding: 10px 16px;
  font-size: 15px;
}

.option-item:hover {
  background-color: #f1f5f9;
}

/* 按钮组样式（核心：右对齐） */
.form-btn-group {
  margin-top: 40px;
  display: flex;
  gap: 15px;
  justify-content: flex-end; /* 改为右对齐 */
  padding-right: calc((100% - 600px) / 2); /* 与输入框右对齐 */
}

.save-btn {
  padding: 12px 30px; /* 放大按钮尺寸 */
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  background-color: #409eff;
  border: none;
  transition: all 0.3s ease;
}

.save-btn:hover {
  background-color: #3390ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
}

.save-btn:active {
  transform: translateY(0);
}

.reset-btn {
  padding: 12px 30px; /* 放大按钮尺寸 */
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid #d1d5db;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  border-color: #94a3b8;
  background-color: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.reset-btn:active {
  transform: translateY(0);
}

/* 响应式适配（适配宽布局的移动端） */
@media (max-width: 1200px) {
  .config-form-card {
    width: 90%; /* 大屏缩小为90% */
  }
  .page-header {
    width: 90%;
  }
}

@media (max-width: 768px) {
  .model-config-page {
    padding: 20px 10px;
  }

  .config-form-card {
    width: 95%; /* 移动端几乎全屏 */
  }
  .page-header {
    width: 95%;
  }

  .page-header h2 {
    font-size: 22px;
  }

  .main-form {
    padding: 20px 16px;
  }

  .form-input, .form-select {
    max-width: 100%; /* 移动端输入框全屏宽 */
  }

  .form-btn-group {
    flex-direction: column;
    padding-right: 0;
    gap: 10px;
  }

  .save-btn, .reset-btn {
    width: 100%;
  }
}
</style>
