<template>
  <el-card class="box-card" shadow="never">
      <h3>基本信息</h3>

      <el-descriptions :column="2"  border >
          <el-descriptions-item label="服务商名称">{{ serviceProviderName }}</el-descriptions-item>
          <el-descriptions-item label="服务商编码">{{ serviceProviderCode }}</el-descriptions-item>
        <el-descriptions-item label="官方认证">
          <el-tag v-if="officialCertification" type="success">
            <el-icon name="Select"></el-icon> 是
          </el-tag>
          <el-tag v-else type="info">
            <el-icon name="CloseBold"></el-icon> 否
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="状态">
          <el-tag :type="status === '启用' ? 'success' : 'danger'">
            {{ status === '启用' ? '启用' : '禁用' }}
          </el-tag>
        </el-descriptions-item>
          <el-descriptions-item label="模型种类">{{ serviceProviderType }}</el-descriptions-item>
          <el-descriptions-item label="描述">{{ description }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ createTime }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ updateTime }}</el-descriptions-item>
          <el-descriptions-item label="创建人">{{ createdBy }}</el-descriptions-item>
          <el-descriptions-item label="排序值">{{ sort }}</el-descriptions-item>
      </el-descriptions>

      <h3>附加信息</h3>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="联系方式">{{ contactInfo.contact }}</el-descriptions-item>
      <el-descriptions-item label="官网">{{ contactInfo.website }}</el-descriptions-item>
      <el-descriptions-item label="API文档URL">{{ contactInfo.apiDocUrl }}</el-descriptions-item>
      <el-descriptions-item label="定价页面URL">{{ contactInfo.pricingUrl }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ contactInfo.remark }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 示例数据
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 serviceProviderCode = "openai"
const officialCertification = true
const description = "Openai"

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: "内部备注：无特殊说明"
}


</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}

</style>
