<script setup lang="ts">
  import { computed, reactive, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { fetchUploadFile } from '@/api/files'
  import { bindInitialTenantSubscription, submitTenantVerification } from '@/api/tenant-onboarding'
  import { ElMessage } from 'element-plus'
  import { useI18n } from 'vue-i18n'

  // 1. 从 URL 读取 tenantId / tenantPackageId，后续提交时携带
  const route = useRoute()
  const router = useRouter()
  const tenantId = computed(() => route.query.tenantId as string | undefined)
  const tenantPackageId = computed(() => route.query.tenantPackageId as string | undefined)
  const { t } = useI18n()

  // 定义表单数据接口
  interface ProfileForm {
    BusinessLicenseNumber: string
    BusinessLicenseUrl: string
    LegalPersonName: string
    LegalPersonIdNumber: string
    LegalPersonIdFrontUrl: string
    LegalPersonIdBackUrl: string
    BankAccountName: string
    BankName: string
    BankAccountNumber: string
  }

  // 使用 reactive 定义响应式数据
  const form = reactive<ProfileForm>({
    BusinessLicenseNumber: '',
    BusinessLicenseUrl: '',
    LegalPersonName: '',
    LegalPersonIdNumber: '',
    LegalPersonIdFrontUrl: '',
    LegalPersonIdBackUrl: '',
    BankAccountName: '',
    BankName: '',
    BankAccountNumber: ''
  })

  type UploadField = keyof Pick<
    ProfileForm,
    'BusinessLicenseUrl' | 'LegalPersonIdFrontUrl' | 'LegalPersonIdBackUrl'
  >

  // 2. 上传状态与文件名
  const isUploading = reactive<Record<UploadField, boolean>>({
    BusinessLicenseUrl: false,
    LegalPersonIdFrontUrl: false,
    LegalPersonIdBackUrl: false
  })

  const uploadedFileName = reactive<Record<UploadField, string>>({
    BusinessLicenseUrl: '',
    LegalPersonIdFrontUrl: '',
    LegalPersonIdBackUrl: ''
  })

  // 3. 隐藏 input 引用
  const businessLicenseInputRef = ref<HTMLInputElement | null>(null)
  const legalPersonFrontInputRef = ref<HTMLInputElement | null>(null)
  const legalPersonBackInputRef = ref<HTMLInputElement | null>(null)

  const fileInputMap: Record<UploadField, typeof businessLicenseInputRef> = {
    BusinessLicenseUrl: businessLicenseInputRef,
    LegalPersonIdFrontUrl: legalPersonFrontInputRef,
    LegalPersonIdBackUrl: legalPersonBackInputRef
  }

  const openFileDialog = (field: UploadField) => {
    // 3.1 触发隐藏 input 选择文件
    fileInputMap[field].value?.click()
  }

  const handleFileChange = async (field: UploadField, event: Event) => {
    const target = event.target as HTMLInputElement
    const file = target.files?.[0]
    if (!file) return

    // 3.2 清空 input，支持重复选择同一文件
    target.value = ''

    await uploadFile(field, file)
  }

  const uploadFile = async (field: UploadField, file: File) => {
    // 1. 设置上传中状态
    isUploading[field] = true
    try {
      // 2. 调用上传接口并获取地址
      // 2.1 入驻资质上传目前统一使用 business_license 类型
      const res = await fetchUploadFile(file, 'business_license')
      const url = res.url || ''
      if (!url) {
        alert('上传失败，请重试')
        return
      }

      // 3. 写入表单地址与文件名
      form[field] = url
      uploadedFileName[field] = res.fileName || file.name
    } catch (error) {
      alert((error as Error).message || '上传失败，请重试')
    } finally {
      isUploading[field] = false
    }
  }

  // 提交处理
  const isSubmitting = ref<boolean>(false)

  const handleSubmit = async () => {
    // 1. 表单基本校验
    if (!form.BusinessLicenseUrl || !form.LegalPersonIdFrontUrl || !form.LegalPersonIdBackUrl) {
      alert('请确保所有证件照片已上传')
      return
    }

    // 2. 校验租户与套餐参数
    if (!tenantId.value || !tenantPackageId.value) {
      ElMessage.warning(t('onboarding.messages.missingTenantInfo'))
      return
    }

    if (isSubmitting.value) return

    // 3. 组装实名提交命令（字段转为后端 camelCase）
    const verificationCommand: Api.Tenant.SubmitTenantVerificationCommand = {
      tenantId: tenantId.value,
      businessLicenseNumber: form.BusinessLicenseNumber,
      businessLicenseUrl: form.BusinessLicenseUrl,
      legalPersonName: form.LegalPersonName,
      legalPersonIdNumber: form.LegalPersonIdNumber,
      legalPersonIdFrontUrl: form.LegalPersonIdFrontUrl,
      legalPersonIdBackUrl: form.LegalPersonIdBackUrl,
      bankAccountName: form.BankAccountName,
      bankAccountNumber: form.BankAccountNumber,
      bankName: form.BankName
    }

    // 4. 串行执行：提交实名资料 -> 绑定套餐订阅
    isSubmitting.value = true
    try {
      await submitTenantVerification(tenantId.value, verificationCommand)

      await bindInitialTenantSubscription(tenantId.value, {
        tenantId: tenantId.value,
        tenantPackageId: tenantPackageId.value,
        autoRenew: false
      })

      ElMessage.success(t('onboarding.messages.submitSuccess'))

      await router.push({
        name: 'TenantOnboardingWaiting',
        query: {
          tenantId: tenantId.value,
          tenantPackageId: tenantPackageId.value
        }
      })
    } catch (error) {
      console.error('[OnboardingStatus] 提交审核失败：', error)
    } finally {
      isSubmitting.value = false
    }
  }
</script>

<template>
  <div class="h-screen flex overflow-hidden bg-slate-50 text-slate-800 font-sans antialiased">
    <!-- 左侧：信息与指引 (Left Side - Context) -->
    <div
      class="hidden lg:flex lg:w-4/12 relative bg-slate-900 flex-col justify-between p-12 text-white"
    >
      <!-- 背景图案 -->
      <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div
          class="absolute top-0 right-0 w-96 h-96 bg-indigo-600/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"
        ></div>
        <div
          class="absolute bottom-0 left-0 w-80 h-80 bg-blue-600/20 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2"
        ></div>
        <!-- 网格纹理 -->
        <div
          class="absolute inset-0"
          style="
            background-image: radial-gradient(rgb(255 255 255 / 10%) 1px, transparent 1px);
            background-size: 32px 32px;
            opacity: 0.2;
          "
        ></div>
      </div>

      <!-- 顶部 Logo -->
      <div class="relative z-10 flex items-center gap-2 text-indigo-300">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
          <line x1="3" x2="21" y1="9" y2="9" />
          <line x1="9" x2="9" y1="21" y2="9" />
        </svg>
        <span class="font-bold tracking-wide text-white">CloudSaaS</span>
      </div>

      <!-- 中间说明 -->
      <div class="relative z-10">
        <h2 class="text-3xl font-bold mb-6">最后一步：<br />实名认证与资质审核</h2>
        <p class="text-slate-300 leading-relaxed mb-8">
          依据相关法律法规，我们需要验证您的企业资质以开通正式服务。您提交的所有信息将通过银行级加密传输，仅用于资质审核。
        </p>

        <div class="space-y-4">
          <div class="flex items-start gap-4">
            <div
              class="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center shrink-0 text-indigo-400 mt-1"
            >
              1
            </div>
            <div>
              <h4 class="font-medium text-white">注册账号</h4>
              <p class="text-sm text-slate-400">已完成</p>
            </div>
          </div>
          <div class="flex items-start gap-4">
            <div
              class="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center shrink-0 text-indigo-400 mt-1"
            >
              2
            </div>
            <div>
              <h4 class="font-medium text-white">选择套餐</h4>
              <p class="text-sm text-slate-400">已完成</p>
            </div>
          </div>
          <div class="flex items-start gap-4">
            <div
              class="w-8 h-8 rounded-full bg-white text-indigo-900 font-bold flex items-center justify-center shrink-0 mt-1 shadow-lg shadow-indigo-900/50"
            >
              3
            </div>
            <div>
              <h4 class="font-medium text-white">资质审核</h4>
              <p class="text-sm text-indigo-300">进行中...</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部帮助 -->
      <div class="relative z-10 text-sm text-slate-400">
        遇到问题？<a href="#" class="text-white underline decoration-indigo-500 underline-offset-4"
          >联系人工客服</a
        >
      </div>
    </div>

    <!-- 右侧：资料表单 (Right Side - Form) -->
    <div class="flex-1 flex flex-col h-full bg-white overflow-hidden relative">
      <!-- 顶部导航栏 (Mobile/Context) -->
      <div
        class="h-16 border-b border-slate-100 flex items-center justify-between px-6 shrink-0 bg-white/80 backdrop-blur z-20"
      >
        <span class="font-semibold text-slate-700">租户资料补全</span>
        <div
          class="text-xs text-slate-400 bg-slate-50 px-3 py-1 rounded-full border border-slate-100"
        >
          资料仅用于审核，不会泄露
        </div>
      </div>

      <!-- 可滚动区域 -->
      <div class="flex-1 overflow-y-auto p-6 md:p-10 scroll-smooth">
        <div class="max-w-3xl mx-auto space-y-10 pb-20">
          <form @submit.prevent="handleSubmit">
            <!-- 模块 1: 企业资质 (Business License) -->
            <section class="space-y-6">
              <div class="flex items-center gap-3 pb-2 border-b border-slate-100">
                <div class="p-2 bg-indigo-50 text-indigo-600 rounded-lg">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <rect width="20" height="14" x="2" y="3" rx="2" />
                    <line x1="8" x2="16" y1="21" y2="21" />
                    <line x1="12" x2="12" y1="17" y2="21" />
                  </svg>
                </div>
                <h3 class="text-lg font-bold text-slate-800">企业资质信息</h3>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 营业执照编号 -->
                <div class="col-span-1 md:col-span-2">
                  <label class="block text-sm font-medium text-slate-700 mb-2">
                    营业执照编号 <span class="text-rose-500">*</span>
                  </label>
                  <input
                    type="text"
                    v-model="form.BusinessLicenseNumber"
                    placeholder="请输入统一社会信用代码"
                    class="w-full px-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all placeholder:text-slate-400"
                    required
                  />
                </div>

                <!-- 营业执照上传 -->
                <div class="col-span-1 md:col-span-2">
                  <label class="block text-sm font-medium text-slate-700 mb-2">
                    营业执照照片 <span class="text-rose-500">*</span>
                  </label>
                  <!-- 上传组件 -->
                  <div
                    class="upload-card relative border-2 border-dashed border-slate-300 rounded-xl p-8 flex flex-col items-center justify-center text-center cursor-pointer transition-all bg-slate-50 min-h-[160px]"
                    :class="{ 'opacity-60 pointer-events-none': isUploading.BusinessLicenseUrl }"
                    @click="openFileDialog('BusinessLicenseUrl')"
                  >
                    <input
                      ref="businessLicenseInputRef"
                      type="file"
                      accept="image/*,application/pdf"
                      class="hidden"
                      @change="(e) => handleFileChange('BusinessLicenseUrl', e)"
                    />
                    <div v-if="!form.BusinessLicenseUrl" class="flex flex-col items-center">
                      <div
                        class="w-12 h-12 bg-white rounded-full shadow-sm flex items-center justify-center text-indigo-500 mb-3"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          stroke-width="2"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        >
                          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                          <polyline points="17 8 12 3 7 8" />
                          <line x1="12" x2="12" y1="3" y2="15" />
                        </svg>
                      </div>
                      <p class="text-sm font-medium text-slate-700">点击上传营业执照</p>
                      <p class="text-xs text-slate-400 mt-1">支持 JPG, PNG, PDF (最大 5MB)</p>
                    </div>
                    <!-- 上传成功后的预览状态 -->
                    <div
                      v-else
                      class="w-full flex items-center justify-between bg-white p-3 rounded-lg border border-indigo-100 shadow-sm"
                    >
                      <div class="flex items-center gap-3 overflow-hidden">
                        <div
                          class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center text-indigo-600 shrink-0"
                          >IMG</div
                        >
                        <div class="flex flex-col text-left truncate">
                          <span class="text-sm font-medium text-slate-700 truncate">{{
                            uploadedFileName.BusinessLicenseUrl || 'license_scan_2025.jpg'
                          }}</span>
                          <span class="text-xs text-green-600">上传成功</span>
                        </div>
                      </div>
                      <button
                        type="button"
                        @click.stop="form.BusinessLicenseUrl = ''"
                        class="text-slate-400 hover:text-rose-500 p-2"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="18"
                          height="18"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          stroke-width="2"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        >
                          <path d="M18 6 6 18" />
                          <path d="m6 6 12 12" />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- 模块 2: 法人信息 (Legal Person) -->
            <section class="space-y-6 pt-4">
              <div class="flex items-center gap-3 pb-2 border-b border-slate-100">
                <div class="p-2 bg-indigo-50 text-indigo-600 rounded-lg">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                    <circle cx="9" cy="7" r="4" />
                    <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                  </svg>
                </div>
                <h3 class="text-lg font-bold text-slate-800">法人身份信息</h3>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 法人姓名 -->
                <div>
                  <label class="block text-sm font-medium text-slate-700 mb-2">
                    法人姓名 <span class="text-rose-500">*</span>
                  </label>
                  <input
                    type="text"
                    v-model="form.LegalPersonName"
                    class="w-full px-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all placeholder:text-slate-400"
                    required
                  />
                </div>

                <!-- 身份证号 -->
                <div>
                  <label class="block text-sm font-medium text-slate-700 mb-2">
                    身份证号 <span class="text-rose-500">*</span>
                  </label>
                  <input
                    type="text"
                    v-model="form.LegalPersonIdNumber"
                    class="w-full px-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all placeholder:text-slate-400"
                    required
                  />
                </div>

                <!-- 身份证正面 -->
                <div>
                  <label class="block text-sm font-medium text-slate-700 mb-2">
                    身份证正面 (人像面) <span class="text-rose-500">*</span>
                  </label>
                  <div
                    class="upload-card border-2 border-dashed border-slate-300 rounded-xl p-4 flex flex-col items-center justify-center text-center cursor-pointer bg-slate-50 h-32"
                    :class="{ 'opacity-60 pointer-events-none': isUploading.LegalPersonIdFrontUrl }"
                    @click="openFileDialog('LegalPersonIdFrontUrl')"
                  >
                    <input
                      ref="legalPersonFrontInputRef"
                      type="file"
                      accept="image/*"
                      class="hidden"
                      @change="(e) => handleFileChange('LegalPersonIdFrontUrl', e)"
                    />
                    <div v-if="!form.LegalPersonIdFrontUrl" class="text-slate-500 text-xs">
                      <svg
                        class="w-8 h-8 mx-auto mb-2 text-indigo-400 opacity-80"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                        <circle cx="8.5" cy="8.5" r="1.5" />
                        <polyline points="21 15 16 10 5 21" />
                      </svg>
                      点击上传人像面
                    </div>
                    <div v-else class="text-green-600 flex items-center gap-2">
                      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M5 13l4 4L19 7"
                        />
                      </svg>
                      <span class="text-sm">已选择文件</span>
                    </div>
                  </div>
                </div>

                <!-- 身份证反面 -->
                <div>
                  <label class="block text-sm font-medium text-slate-700 mb-2">
                    身份证反面 (国徽面) <span class="text-rose-500">*</span>
                  </label>
                  <div
                    class="upload-card border-2 border-dashed border-slate-300 rounded-xl p-4 flex flex-col items-center justify-center text-center cursor-pointer bg-slate-50 h-32"
                    :class="{ 'opacity-60 pointer-events-none': isUploading.LegalPersonIdBackUrl }"
                    @click="openFileDialog('LegalPersonIdBackUrl')"
                  >
                    <input
                      ref="legalPersonBackInputRef"
                      type="file"
                      accept="image/*"
                      class="hidden"
                      @change="(e) => handleFileChange('LegalPersonIdBackUrl', e)"
                    />
                    <div v-if="!form.LegalPersonIdBackUrl" class="text-slate-500 text-xs">
                      <svg
                        class="w-8 h-8 mx-auto mb-2 text-indigo-400 opacity-80"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                        <line x1="3" y1="9" x2="21" y2="9" />
                        <line x1="9" y1="21" x2="9" y2="9" />
                      </svg>
                      点击上传国徽面
                    </div>
                    <div v-else class="text-green-600 flex items-center gap-2">
                      <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M5 13l4 4L19 7"
                        />
                      </svg>
                      <span class="text-sm">已选择文件</span>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- 模块 3: 对公账户 (Bank Account) -->
            <section class="space-y-6 pt-4">
              <div class="flex items-center gap-3 pb-2 border-b border-slate-100">
                <div class="p-2 bg-indigo-50 text-indigo-600 rounded-lg">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path d="M3 21h18" />
                    <path d="M5 21V7" />
                    <path d="M19 21V7" />
                    <path d="M4 7h16" />
                    <path d="M15 7 12 2 9 7" />
                    <line x1="10" x2="10" y1="14" y2="17" />
                    <line x1="14" x2="14" y1="14" y2="17" />
                  </svg>
                </div>
                <h3 class="text-lg font-bold text-slate-800">对公结算账户</h3>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 开户名 -->
                <div class="col-span-1 md:col-span-2">
                  <label class="block text-sm font-medium text-slate-700 mb-2">
                    开户名 (公司名称) <span class="text-rose-500">*</span>
                  </label>
                  <input
                    type="text"
                    v-model="form.BankAccountName"
                    placeholder="需与营业执照名称一致"
                    class="w-full px-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all placeholder:text-slate-400"
                    required
                  />
                </div>

                <!-- 开户行 -->
                <div>
                  <label class="block text-sm font-medium text-slate-700 mb-2">
                    开户银行 <span class="text-rose-500">*</span>
                  </label>
                  <input
                    type="text"
                    v-model="form.BankName"
                    placeholder="如：招商银行北京分行"
                    class="w-full px-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all placeholder:text-slate-400"
                    required
                  />
                </div>

                <!-- 银行账号 -->
                <div>
                  <label class="block text-sm font-medium text-slate-700 mb-2">
                    银行账号 <span class="text-rose-500">*</span>
                  </label>
                  <input
                    type="text"
                    v-model="form.BankAccountNumber"
                    class="w-full px-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 transition-all placeholder:text-slate-400 font-mono"
                    required
                  />
                </div>
              </div>
            </section>

            <!-- 底部操作栏 -->
            <div class="pt-8 flex items-center justify-end gap-4 border-t border-slate-100 mt-10">
              <button
                type="button"
                class="px-6 py-2.5 rounded-lg text-slate-500 hover:bg-slate-50 hover:text-slate-700 font-medium transition-colors"
              >
                上一步
              </button>
              <button
                type="submit"
                :disabled="isSubmitting"
                :class="{ 'opacity-60 cursor-not-allowed': isSubmitting }"
                class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2.5 px-8 rounded-lg shadow-lg shadow-indigo-500/30 transition-all transform hover:-translate-y-0.5 active:translate-y-0 disabled:hover:bg-indigo-600"
              >
                提交审核
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path d="M5 12h14" />
                  <path d="m12 5 7 7-7 7" />
                </svg>
              </button>
            </div>
          </form>
        </div>

        <!-- 底部版权 (Mobile) -->
        <div class="text-center text-xs text-slate-400 pb-6 md:hidden">
          © 2025 CloudSaaS Inc.
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  /* 自定义滚动条，让右侧滚动更优雅 */
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
  }

  .upload-card:hover {
    background-color: #f5f3ff; /* indigo-50 */
    border-color: #6366f1; /* indigo-500 */
  }
</style>
