<script setup lang="ts">
import { DIALOG_WIDTH } from "../../../constants/ui";

const visible = defineModel<boolean>({ required: true });
const meetingInvoiceOcrConfirmData = defineModel<any>("meetingInvoiceOcrConfirmData", { required: true });

defineProps<{
  toYuan: (cent?: number) => string;
}>();

defineEmits<{
  cancel: [];
  confirm: [];
}>();
</script>

<template>
  <el-dialog v-model="visible" title="会议发票OCR识别结果确认" :width="DIALOG_WIDTH.md" :close-on-click-modal="false">
    <div class="lh-loose">
      <div><strong>分项</strong>{{ meetingInvoiceOcrConfirmData.sectionCode || "-" }}</div>
      <div><strong>字段</strong>{{ meetingInvoiceOcrConfirmData.fieldKey || "-" }}</div>

      <div><strong>发票代码</strong>{{ meetingInvoiceOcrConfirmData.invoiceCode || "-" }}</div>
      <div><strong>发票号码</strong>{{ meetingInvoiceOcrConfirmData.invoiceNum || "-" }}</div>
      <div><strong>识别金额</strong>{{ toYuan(meetingInvoiceOcrConfirmData.totalAmountCent || 0) }}</div>
      <div><strong>识别税额</strong>{{ toYuan(meetingInvoiceOcrConfirmData.taxCent || 0) }}</div>
    </div>
    <template #footer>
      <el-button @click="$emit('cancel')">取消</el-button>
      <el-button type="primary" @click="$emit('confirm')">确认回填</el-button>
    </template>
  </el-dialog>
</template>
