<template>
  <div class="grid gap-6">
    <section class="panel p-5">
      <div class="grid gap-5 lg:grid-cols-[1fr_auto]">
        <div>
          <p class="text-sm font-semibold text-brand-700">开放 API</p>
          <h2 class="mt-2 text-xl font-bold text-slate-950">将代理能力接入你的系统</h2>
          <p class="mt-2 text-sm leading-7 text-slate-500">
            通过开放接口查询套餐、预览订单、创建订单、查询余额和接收回调。需要先提交申请，后台审核通过后发放凭证。
          </p>
        </div>
        <button class="btn-primary" @click="submitApply">提交申请</button>
      </div>
    </section>

    <section class="grid gap-6 lg:grid-cols-2">
      <div class="panel p-5">
        <h3 class="font-bold text-slate-950">申请状态</h3>
        <pre class="mt-4 whitespace-pre-wrap break-words rounded-md bg-slate-50 p-4 text-xs leading-6 text-slate-600">{{ currentText }}</pre>
      </div>
      <div class="panel p-5">
        <h3 class="font-bold text-slate-950">应用凭证</h3>
        <pre class="mt-4 whitespace-pre-wrap break-words rounded-md bg-slate-950 p-4 text-xs leading-6 text-brand-50">{{ credentialText }}</pre>
      </div>
    </section>

    <section class="panel p-5">
      <h3 class="font-bold text-slate-950">接口入口</h3>
      <div class="mt-4 grid gap-3 text-sm">
        <code class="rounded-md bg-slate-50 p-3 text-slate-700">POST /api/v1/open/auth/token</code>
        <code class="rounded-md bg-slate-50 p-3 text-slate-700">GET /api/v1/open/package-center/catalog</code>
        <code class="rounded-md bg-slate-50 p-3 text-slate-700">GET /api/v1/open/package-center/static-inventory?productId=1&amp;qiyunPid=项目ID&amp;qiyunAreaId=省份ID</code>
        <code class="rounded-md bg-slate-50 p-3 text-slate-700">POST /api/v1/open/package-center/static-orders/preview</code>
        <code class="rounded-md bg-slate-50 p-3 text-slate-700">POST /api/v1/open/package-center/dynamic-orders</code>
      </div>
      <pre class="mt-4 overflow-x-auto rounded-md bg-slate-950 p-4 text-xs leading-6 text-brand-50">{{ staticOrderExample }}</pre>
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { MemberAPI } from "@/api/member";

const current = ref<unknown>(null);
const credential = ref<unknown>(null);

const currentText = computed(() => current.value ? JSON.stringify(current.value, null, 2) : "暂无申请记录");
const credentialText = computed(() => credential.value ? JSON.stringify(credential.value, null, 2) : "审核通过后显示应用凭证");
const staticOrderExample = `{
  "productId": 1,
  "durationDays": 30,
  "qiyunPid": "项目ID，独享custom可不传",
  "qiyunProjectName": "项目名称",
  "qiyunAreaId": "省份ID，可选",
  "qiyunAreaName": "省份名称，可选",
  "qiyunNodeId": "节点ID",
  "qiyunNodeName": "节点名称",
  "quantity": 1
}`;

onMounted(load);

async function load() {
  const [currentRes, credentialRes] = await Promise.allSettled([
    MemberAPI.openApiCurrent(),
    MemberAPI.openApiCredential(),
  ]);
  if (currentRes.status === "fulfilled") current.value = currentRes.value;
  if (credentialRes.status === "fulfilled") credential.value = credentialRes.value;
}

async function submitApply() {
  current.value = await MemberAPI.submitOpenApiApply({
    applyReason: "希望通过开放 API 接入代理套餐、订单和回调能力。",
  });
}
</script>
