<script setup lang="ts">
/**
 * 文件职责：保存发票设置确认弹窗。
 */
import type { FinanceInvoiceSettingFormState } from '../types';

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

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

interface Props {
  form: FinanceInvoiceSettingFormState;
  open: boolean;
  submitting: boolean;
}

const props = defineProps<Props>();

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

function resolveEnabledText(value: boolean) {
  return value ? '已开启' : '已关闭';
}
</script>

<template>
  <Modal
    :open="props.open"
    title="确认保存发票设置"
    ok-text="确认保存"
    cancel-text="取消"
    :confirm-loading="props.submitting"
    @ok="emit('confirm')"
    @cancel="emit('close')"
  >
    <div class="fi-settings-confirm">
      <p class="fi-settings-desc">
        即将更新企业开票信息与开票规则，请确认以下关键配置：
      </p>

      <div class="fi-settings-list">
        <div class="fi-settings-line">
          <span class="label">企业名称</span>
          <span class="value">{{ props.form.companyName || '--' }}</span>
        </div>
        <div class="fi-settings-line">
          <span class="label">纳税人识别号</span>
          <span class="value fi-mono">{{ props.form.taxpayerNumber || '--' }}</span>
        </div>
        <div class="fi-settings-line">
          <span class="label">电子普通发票</span>
          <span class="value">{{ resolveEnabledText(props.form.enableElectronicNormalInvoice) }}</span>
        </div>
        <div class="fi-settings-line">
          <span class="label">电子专用发票</span>
          <span class="value">{{ resolveEnabledText(props.form.enableElectronicSpecialInvoice) }}</span>
        </div>
        <div class="fi-settings-line">
          <span class="label">自动开票</span>
          <span class="value">{{ resolveEnabledText(props.form.enableAutoIssue) }}</span>
        </div>
        <div class="fi-settings-line">
          <span class="label">自动开票上限</span>
          <span class="value">{{ formatCurrency(Number(props.form.autoIssueMaxAmount || 0)) }}</span>
        </div>
      </div>
    </div>
  </Modal>
</template>
