<template>
    <div class="login-container">
      <div class="bg-warning">系统有效期剩余345 天，请管理员及时更换license！</div>
      <div class="bg-main">
        <!-- <div class="bg-logo">
          <img class="logo" src="../../assets/imgs/login_img_logo.png" />
        </div> -->
  
        <div class="bg-content">
          <bg-tabs
            class="login-tab"
            v-model="loginTab"
            style="min-height: 450px;width: 480px"
            v-if="pageType === 'login'"
          >
            <bg-tab label="账号密码登录" name="account">
              <LoginByAccount  @register="switchPageType('account')" @password="password"/>
            </bg-tab>
            <bg-tab label="验证码登录" name="register">
              <LoginByCode  @register="switchPageType('register')" @password="password"/>
            </bg-tab>
          </bg-tabs>
        </div>
      </div>
      <!-- v-if="pageType !== 'register'" -->
      <div class="bg-msg">
        <p>
          Copyright © 比格大数据, All Rights Reserved.
        </p>
        <p>
          ICP备案序号：晋ICP备12000773号 | 晋公网安备 14010602060307号
        </p>
        <p>
          法律声明 | 隐私政策
        </p>
      </div> 
    
      
    </div>
  </template>
  
  <script setup>
  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";
  import { ref, computed, onMounted } from "vue";
  import { useRouter } from "vue-router";
  const router = useRouter();
  
  const pageType = ref('login')
  const loginTab = ref('account')
  const registerTab = ref('registerTab')

  const switchPageType = (type) => {
    // pageType.value = type
    router.push('/registe')

  }
  const password = () => {
    router.push('/password')
  }
  
  </script>
  
  <style lang="scss" scoped>
  .login-container {
    width: 100vw;
    height: calc(100vh - 56px);
    background-image: url("@/assets/imgs/bg_zhuce.png");
    background-size: 100% 100%;
    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-warning {
        text-align: center;
        background-color: #fdf4e2;
        color: #e56600;
        font-size: 14px;
        height: 32px;
        line-height: 32px;
    }
  
    > .bg-msg {
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
      font-size: 14px;
      line-height: 20px;
      color: #616f94;
      text-align: center;
      > p {
        padding: 8px 0;
      }
     
    }
  }
  </style>
  