<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5"><el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['workflow:lobster:edit']">注册接口</el-button></el-col>
      <el-col :span="1.5"><el-button type="warning" plain icon="el-icon-refresh" size="mini" @click="handleRefreshCache" v-hasPermi="['workflow:lobster:edit']">刷新缓存</el-button></el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table border v-loading="loading" :data="list">
      <el-table-column label="接口标识" align="center" prop="apiKey" />
      <el-table-column label="接口名称" align="center" prop="apiName" />
      <el-table-column label="分类" align="center" prop="category" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.category==='ai'?'success':scope.row.category==='internal'?'':'warning'" size="small">{{ scope.row.category }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="提供商" align="center" prop="provider" width="100" />
      <el-table-column label="Base URL" align="center" prop="baseUrl" show-overflow-tooltip />
      <el-table-column label="认证方式" align="center" prop="authType" width="80" />
      <el-table-column label="超时(ms)" align="center" prop="timeout" width="80" />
      <el-table-column label="优先级" align="center" prop="priority" width="60" />
      <el-table-column label="是否备用" align="center" prop="isBackup" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isBackup" type="warning" size="small">备用</el-tag>
          <el-tag v-else type="success" size="small">主用</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="注册新接口" :visible.sync="addVisible" width="600px" append-to-body>
      <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px">
        <el-form-item label="接口标识" prop="apiKey"><el-input v-model="addForm.apiKey" placeholder="如: sms_send" /></el-form-item>
        <el-form-item label="接口名称" prop="apiName"><el-input v-model="addForm.apiName" placeholder="如: 短信发送接口" /></el-form-item>
        <el-form-item label="分类" prop="category">
          <el-select v-model="addForm.category"><el-option label="Webhook" value="webhook" /><el-option label="第三方" value="third-party" /><el-option label="内部" value="internal" /><el-option label="AI" value="ai" /></el-select>
        </el-form-item>
        <el-form-item label="提供商"><el-input v-model="addForm.provider" /></el-form-item>
        <el-form-item label="Base URL" prop="baseUrl"><el-input v-model="addForm.baseUrl" placeholder="https://api.example.com" /></el-form-item>
        <el-form-item label="认证方式"><el-select v-model="addForm.authType"><el-option label="Bearer" value="bearer" /><el-option label="API Key" value="apikey" /><el-option label="OAuth2" value="oauth2" /><el-option label="无认证" value="none" /></el-select></el-form-item>
        <el-form-item label="超时(ms)"><el-input-number v-model="addForm.timeout" :min="1000" :max="30000" /></el-form-item>
        <el-form-item label="优先级"><el-input-number v-model="addForm.priority" :min="0" :max="10" /></el-form-item>
        <el-form-item label="是否备用"><el-switch v-model="addForm.isBackup" :active-value="1" :inactive-value="0" /></el-form-item>
        <el-form-item label="描述"><el-input v-model="addForm.description" type="textarea" :rows="2" /></el-form-item>
      </el-form>
      <div slot="footer"><el-button @click="addVisible=false">取消</el-button><el-button type="primary" @click="submitAdd">注册</el-button></div>
    </el-dialog>
  </div>
</template>
<script>
import { listApiRegistry, registerApi, refreshApiCache } from '@/api/workflow/lobster'
export default {
  name: 'LobsterApiRegistry',
  data() {
    return { loading: false, showSearch: true, list: [], addVisible: false,
      addForm: { apiKey:'', apiName:'', category:'third-party', provider:'', baseUrl:'', authType:'bearer', authConfig:'', timeout:5000, priority:0, isBackup:0, description:'' },
      addRules: { apiKey: [{ required: true, message: '标识不能为空', trigger: 'blur' }], apiName: [{ required: true, message: '名称不能为空', trigger: 'blur' }] }
    }
  },
  created() { this.getList() },
  methods: {
    getList() { this.loading = true; listApiRegistry().then(res => { this.list = res.data || []; this.loading = false }).catch(() => { this.loading = false }) },
    handleAdd() { this.addVisible = true },
    submitAdd() { this.$refs.addForm.validate(v => { if (!v) return; registerApi(this.addForm).then(() => { this.$message.success('注册成功'); this.addVisible = false; this.getList() }) }) },
    handleRefreshCache() { refreshApiCache().then(() => { this.$message.success('缓存已刷新') }) }
  }
}
</script>
