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

const visible = defineModel<boolean>({ required: true });
const laborInvoiceOcrConfirmData = defineModel<any>("laborInvoiceOcrConfirmData", { 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>{{ laborInvoiceOcrConfirmData.expertName || "-" }}</div>
      <div><strong>OCR姓名</strong>{{ laborInvoiceOcrConfirmData.ocrName || "-" }}</div>
      <div>
        <strong>姓名比对</strong>
        <el-tag size="small" :type="laborInvoiceOcrConfirmData.nameMatched ? 'success' : 'danger'">
          {{ laborInvoiceOcrConfirmData.nameMatched ? "一致" : "不一致" }}
        </el-tag>
      </div>
      <div><strong>发票代码</strong>{{ laborInvoiceOcrConfirmData.invoiceCode || "-" }}</div>
      <div><strong>发票号码</strong>{{ laborInvoiceOcrConfirmData.invoiceNum || "-" }}</div>
      <div><strong>识别金额</strong>{{ toYuan(laborInvoiceOcrConfirmData.totalAmountCent || 0) }}</div>
      <div><strong>识别税额</strong>{{ toYuan(laborInvoiceOcrConfirmData.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>
