<script setup lang="ts">
import FaceRecognition from "./FaceRecognition.vue";
import { store } from "@/store/store";

const emit = defineEmits<{
  /** 由上层去判断是否是强制，此"passed" event仅代表照片被后台比对了，
   * isRealStudent代表照片是否为学生本人 */
  (e: "passed", isRealStudent: boolean): void;
  (e: "close"): void;
}>();
const userPhoto = store.user.photoPath;

function closeModal() {
  logger({
    cnl: ["server"],
    pgn: "OnlineExamFaceCheckModal",
    act: "点击关闭按钮",
  });
  emit("close");
}
function getFaceRecognitionResult(res: {
  isPassed: boolean;
  isStranger: boolean;
}) {
  $message.info("人脸比对" + (res.isPassed ? "成功" : "失败"));
  emit("passed", res.isPassed);
}
</script>

<template>
  <n-modal
    :show="true"
    style="width: 900px"
    title="人脸识别"
    preset="card"
    @close="closeModal"
  >
    <div class="tw-flex">
      <div class="avatar" :style="{ backgroundImage: `url('${userPhoto}')` }">
        <div
          class="avatar-info"
          style="text-align: center; margin-top: 260px; color: white"
        >
          <span class="photo-hint">
            {{ userPhoto ? "我的底照" : "无底照" }}
          </span>
        </div>
      </div>
      <div class="camera tw-mx-1">
        <FaceRecognition
          width="400"
          height="300"
          :showRecognizeButton="true"
          @onRecognizeResult="getFaceRecognitionResult"
        />
      </div>
      <div class="verify-desc qm-primary-text">
        <h4 class="qm-big-text" style="font-weight: bold">操作提示：</h4>
        <p>1.请先确保摄像头设备已连接并能正常工作；</p>
        <p>2.请保持光源充足，不要逆光操作；</p>
        <p>
          3.请保证脸部正面面向摄像头，并适当调整姿势保证整个脸部能够进入左侧识别画面；
        </p>
        <p>4.系统识别通过后，将自动跳转进入考试界面；</p>
      </div>
    </div>
  </n-modal>
</template>

<style scoped>
.avatar {
  background: center no-repeat;
  background-size: cover;
  min-width: 200px;
  height: 300px;
}

.photo-hint {
  background-color: rgba(0, 0, 0, 0.5);
  display: inline-block;
  padding: 6px 16px;
  border-radius: 6px;
}

.camera {
  min-width: 400px;
}

.verify-desc {
  padding: 0 1em;
  line-height: 1.8em;
}
</style>
