<script setup lang="ts">
/**
 * 文件职责：发票开票抽屉。
 */
import type {
  FinanceInvoiceRecordDetailDto,
  FinanceInvoiceRecordListItemDto,
} from '#/api/finance';
import type { FinanceInvoiceIssueFormState } from '../types';

import { Button, Drawer, Form, Input, Spin, Tag } from 'ant-design-vue';

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

interface Props {
  detail: FinanceInvoiceRecordDetailDto | null;
  form: FinanceInvoiceIssueFormState;
  loadingDetail: boolean;
  open: boolean;
  submitting: boolean;
  targetRecord: FinanceInvoiceRecordListItemDto | null;
}

const props = defineProps<Props>();

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

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

<template>
  <Drawer
    :open="props.open"
    width="560"
    title="发票开票"
    @close="emit('close')"
  >
    <Spin :spinning="props.loadingDetail">
      <div class="fi-section">
        <div class="fi-section-title">开票信息</div>
        <div class="fi-info-grid">
          <div>
            <span class="label">发票号码：</span>
            <span class="fi-mono">{{ props.targetRecord?.invoiceNo || '--' }}</span>
          </div>
          <div>
            <span class="label">发票类型：</span>
            <Tag
              :color="resolveInvoiceTypeTagColor(props.targetRecord?.invoiceType || '')"
            >
              {{ props.targetRecord?.invoiceTypeText || '--' }}
            </Tag>
          </div>
          <div>
            <span class="label">申请人：</span>
            <span>{{ props.targetRecord?.applicantName || '--' }}</span>
          </div>
          <div>
            <span class="label">开票金额：</span>
            <span class="fi-amount-strong">{{ formatCurrency(Number(props.targetRecord?.amount || 0)) }}</span>
          </div>
          <div class="full">
            <span class="label">公司抬头：</span>
            <span>{{ props.targetRecord?.companyName || '--' }}</span>
          </div>
          <div class="full">
            <span class="label">关联订单：</span>
            <span class="fi-mono">{{ props.targetRecord?.orderNo || '--' }}</span>
          </div>
          <div class="full">
            <span class="label">纳税人识别号：</span>
            <span class="fi-mono">{{ props.detail?.taxpayerNumber || '--' }}</span>
          </div>
        </div>
      </div>

      <div class="fi-section">
        <div class="fi-section-title">开票补充信息</div>
        <Form layout="vertical">
          <Form.Item label="接收邮箱">
            <Input
              :value="props.form.contactEmail"
              placeholder="请输入开票接收邮箱"
              @update:value="(value) => emit('update:contactEmail', toStringValue(value))"
            />
          </Form.Item>

          <Form.Item label="开票备注">
            <Input.TextArea
              :value="props.form.issueRemark"
              placeholder="请输入开票备注（选填）"
              :maxlength="200"
              :rows="4"
              show-count
              @update:value="(value) => emit('update:issueRemark', toStringValue(value))"
            />
          </Form.Item>
        </Form>
      </div>
    </Spin>

    <template #footer>
      <div class="fi-drawer-footer">
        <Button @click="emit('close')">取消</Button>
        <Button type="primary" :loading="props.submitting" @click="emit('submit')">
          确认开票
        </Button>
      </div>
    </template>
  </Drawer>
</template>
