<script setup lang="ts">
const activeName = ref("基本信息")
</script>

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="基本信息" name="基本信息">
      <el-form class="form-label">
        <el-form-item label="服务商">
          <el-select>
            <el-option/>
          </el-select>
        </el-form-item>
        <el-form-item label="模型名称">
          <el-select placeholder="请输入模型名称,如：GPT-4">
            <el-option/>
          </el-select>
        </el-form-item>
        <el-form-item label="模型类型">
          <el-select >
            <el-option/>
          </el-select>
        </el-form-item>
        <el-form-item label="模型版本">
          <el-select placeholder="请输入模型版本，如：gpt-4-1106-preview">
            <el-option/>
          </el-select>
          <span>官方API调用时使用的模型标识符</span>
        </el-form-item>
        <el-form-item label="优先级">
          <el-select placeholder="请输入模型版本，如：gpt-4-1106-preview">
            <el-option/>
          </el-select>
          <span>数值越大优先级越高</span>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch active-text="启用" size="large" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" placeholder="请输入描述状态"></el-input>
        </el-form-item>
        <div class="form-btn">
          <el-form-item>
            <el-button>取消</el-button>
            <el-button type="primary">确定</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="API配置" name="API配置">
      <el-form class="form-label">
        <el-form-item label="API基础地址">
          <el-input/>
          <span>默认继承服务配置，可单独设置</span>
        </el-form-item>
        <el-form-item label="API密钥">
          <el-input type="password"/>
          <span>默认继承服务商配置，可单独设置</span>
        </el-form-item>
        <el-form-item label="请求超过时间（秒）">
          <el-input/>
        </el-form-item>
        <el-form-item label="重试次数">
          <el-input/>
        </el-form-item>
        <el-form-item label="请求方法">
          <el-select>
            <el-option/>
          </el-select>
        </el-form-item>
        <el-form-item label="请求头">
          <el-input type="textarea"/>
          <span>JSON格式,支持变量替换</span>
        </el-form-item>
        <div class="form-btn">
          <el-form-item>
            <el-button>取消</el-button>
            <el-button type="primary">确定</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="高级配置" name="高级配置">
      <el-form class="form-label">
        <el-form-item label="请求模板">
          <el-input type="textarea"/>
          <span>JSON格式，支持参数替换</span>
        </el-form-item>
        <el-form-item label="响应解析器">
          <el-select>
            <el-option/>
          </el-select>
        </el-form-item>
        <el-form-item label="自定义解析器代码">
          <el-input type="textarea"/>
          <span>选择自定义解析器时可编辑</span>
        </el-form-item>
        <el-form-item label="Token计算器">
          <el-select>
            <el-option/>
          </el-select>
        </el-form-item>
        <div class="form-btn">
          <el-form-item>
            <el-button>取消</el-button>
            <el-button type="primary">确定</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped lang="scss">
.form-label{
  :deep(.el-form-item){
    display: block;
  }
  // 注释
  span{
    color: #abadb4;
    font-size: 12px;
  }
}
.form-btn{
  display: flex;
  justify-content: flex-end;
}

</style>
