<template>
  <pop class="lofty-under-mask-pop" ref="popRef" :on-close="onClose" popMaskClass="lofty-filter-blur-mask" :allowClose="false">
    <div v-if="!loginStatus" class="pop-protect-container">
      <div class="title">
        Free Account Required
      </div>
      <div class="protect-content">
        <ul>
          <li>Instant access to listing photos & details</li>
          <li>Save listings and searches</li>
          <li>Access details for this property</li>
        </ul>
      </div>
      <div class="protect-footer">
        <div class="footer-cancel" @click="registerLogin('login')">Sign In</div>
        <div class="footer-confirm"  @click="registerLogin('register')">Register</div>
      </div>
    </div>
    <div v-else-if="!vowStatus" class="pop-protect-container">
      <div class="title">
        Email Verification Required
      </div>
      <div class="protect-content">
        Go Verify your email at <span class="lofty-link">{{ user.account }}</span>
        <div class="lofty-tip">
          If you failed to receive the code, please refresh the page and click on the button again to request another one.
        </div>
      </div>
      <div class="protect-footer">
        <div class="footer-confirm" style="margin-left: auto"
             :disabled="disabled"  @click="sendEmail">Verify Your Email</div>
      </div>
    </div>
  </pop>
</template>


<script setup>
import pop from '@/components/pop/index.vue';
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, user } = userState
const popRef = useTemplateRef('popRef')
const { isDetailPage, onClose } = defineProps({
  isDetailPage: {
    type: Boolean,
    default: false
  },
  onClose: Function,
})

function registerLogin(type) {
  showSignIn(()=>{
    if(!isDetailPage) {
      window.location.reload()
    }
  },'', type)
}
const disabled = ref(false)
function sendEmail() {
  if (disabled.value) {
    return
  }
  verifyEmail(()=>{
    disabled.value = true
  })
}
onMounted(()=>{
  popRef.value.open();
})
</script>
<style lang="scss">
.pop-protect-container {
  width: 500px;
  background: #fff;
  @include media-600 {
    width: 350px;
    margin: 0 auto;
  }
  .title {
    font-size: 16px;
    height: 50px;
    font-family: var(--lofty-font-bold);
    color: rgba(25, 25, 25, 1);
    border-bottom: rgba(218, 218, 218, 0.5) solid 1px;
    padding-left: 20px;
    padding-top: 16px;
    position: relative;
  }
  .protect-content {
    padding: 20px 30px;
    font-size: 14px;
    font-family: var(--lofty-font-regular);
    line-height: 27px;
    li {
      list-style: disc;
    }
    .lofty-tip {
      margin-top: 12px;
      font-size: 12px;
      color: #A8A8A8;
      line-height: 20px;
    }
  }
  .protect-footer {
    display: flex;
    align-items: center;
    border-top: rgba(218, 218, 218, 0.5) solid 1px;
    padding: 20px 0;
    > div {
      min-width: 100px;
      height: 40px;
      padding: 0 15px;
      line-height: 40px;
      text-align: center;
      font-size: 14px;
      font-family: var(--lofty-font-regular);
      cursor: pointer;
    }
    .footer-cancel {
      color: #111;
      border: solid 1px #DADADA;
      margin-left: auto;
    }
    .footer-confirm {
      margin-right: 20px;
      margin-left: 20px;
      color: #fff;
      background: #111111;
      &[disabled=true] {
        opacity: 0.8;
        cursor: not-allowed;
      }
    }
  }
}
.lofty-filter-blur-mask {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
</style>