<template>
  <div
    class="login-container"
    :style="{
      'background-image': `url(${
        configOptions.backgroundUrl ? JSON.parse(configOptions.backgroundUrl)[0].url : getImageUrl('bg.png')
      })`,
    }">
    <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 v-if="configOptions && configOptions.patent">{{ configOptions.patent }}</p>
      <p v-if="configOptions">
        <span class="can_click_text" @click="open(configOptions.icpUrl)"> {{ configOptions.icpFiling }} | </span>
        <span class="can_click_text" @click="open(configOptions.publicSecurityUrl)">
          {{ configOptions.publicSecurityFiling }}
        </span>
      </p>
      <p>
        <span class="can_click_text" @click="open(configOptions.legalStatementUrl)">法律声明</span> |
        <span class="can_click_text" @click="open(configOptions.privacyPolicyUrl)"> 隐私政策 </span>
      </p>
    </div>
  </div>
</template>

<script setup>
import LoginByAccount from "@/components/login-by-account.vue";
import LoginByCode from "@/components/login-by-code.vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { ref, onBeforeMount, onMounted } from "vue";
import { useRouter } from "vue-router";
import store from "../../store";
import { getImageUrl } from "@/services/helper.js";
const router = useRouter();

const pageType = ref("login");
const loginTab = ref("account");

const configOptions = ref({});
const switchPageType = (type) => {
  // pageType.value = type
  router.push("/registe");
};
const password = () => {
  router.push("/password");
};
const getLoginPageConfig = () => {
  axios.get(`/apaas/system/v5/login/loginDetail`).then((res) => {
    if (res.data.code == 200) {
      configOptions.value = res.data.data || null;
      store.commit("setSystemLogo", configOptions.value.logoUrl);
    } else {
      ElMessage.error(res.data.data);
    }
  });
};

const open = (url) => {
  if (url !== "") {
    window.open(url);
  } else {
    return;
  }
};
onBeforeMount(() => {
  getLoginPageConfig();
});
</script>

<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: calc(100vh - 56px);
  background-image: url("@/assets/imgs/bg.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>
