<template>
  <div class="service-provider-detail">

    <el-tabs  tab-position="top" v-model="activeTab" type="card">
      <el-tab-pane label="基本信息" name="info1">
        <BasicInfo v-model="formData.info1" />
      </el-tab-pane>
      <el-tab-pane label="模型列表" name="info2">
        <ModleList v-model="formData.info2" />
      </el-tab-pane>
      <el-tab-pane label="配置历史" name="info3">
        <ConfigHistory v-model="formData.info3" />
      </el-tab-pane>
      <el-tab-pane label="调用统计" name="info4">
        <CallStatistics v-model="formData.info4" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BasicInfo from "@/views/modleServiceProvideDetail/components/BasicInfo.vue";
import ModleList from "@/views/modleServiceProvideDetail/components/ModleList.vue";
import ConfigHistory from "@/views/modleServiceProvideDetail/components/ConfigHistory.vue";
import CallStatistics from "@/views/modleServiceProvideDetail/components/CallStatistics.vue";

const activeTab = 'info1'
const formData = ref({
  info1: { name: '', desc: '' },
  info2: { phone: '', email: '' },
  info3: { address: '', remark: '' },
  info4: { address: '', remark: '' }
})
// 示例数据
const serviceProviderName = "OpenAI"
const serviceProviderType = "API服务"
const status = "启用"
const createTime = "2023-05-18 14:59:13"
const updateTime = "2023-05-18 14:59:13"
const createdBy = "admin"
const sort = 0

const apiConfig = {
  defaultApiUrl: "https://api.openai.com/v1",
  authType: "API_KEY",
  requestHeaderKey: "Authorization",
  requestHeaderValuePrefix: "Bearer",
  extraConfig: "{ timeout: 5000, proxy: 'http://proxy.example.com' }"
}

const contactInfo = {
  contact: "contact@example.com",
  website: "https://openai.com",
  apiDocUrl: "https://openai.com/docs",
  pricingUrl: "https://openai.com/pricing",
  description: "OpenAI is an AI research and deployment company. Our mission is to ensure that artificial general intelligence benefits all of humanity.",
  remark: "内部备注：无特殊说明"
}

const relatedModels = [
  { modelName: "DALL·E", modelVersion: "v1", modelId: "1234567890", status: "启用", createTime: "2023-05-18 14:59:13" },
  { modelName: "GPT-3", modelVersion: "v3", modelId: "0987654321", status: "启用", createTime: "2023-05-18 14:59:13" }
]
</script>

<style scoped>
.service-provider-detail {
  padding: 20px;
}
.box-card {
  margin-bottom: 20px;
}
</style>
