<script setup lang="ts">
/**
 * 文件职责：发票作废确认弹窗。
 */
import type { FinanceInvoiceRecordListItemDto } from '#/api/finance';
import type { FinanceInvoiceVoidFormState } from '../types';

import { Modal, Input } from 'ant-design-vue';

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

interface Props {
  form: FinanceInvoiceVoidFormState;
  open: boolean;
  submitting: boolean;
  targetRecord: FinanceInvoiceRecordListItemDto | null;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'close'): void;
  (event: 'submit'): void;
  (event: 'update:voidReason', value: string): void;
}>();

function toStringValue(value: string | undefined) {
  return String(value ?? '');
}
</script>

<template>
  <Modal
    :open="props.open"
    title="确认作废发票"
    ok-text="确认作废"
    cancel-text="取消"
    ok-type="danger"
    :confirm-loading="props.submitting"
    @ok="emit('submit')"
    @cancel="emit('close')"
  >
    <div class="fi-void-modal">
      <p class="fi-void-warning">发票作废后不可恢复，请确认本次操作。</p>

      <div class="fi-void-summary">
        <div class="fi-void-line">
          <span class="label">发票号码</span>
          <span class="value fi-mono">{{ props.targetRecord?.invoiceNo || '--' }}</span>
        </div>
        <div class="fi-void-line">
          <span class="label">公司抬头</span>
          <span class="value">{{ props.targetRecord?.companyName || '--' }}</span>
        </div>
        <div class="fi-void-line">
          <span class="label">开票金额</span>
          <span class="value">{{ formatCurrency(Number(props.targetRecord?.amount || 0)) }}</span>
        </div>
      </div>

      <Input.TextArea
        :value="props.form.voidReason"
        :rows="4"
        :maxlength="200"
        show-count
        placeholder="请输入作废原因"
        @update:value="(value) => emit('update:voidReason', toStringValue(value))"
      />
    </div>
  </Modal>
</template>
