<template>
  <div class="page-content">
    <div class="mb-5 flex justify-between"><div><h2 class="text-xl font-semibold">模型权限申请</h2><p class="text-g-500 mt-1 text-sm">管理员审批后会通过安全流程交付 API Key</p></div><ElButton type="primary" @click="visible=true">发起申请</ElButton></div>
    <ElTable v-loading="loading" :data="requests"><ElTableColumn prop="model" label="模型" min-width="180"/><ElTableColumn prop="provider_code" label="供应商" width="140"/><ElTableColumn prop="requested_rpm" label="RPM" width="90"/><ElTableColumn prop="requested_monthly_tokens" label="月 Token" width="120"/><ElTableColumn prop="reason" label="理由"/><ElTableColumn prop="status" label="状态" width="100"><template #default="{row}"><ElTag :type="statusType(row.status)">{{statusText(row.status)}}</ElTag></template></ElTableColumn><ElTableColumn prop="decision_note" label="审批意见"/><ElTableColumn prop="created_at" label="申请时间" width="190"/></ElTable>
    <ElDialog v-model="visible" title="申请模型访问权限" width="560px"><ElForm label-width="100px"><ElFormItem label="模型"><ElSelect v-model="selectedModel" filterable class="w-full"><ElOption v-for="m in models" :key="`${m.provider_code}/${m.id}`" :label="`${m.id} · ${m.provider_code}`" :value="`${m.provider_code}\n${m.id}`"/></ElSelect></ElFormItem><ElFormItem label="RPM"><ElInputNumber v-model="form.requested_rpm" :min="1" :max="100000"/></ElFormItem><ElFormItem label="月 Token"><ElInputNumber v-model="form.requested_monthly_tokens" :min="0" :max="100000000000"/></ElFormItem><ElFormItem label="申请理由"><ElInput v-model="form.reason" type="textarea" :rows="4" maxlength="4000" show-word-limit/></ElFormItem></ElForm><template #footer><ElButton @click="visible=false">取消</ElButton><ElButton type="primary" :loading="saving" @click="submit">提交</ElButton></template></ElDialog>
  </div>
</template>
<script setup lang="ts">
import{Model,ModelRequest,createModelRequest,fetchModelRequests,fetchModels}from'@/api/portal';import{ElMessage}from'element-plus';const loading=ref(false),saving=ref(false),visible=ref(false),models=ref<Model[]>([]),requests=ref<ModelRequest[]>([]),selectedModel=ref('');const form=reactive({reason:'',requested_rpm:60,requested_monthly_tokens:0});const statusText=(v:string)=>({pending:'待审批',approved:'已通过',rejected:'已拒绝',cancelled:'已取消'}[v]||v);const statusType=(v:string)=>v==='approved'?'success':v==='rejected'?'danger':'warning';async function load(){loading.value=true;try{[models.value,requests.value]=await Promise.all([fetchModels(),fetchModelRequests()])}finally{loading.value=false}}async function submit(){const[provider_code,model]=selectedModel.value.split('\n');if(!model){ElMessage.warning('请选择模型');return}saving.value=true;try{await createModelRequest({provider_code,model,...form});visible.value=false;selectedModel.value='';form.reason='';await load();ElMessage.success('申请已提交')}finally{saving.value=false}}onMounted(load)
</script>
