<script setup lang="ts">
/**
 * 文件职责：发票开票成功结果弹窗。
 */
import type { FinanceInvoiceIssueResultDto } from '#/api/finance';

import { Button } from 'ant-design-vue';
import { Modal } from 'ant-design-vue';

import { formatCurrency } from '../composables/invoice-page/helpers';

interface Props {
  open: boolean;
  result: FinanceInvoiceIssueResultDto | null;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'close'): void;
}>();
</script>

<template>
  <Modal
    :open="props.open"
    title="开票完成"
    :footer="null"
    @cancel="emit('close')"
  >
    <div class="fi-issue-result">
      <div class="fi-result-title">发票已成功开具</div>

      <div class="fi-result-list">
        <div class="fi-result-line">
          <span class="label">发票号码</span>
          <span class="value fi-mono">{{ props.result?.invoiceNo || '--' }}</span>
        </div>
        <div class="fi-result-line">
          <span class="label">公司抬头</span>
          <span class="value">{{ props.result?.companyName || '--' }}</span>
        </div>
        <div class="fi-result-line">
          <span class="label">开票金额</span>
          <span class="value">{{ formatCurrency(Number(props.result?.amount || 0)) }}</span>
        </div>
        <div class="fi-result-line">
          <span class="label">接收邮箱</span>
          <span class="value">{{ props.result?.contactEmail || '--' }}</span>
        </div>
        <div class="fi-result-line">
          <span class="label">开票时间</span>
          <span class="value">{{ props.result?.issuedAt || '--' }}</span>
        </div>
      </div>

      <div class="fi-result-footer">
        <Button type="primary" @click="emit('close')">我知道了</Button>
      </div>
    </div>
  </Modal>
</template>
