<template>
  <div class="lofty-house-mask-blur">
    <div v-if="showLock" class="lofty-house-login-box">
      <div class="lock-circle">
        <i class="lofty_iconfont lofty-icon-lock1"></i>
      </div>
      <template v-if="!loginStatus">
        <div class="lock-desc">Free Account Required</div>
        <div class="login-desc">
          <span @click="registerLogin('register')">Register</span> or
          <span @click="registerLogin('login')">Login</span>
          to view details
        </div>
      </template>
      <template v-else-if="!vowStatus">
        <div class="lock-desc">Email Verification Required</div>
        <div class="login-desc text-center">
          <span @click="verifyEmail">Verify Your Email</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { showSignIn } from "@/common/sign-log/index.js";
import { userState } from "@/common/sign-log/user.js";
import verifyEmail from "@/common/verify-email.js";
const { loginStatus, vowStatus } = userState
const { showLock } = defineProps({
  showLock :{
    type: Boolean,
    default: true
  }
})
function registerLogin(type) {
  showSignIn(()=>{},'', type)
}
</script>

<style lang="scss">
.lofty-house-mask-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10;
  .lofty-house-login-box {
    .lock-circle {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #fff;
      line-height: 48px;
      text-align: center;
      margin: auto;
      i.lofty_iconfont {
        font-size: 24px;
      }
    }
    .lock-desc {
      font-size: 14px;
      color: #fff;
      margin-top: 10px;
      text-align: center;
      font-family: 'font-regular';
    }
    .login-desc {
      font-size: 12px;
      color: #fff;
      margin-top: 6px;
      font-family: 'font-regular';
      > span {
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
}
</style>