<template>
  <div class="udb_box">
    <div class="bg"></div>
    <div class="udb">
      <!-- 手机号密码注册 -->
      <RegPhonePwd v-if="showReg" @onLogin="onLogin" />
      <!-- 账号/手机号密码登录 -->
      <Login
        v-if="showLogin"
        @onVisitor="onVisitor"
        @onReg="onReg"
        @onForget="onForget"
      />
      <!-- 忘记密码 -->
      <Forget v-if="showForget" @onLoginForget="onLoginForget" />
      <!-- 快速登录 -->
      <VisitorLogin v-if="showVisitorLogin" :visitorInfo="visitorInfo" />
    </div>
  </div>
</template>

<script>
import RegPhonePwd from "@/components/UDB/RegPhonePwd"; // 手机号密码注册
import Login from "@/components/UDB/Login"; // 账号/手机号密码登录
import Forget from "@/components/UDB/Forget"; // 忘记密码
import VisitorLogin from "@/components/UDB/VisitorLogin"; // 快速登录
import { mapState } from "vuex";
export default {
  name: "UdbBox",
  components: {
    RegPhonePwd,
    Login,
    Forget,
    VisitorLogin,
  },
  data() {
    return {
      showReg: false, // 展示注册
      showLogin: false, // 展示登录
      showForget: false, // 展示忘记密码
      showVisitorLogin: false, // 展示快速登录账密
      closeVisitor: null, // 快速登录弹窗关闭延时器
      visitorInfo: "", // 快速登录组件需要的信息
    };
  },
  computed: {
    ...mapState(["isLogin"]),
  },
  watch: {},
  created() {},
  mounted() {
    this.showLogin = !this.isLogin;
  },
  beforeDestroy() {
    clearTimeout(this.closeVisitor);
  },
  methods: {
    // 展示登录
    onLogin() {
      this.showReg = false;
      this.showLogin = true;
    },

    // 快速登录账密
    onVisitor(visitorInfo) {
      this.showVisitorLogin = true;
      this.showLogin = false;
      this.visitorInfo = visitorInfo;
    },

    // 注册
    onReg() {
      this.showReg = true;
      this.showLogin = false;
    },

    // 忘记密码
    onForget() {
      this.showForget = true;
      this.showLogin = false;
    },

    // 返回登录
    onLoginForget() {
      this.showForget = false;
      this.showLogin = true;
    },
  },
};
</script>

<style lang='less' scoped>
.udb_box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.6);
}
@media screen and (orientation: landscape),
  /**竖屏 */ all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad */ all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .udb_box {
    min-height: 270 / @rem;
    overflow-y: auto;
  }
}
</style>