<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>
