<script setup lang="ts">
type Props = {
  cloudtentaclesDebugLoading: boolean
  handleCloudtentaclesFetchAsset: () => void | Promise<void>
  handleCloudtentaclesFetchCategories: () => void | Promise<void>
  handleCloudtentaclesFetchSkuList: () => void | Promise<void>
  handleCloudtentaclesBuySku: () => void | Promise<void>
  handleCloudtentaclesUseSku: () => void | Promise<void>
  handleCloudtentaclesFetchKnapsack: () => void | Promise<void>
  handleCloudtentaclesFetchVnList: () => void | Promise<void>
  handleCloudtentaclesAppointVn: () => void | Promise<void>
  handleCloudtentaclesGenerateVnLoginCode: () => void | Promise<void>
  handleCloudtentaclesFetchVnCode: () => void | Promise<void>
  handleCloudtentaclesVerifyVnCode: () => void | Promise<void>
  handleCloudtentaclesFetchBindUrl: () => void | Promise<void>
  handleCloudtentaclesBackVn: () => void | Promise<void>
  handleCloudtentaclesRunFullFlow: () => void | Promise<void>
  cloudtentaclesDebugResult: string
}

defineProps<Props>()
</script>

<template>
  <el-card class="section-card">
    <template #header>
      <div>
        <span class="card-title">cloudtentacles 开发调试工具</span>
        <p class="card-desc">
          仅开发模式展示。用于调试分类、SKU、购买、发货、虚拟号、兑换链接和结束退还链路。
        </p>
      </div>
    </template>

    <div class="debug-buttons">
      <el-button :loading="cloudtentaclesDebugLoading" @click="handleCloudtentaclesFetchAsset"
        >余额</el-button
      >
      <el-button
        :loading="cloudtentaclesDebugLoading"
        @click="handleCloudtentaclesFetchCategories"
        >分类</el-button
      >
      <el-button :loading="cloudtentaclesDebugLoading" @click="handleCloudtentaclesFetchSkuList"
        >SKU</el-button
      >
      <el-button :loading="cloudtentaclesDebugLoading" @click="handleCloudtentaclesBuySku"
        >购买</el-button
      >
      <el-button
        :loading="cloudtentaclesDebugLoading"
        type="primary"
        @click="handleCloudtentaclesUseSku"
        >发货</el-button
      >
      <el-button :loading="cloudtentaclesDebugLoading" @click="handleCloudtentaclesFetchKnapsack"
        >背包</el-button
      >
      <el-button :loading="cloudtentaclesDebugLoading" @click="handleCloudtentaclesFetchVnList"
        >虚拟号列表</el-button
      >
      <el-button :loading="cloudtentaclesDebugLoading" @click="handleCloudtentaclesAppointVn"
        >申请虚拟号</el-button
      >
      <el-button
        :loading="cloudtentaclesDebugLoading"
        @click="handleCloudtentaclesGenerateVnLoginCode"
        >生成登录码</el-button
      >
      <el-button :loading="cloudtentaclesDebugLoading" @click="handleCloudtentaclesFetchVnCode"
        >获取验证码</el-button
      >
      <el-button :loading="cloudtentaclesDebugLoading" @click="handleCloudtentaclesVerifyVnCode"
        >校验验证码</el-button
      >
      <el-button :loading="cloudtentaclesDebugLoading" @click="handleCloudtentaclesFetchBindUrl"
        >兑换链接</el-button
      >
      <el-button
        :loading="cloudtentaclesDebugLoading"
        type="warning"
        @click="handleCloudtentaclesBackVn"
        >退还号码</el-button
      >
      <el-button
        :loading="cloudtentaclesDebugLoading"
        type="success"
        @click="handleCloudtentaclesRunFullFlow"
        >完整流程</el-button
      >
    </div>

    <pre v-if="cloudtentaclesDebugResult" class="debug-pre mt-4">{{
      cloudtentaclesDebugResult
    }}</pre>
    <el-empty
      v-else
      description="执行一次调试动作后，这里会显示原始返回数据。"
      :image-size="60"
    />
  </el-card>
</template>

<style scoped>
.section-card {
  border-radius: var(--radius-lg);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.card-desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.debug-buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.debug-pre {
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: #0f172a;
  color: #e2e8f0;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-xs);
  line-height: 1.6;
  font-family: var(--font-mono);
}
</style>
