<template>
  <div>
    <!-- <Transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
      <div class="mask" v-show="faceState"></div>
    </Transition> -->
    <Transition :enter-active-class="proxy?.animate.face.enter"
      :leave-active-class="direction == 'right' ? proxy?.animate.face.right : faceCheckStu.student_id ? proxy?.animate.face.left : proxy?.animate.face.leave">
      <div class="confirmDiaBg" v-show="faceState">
        <div class="confirmDiaWindow">
          <div class="confirmDiaWindow-con">
            <div class="pic" :class="{ 'pic2': faceCheckStu.student_id }" v-if="faceCheckStu.student_id"> <img
                :src="faceCheckStu.face_pic || faceCheckStu.logo_url" /></div>
            <div class="pic" v-else>
              <div class="shine">
                <img src="@/assets/images/common/shine.png" />
              </div>
              <img src="@/assets/images/test/profilePicture.png" />
            </div>
            <div class="name" :class="{ 'name2': faceCheckStu.student_id }">
              {{ faceCheckStu.student_id ? faceCheckStu.name : gesture ? "请举右手看摄像头进行人脸识别" : "请看摄像头进行人脸识别" }}
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </div>

</template>
<script setup lang="ts">
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance() as any;

//父值
const props = defineProps({
  faceCheckStu: {
    type: Object,
    default: {}
  },
  gesture: {
    type: Boolean,
    default: false
  },
});


const data = reactive<any>({
  faceState: false,//人脸识别窗口状态
  direction: "",//动画方向
  parameter: {},//参数
});

const { faceState, direction, parameter } = toRefs(data);

//打开
const open = () => {
  direction.value = "";
  faceState.value = true;
};

//关闭
const close = (data?: any) => {
  if (data == "right") {
    direction.value = data;
  } else {
    direction.value = "";
  }
  faceState.value = false;
};

//暴露给父组件用
defineExpose({
  faceState,
  open,
  close
})
</script>
<style lang="scss" scoped>
.mask {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 998;
}

.confirmDiaBg {
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;

  .confirmDiaWindow {
    width: 23.5%;
    height: 43.4%;
    border-radius: 1.6rem;
    opacity: 1;
    background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;

    .confirmDiaWindow-con {
      .pic {
        width: 22.3vh;
        height: 22.3vh;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
        margin: 0 auto 2vh auto;

        .shine {
          position: absolute;
          left: -5vh;
          top: 0;
          width: 5vh;
          height: 22.3vh;
          animation: shineani 3s infinite;
          -webkit-animation: shineani 3s infinite;
          z-index: 1;

          img {
            width: 100%;
            height: 100%;
          }
        }

        img {
          width: 100%;
        }
      }

      .pic2 {
        box-sizing: border-box;
        border: 0.44rem solid rgba(26, 41, 58, 0.6315);
      }

      .name {
        width: 100%;
        color: #1A293A;
        font-size: 1.9rem;
      }

      .name2 {
        padding: 0 0.3rem;
        border-radius: 1.1rem;
        background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
        box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.9046), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.0851);
      }
    }
  }
}

@keyframes shineani {
  0% {
    left: -5vh;
  }

  100% {
    left: calc(22.3vh + 5vh);
  }
}
</style>
