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

const visible = defineModel<boolean>({ required: true });
const createExpertBankCardOcrData = defineModel<{
  bankName: string;
  bankCardNo: string;
  accountName: string;
  validDate: string;
  bankCardType: string;
}>("createExpertBankCardOcrData", { required: true });

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

<template>
  <el-dialog v-model="visible" title="银行卡OCR识别结果确认" :width="DIALOG_WIDTH.sm" :close-on-click-modal="false">
    <div class="lh-loose">
      <div><strong>开户行</strong>{{ createExpertBankCardOcrData.bankName || "-" }}</div>
      <div><strong>卡号</strong>{{ createExpertBankCardOcrData.bankCardNo || "-" }}</div>
      <div><strong>账户名：</strong>{{ createExpertBankCardOcrData.accountName || "-" }}</div>
      <div><strong>有效期：</strong>{{ createExpertBankCardOcrData.validDate || "-" }}</div>
      <div><strong>卡类型：</strong>{{ createExpertBankCardOcrData.bankCardType || "-" }}</div>
    </div>
    <template #footer>
      <el-button @click="$emit('cancel')">取消</el-button>
      <el-button type="primary" @click="$emit('confirm')">确认回填</el-button>
    </template>
  </el-dialog>
</template>
