<template>
    <div class="login-container">
      <div class="bg-main">
        <div class="bg-logo">
          <img class="logo" src="../../assets/imgs/login_img_logo.png" />
          <!-- <span>BD-aPaaS</span> -->
        </div>
  
        <div class="bg-content">
          <bg-tabs
            class="login-tab"
            v-model="loginTab"
            style="min-height: 450px;"
            v-if="pageType === 'login'"
          >
            <bg-tab label="账号密码登录" name="account">
              <LoginByAccount @register="switchPageType('register')" />
            </bg-tab>
          </bg-tabs>
        </div>
      </div>
  
      <p class="bg-msg" v-if="pageType !== 'register'">
        登录即代表您已同意 <span>《BD-aPaaS平台用户协议与隐私政策》</span>
      </p>
    </div>
  </template>
  
  <script>
  import LoginByAccount from "@/components/login-by-account.vue";
  // import LoginByCode from "@/components/login-by-code.vue";
  // import RegisterPersonalUser from "@/components/register-personal-user.vue";
  // import RegisterFrimUser from "@/components/register-firm-user.vue";
  // import RegisterOrgUser from "@/components/register-org-user.vue";
  // import RegisterSuccess from "@/components/register-success.vue";
  
  export default {
    name: "Index",
    components: {
      LoginByAccount,
      // LoginByCode,
      // RegisterPersonalUser,
      // RegisterFrimUser,
      // RegisterOrgUser,
      // RegisterSuccess,
    },
    data() {
      return {
        pageType: "login", // login（登录） / register（注册） / success（认证）
        loginTab: "account", // account（账号密码登录） / or register（短信验证码登录）
        registerTab: "personal", // personal（个人用户） / firm（企业用户） / org（政府机构用户）
      };
    },
    methods: {
      switchPageType(type) {
        this.pageType = type;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .login-container {
    width: 100vw;
    height: calc(100vh - 56px);
    background-image: url("@/assets/imgs/login_ysgz.jpg");
    background-size: cover;
    background-position: center center;
    position: relative;
  
    .bg-main {
      position: absolute;
      top: 50%;
      right: 0;
      margin-right: 16vw;
      margin-bottom: 80px;
      transform: translateY(calc(-50%));
      width: 500px;
      max-height: calc(100vh - 100px);
      overflow: hidden auto;
  
      &::-webkit-scrollbar {
        width: 16px;
        height: 1px;
      }
  
      /* &::-webkit-scrollbar-track {
        border-radius: 8px;
        box-shadow: 8px 0 0 #f4f4f4 inset;
        border: 4px solid rgba(0, 0, 0, 0);
      } */
  
      &::-webkit-scrollbar-thumb {
        border-radius: 8px;
        box-shadow: 8px 0 0 #a5adb7 inset;
        border: 4px solid rgba(0, 0, 0, 0);
      }
  
      > .bg-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        .logo{
          width: 450px;
        }
  
        > span {
          font-size: 36px;
          color: #ffffff;
          margin-left: 25px;
        }
      }
  
      > .bg-content {
  
      }
    }
  
    > .bg-msg {
      position: absolute;
      bottom: 70px;
      left: 0;
      width: 100%;
      font-size: 14px;
      line-height: 20px;
      color: #bcc1d0;
      text-align: center;
  
      > span {
        color: #fff;
        cursor: pointer;
      }
    }
  }
  </style>
  