<template>
  <div class="ai-provider">
    <el-card>
      <div slot="header" class="card-header">
        <span>大模型供应商</span>
      </div>

      <el-alert
        title="大模型供应商说明"
        description="当前可用的大模型供应商由总后台统一配置管理，租户可直接使用已启用的模型进行AI对话和工作流执行。"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 20px"
      />

      <el-table :data="tableData" v-loading="loading" border>
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="providerName" label="供应商名称" min-width="120" />
        <el-table-column prop="providerCode" label="供应商编码" width="100" />
        <el-table-column prop="modelName" label="模型名称" width="150" />
        <el-table-column prop="apiEndpoint" label="API地址" min-width="200" show-overflow-tooltip />
        <el-table-column prop="maxTokens" label="最大Token" width="100" align="center" />
        <el-table-column prop="temperature" label="温度" width="80" align="center" />
        <el-table-column prop="isDefault" label="默认" width="80" align="center">
          <template slot-scope="{ row }">
            <el-tag :type="row.isDefault === 1 ? 'success' : 'info'" size="small">
              {{ row.isDefault === 1 ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="状态" width="80" align="center">
          <template slot-scope="{ row }">
            <el-tag :type="row.enabled === 1 ? 'success' : 'danger'" size="small">
              {{ row.enabled === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { aiProviderApi } from '@/api/company/aiProvider'

export default {
  name: 'AiProvider',
  data() {
    return {
      loading: false,
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const res = await aiProviderApi.getList()
        this.tableData = res.data || []
      } catch (error) {
        this.$message.error('获取列表失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.card-header { display: flex; justify-content: space-between; align-items: center; }
</style>
