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

const visible = defineModel<boolean>({ required: true });
const createExpertIdOcrData = defineModel<{
  side: "front" | "back";
  name: string;
  idNo: string;
  gender: string;
  ethnicity: string;
  birth: string;
  address: string;
  issueAuthority: string;
  signDate: string;
  expiryDate: string;
}>("createExpertIdOcrData", { required: true });

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>{{ createExpertIdOcrData.side === "front" ? "正面" : "反面" }}</div>
      <div><strong>姓名</strong>{{ createExpertIdOcrData.name || "-" }}</div>
      <div><strong>身份证号</strong>{{ createExpertIdOcrData.idNo || "-" }}</div>
      <div><strong>性别</strong>{{ createExpertIdOcrData.gender || "-" }}</div>
      <div><strong>民族</strong>{{ createExpertIdOcrData.ethnicity || "-" }}</div>
      <div><strong>出生</strong>{{ createExpertIdOcrData.birth || "-" }}</div>
      <div><strong>住址</strong>{{ createExpertIdOcrData.address || "-" }}</div>
      <div><strong>签发机关</strong>{{ createExpertIdOcrData.issueAuthority || "-" }}</div>
      <div><strong>签发日期</strong>{{ createExpertIdOcrData.signDate || "-" }}</div>
      <div><strong>失效日期</strong>{{ createExpertIdOcrData.expiryDate || "-" }}</div>
    </div>
    <template #footer>
      <el-button @click="$emit('cancel')">取消</el-button>
      <el-button type="primary" @click="$emit('confirm')">确认回填</el-button>
    </template>
  </el-dialog>
</template>
