<template>
  <Modal
    v-model="faceCheckModalOpen"
    width="900"
    :mask-closable="false"
    :closable="false"
    @on-visible-change="updateCameraState"
  >
    <div
      slot="header"
      style="display: flex; justify-content: space-between; align-items: center;"
    >
      <div class="qm-title-text">人脸识别</div>
      <Icon
        type="ios-close"
        class="qm-icon-button"
        size="24"
        @click="closeModal"
      />
    </div>
    <div
      style="display: grid; grid-template-columns: 200px 400px 1fr; grid-gap: 5px; position: relative"
    >
      <div class="avatar" :style="{ backgroundImage: `url('${userPhoto}')` }">
        <!-- <img :src="userPhoto" width="200px" height="300px" alt="底照" /> -->
        <div
          class="avatar-info"
          style="text-align: center; margin-top: 260px; color: white;"
        >
          <span
            style="background-color: rgba(0, 0, 0, 0.5); display: inline-block; padding: 6px 16px; border-radius: 6px;"
          >
            {{ userPhoto ? "我的底照" : "无底照" }}
          </span>
        </div>
      </div>
      <div class="camera">
        <FaceRecognition
          v-if="faceCheckModalOpen"
          width="400"
          height="300"
          :show-recognize-button="true"
          :close-camera="closeCamera"
          @on-recognize-result="getFaceRecognitionResult"
        >
        </FaceRecognition>
      </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>
    <div slot="footer"></div>
  </Modal>
</template>

<script>
import FaceRecognition from "@/components/FaceRecognition/FaceRecognition.vue";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("examHomeModule");

export default {
  name: "OnlineExamFaceCheckModal",
  components: {
    FaceRecognition,
  },
  props: {
    open: { type: Boolean, default: false },
    course: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      userPhoto: this.$store.state.user.photoPath,
      closeCamera: false,
    };
  },
  computed: {
    ...mapState(["faceCheckModalOpen"]),
  },
  methods: {
    ...mapMutations(["toggleFaceCheckModal"]),
    closeModal() {
      this.closeCamera = true;
      this.toggleFaceCheckModal(false);
    },
    updateCameraState(modalVisible) {
      this.closeCamera = !modalVisible;
    },
    getFaceRecognitionResult({ error, faceCount, pass }) {
      if (error) {
        console.log(error, faceCount, pass);
        this.$Message.error(error);
        return;
      }

      if (!pass) {
        this.$Message.error({
          content: "人脸比对失败",
          duration: 15,
          closable: true,
        });
        window._hmt.push([
          "_trackEvent",
          "在线考试列表页面",
          "人脸比对框",
          "比对失败",
        ]);
        if (!this.course.faceCheck) {
          this.toggleFaceCheckModal(false);
          this.$Modal.confirm({
            title: "郑重承诺",
            content:
              "我承诺由本人参加考试，并且同意接受考试监控系统信息审核，一经发现作弊，立即取消本门课程考试成绩。",
            onOk: () => {
              this.logger({ action: "进入考试", detail: "承诺同意" });
              this.$router.push(
                `/online-exam/exam/${this.course.examId}/overview?examStudentId=${this.course.examStudentId}`
              );
            },
          });
        }
        return;
      }
      this.$Message.success({
        content: "人脸比对成功",
        duration: 5,
        closable: true,
      });
      window._hmt.push([
        "_trackEvent",
        "在线考试列表页面",
        "人脸比对框",
        "比对成功",
      ]);
      window._hmt.push([
        "_trackEvent",
        "在线考试列表页面",
        "进入考试",
        "人脸检测成功",
      ]);
      this.toggleFaceCheckModal(false);
      this.logger({ action: "进入考试", detail: "人脸检测成功" });
      this.$router.push(
        `/online-exam/exam/${this.course.examId}/overview?examStudentId=${this.course.examStudentId}`
      );
    },
  },
};
</script>

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

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