<template>
  <h4 class="text-base sm:text-lg font-bold mb-3 break-words leading-snug m-0 text-left sm:text-center">
    <template v-if="isMengyaPendingPay">等待支付到账</template>
    <template v-else>订单已创建</template>
  </h4>

  <div class="mb-3 flex flex-wrap items-center gap-2 justify-start sm:justify-center">
    <span class="font-mono text-[12px] sm:text-[13px] text-muted break-all text-left max-w-full sm:max-w-[min(100%,28rem)]">
      {{ orderId }}
    </span>
    <button
      type="button"
      class="checkout-copy-id shrink-0 text-[13px] font-semibold px-3 py-1.5 rounded-lg border border-white/50 bg-white/70 text-apptext hover:bg-white/90 active:scale-[0.98] transition-colors"
      @click="emit('copy-order-id')"
    >{{ copyHint || '复制订单号' }}</button>
  </div>
</template>

<script setup>
defineProps({
  orderId: { type: String, required: true },
  isMengyaPendingPay: { type: Boolean, required: true },
  copyHint: { type: String, default: '' }
})

const emit = defineEmits(['copy-order-id'])
</script>
