<template>
  <div
    class="login-container"
    :style="{
      'background-image': `url(${
        configOptions.backgroundUrl
          ? JSON.parse(configOptions.backgroundUrl)[0].url
          : getImageUrl('bg.png')
      })`,
    }">
    <el-alert v-if="showValidityDays" class="bg-warning" :title="validityTips" type="warning" />
    <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="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>

    <el-dialog class="dialog_box" title="提示" v-model="dialogPasswordChange" width="400px">
      <div>密码已过期，请修改密码后再次登录</div>
      <template v-slot:footer>
        <div class="apaas_button">
          <el-button type="primary" @click="password">立即修改</el-button>
        </div>
      </template>
    </el-dialog>
  </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, timeDifference } from "@/services/helper.js";
import { result } from "lodash";
const router = useRouter();

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

const configOptions = ref({});
const dialogPasswordChange = ref(false);
//剩余有效期提醒文案
const validityTips = ref("");
//是否展示剩余有效期提醒
const showValidityDays = ref(false);

onBeforeMount(() => {
  getLoginPageConfig();
  getSysOptions();
});

const switchPageType = (type) => {
  // pageType.value = type
  router.push("/register");
};
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 getSysOptions = () => {
  axios.get(`/apaas/system/v5/sysOptions`).then((res) => {
    if (res.data.code == 200) {
      const result = res.data.data || {};
      if (result.license_dead_date && result.license_inform_day) {
        calculateValidityDays(
          new Date().getTime(),
          new Date(result.license_dead_date).getTime(),
          result.license_inform_day
        );
      }
    } else {
      ElMessage.error(res.data.data);
    }
  });
};
const calculateValidityDays = (start, end, validityTipsLimit) => {
  if (start > end) {
    validityTips.value = "系统已过有效期，请管理员更换license！";
    showValidityDays.value = true;
    return;
  }
  const leaveTimeConfig = timeDifference(start, end);
  if (leaveTimeConfig.days > validityTipsLimit) return;
  validityTips.value = `系统有效期剩余${leaveTimeConfig.days}天，请管理员及时更换license！`;
  showValidityDays.value = true;
};
const open = (url) => {
  if (url !== "") {
    window.open(url);
  } else {
    return;
  }
};
</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;
  background-size: cover;
  position: relative;

  .bg-main {
    position: absolute;
    top: calc(50vh - 250px);
    right: calc(28vw - 240px);
    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 {
      :deep(.bg-tabs-content) {
        padding: 32px 0;
      }
    }
    :deep(.el-form) {
      .el-form-item {
        .el-input,
        .el-button {
          height: 40px;
        }
      }
    }
  }
  > .bg-warning {
    text-align: center;
    background-color: #fdf4e2;
    color: #e56600;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    display: flex;
    justify-content: center;
  }

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