<template>
  <div class="admin-api-keys">
    <h2>API密钥管理</h2>
    <div class="api-keys-actions">
      <el-button type="primary" @click="showCreateDialog">创建API密钥</el-button>
    </div>
    <el-table :data="apiKeys" style="width: 100%" class="api-keys-table">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="密钥名称" />
      <el-table-column prop="key" label="API密钥" show-overflow-tooltip />
      <el-table-column prop="user_id" label="用户ID" width="100" />
      <el-table-column prop="is_active" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.is_active ? 'success' : 'danger'">{{ scope.row.is_active ? '活跃' : '已停用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="expires_at" label="过期时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.expires_at) || '永不过期' }}
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" @click="toggleApiKey(scope.row.id, !scope.row.is_active)">{{ scope.row.is_active ? '停用' : '激活' }}</el-button>
          <el-button size="small" type="danger" @click="deleteApiKey(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 创建API密钥对话框 -->
    <el-dialog v-model="createDialogVisible" title="创建API密钥">
      <el-form :model="createForm" label-width="100px">
        <el-form-item label="密钥名称" required>
          <el-input v-model="createForm.name" placeholder="请输入密钥名称" />
        </el-form-item>
        <el-form-item label="用户ID" required>
          <el-input v-model="createForm.user_id" type="number" placeholder="请输入用户ID" />
        </el-form-item>
        <el-form-item label="过期时间">
          <el-date-picker
            v-model="createForm.expires_at"
            type="datetime"
            placeholder="选择过期时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="createDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="createApiKey">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

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

const apiKeys = ref<any[]>([  
  {
    id: 1,
    user_id: 1,
    key: 'sk-1234567890abcdef1234567890abcdef',
    name: '管理员密钥',
    expires_at: null,
    is_active: true,
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString()
  }
])

const createDialogVisible = ref(false)

const createForm = ref({
  name: '',
  user_id: 1,
  expires_at: null
})

const formatDate = (dateString?: string | null) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString()
}

const showCreateDialog = () => {
  createForm.value = {
    name: '',
    user_id: 1,
    expires_at: null
  }
  createDialogVisible.value = true
}

const createApiKey = async () => {
  // 这里应该调用后端API创建API密钥
  // 暂时只做前端模拟
  const newApiKey = {
    id: Date.now(),
    user_id: createForm.value.user_id,
    key: `sk-${Math.random().toString(36).substring(2, 42)}`,
    name: createForm.value.name,
    expires_at: createForm.value.expires_at,
    is_active: true,
    created_at: new Date().toISOString(),
    updated_at: new Date().toISOString()
  }
  apiKeys.value.push(newApiKey)
  createDialogVisible.value = false
}

const toggleApiKey = async (id: number, isActive: boolean) => {
  // 这里应该调用后端API更新API密钥状态
  // 暂时只做前端模拟
  const index = apiKeys.value.findIndex(key => key.id === id)
  if (index !== -1) {
    apiKeys.value[index].is_active = isActive
    apiKeys.value[index].updated_at = new Date().toISOString()
  }
}

const deleteApiKey = async (id: number) => {
  // 这里应该调用后端API删除API密钥
  // 暂时只做前端模拟
  apiKeys.value = apiKeys.value.filter(key => key.id !== id)
}
</script>

<style scoped>
.admin-api-keys {
  padding: 20px;
}

.admin-api-keys h2 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #333;
}

.api-keys-actions {
  margin-bottom: 20px;
}

.api-keys-table {
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 768px) {
  .admin-api-keys {
    padding: 10px;
  }

  .api-keys-actions {
    margin-bottom: 10px;
  }

  .api-keys-table {
    margin-top: 10px;
  }
}
</style>
