<template>
  <span class="inline-block px-4 py-1.5 rounded-full bg-gradient-to-br from-accent to-accent2 text-white text-[15px] font-semibold mb-3">订单已完成</span>
  <div v-if="deliveredCodes.length" class="my-3 flex flex-col items-center gap-2">
    <textarea
      class="w-[min(520px,100%)] min-h-[120px] px-4 py-3.5 rounded-lg border border-white/35 bg-white/90 text-apptext text-base leading-[1.7] resize-none"
      style="font-family: var(--font-serif);"
      readonly
      :value="deliveredCodes.join('\n')"
    ></textarea>
  </div>
  <div v-else-if="isManualDelivery" class="flex items-start gap-3 p-4 bg-[rgba(90,180,120,0.08)] border border-[rgba(90,180,120,0.25)] rounded-lg text-apptext max-w-lg mx-auto text-left">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
    <div>
      <p class="text-base font-semibold text-[#3a9a68] mb-1">等待发货中</p>
      <p class="tag">管理员将尽快处理您的订单并进行发货，请关注您的邮箱或联系方式。</p>
    </div>
  </div>
  <p class="tag mt-3">感谢购买！如有问题请联系售后邮箱。</p>
</template>

<script setup>
defineProps({
  deliveredCodes: { type: Array, default: () => [] },
  isManualDelivery: { type: Boolean, default: false }
})
</script>
