<!--
  Program: common error page
  Author: SDL
  Brief: common error page
-->
<template>
  <!-- login -->
  <div v-if="pageDesign === 'login'" class="ui--form-login login-info" style="width: 285px">
    <header class="mb-4">
      <img :src="$CONTEXT + '/static/image/main/simbol.png'" class="mb-3 ui--brand-simbol" alt="System Simbol" />
      <router-link :to="{ name: 'mainIndexPage' }" tag="span" class="brand-text cursor-pointer">
        {{ title }}
      </router-link>
    </header>
    <hr class="mb-4" />
    <div class="message">
      <h5>{{ message }}</h5>
      <p>{{ $t('sdl.common.label.reloginmsg') }}</p>
    </div>
    <button class="btn btn-lg btn-primary" @click="goLogin">{{ $t('sdl.common.label.loginshortcut') }}</button>
  </div>
  <!-- login else -->
  <div v-else class="sdl-center wd-1">
    <div class="msg-box">
      <div class="msg-icon" :class="{ 'text-center': pageDesign === 'common' || pageDesign === 'inactive' }">
        <i class="bi bi-x-circle text-danger icon-size-48"></i>
      </div>
      <div class="msg-text">
        <template v-if="pageDesign === 'inactive'">
          <h3 class="mb-4">{{ message }}</h3>
          <ul class="list-unstyled">
            <li>{{ $t('sdl.commonError') }}</li>
            <li>
              <a href="javascript:">{{ $t('sdl.common.projectHelp') }}</a>
            </li>
          </ul>
        </template>
        <template v-else>
          <h3 class="mb-4">{{ message }}</h3>
          <ul class="list-unstyled">
            <li>{{ $t('sdl.common.label.goMainPage') }}</li>
          </ul>
          <div class="contact">
            <div class="d-block mb-3">
              <button class="btn btn-lg btn-secondary" type="button" @click="goMain">
                {{ $t('sdl.common.label.mainShortcut') }}
              </button>
            </div>
            <div class="d-block">
              <a href="javascript:">{{ $t('sdl.common.projectHelp') }}</a>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>

  <footer v-if="pageDesign === 'login'" class="ui--footer-container">
    <p class="text-muted">
      {{ $t('sdl.common.message.onlyAuthUserLegalSanctions') }}
    </p>
    <span>&copy; Samsung</span>
  </footer>
  <footer v-else class="ui--footer-container">
    <div class="ui--footer-in">
      <span>&copy; Samsung</span>
    </div>
  </footer>
</template>

<script>
import SDLUtil from '@/utils/SDLUtil';

export default {
  data() {
    return {
      message: SDLUtil.getMsgProp('sdl.commonError'),
      title: SDLUtil.getMsgProp('sdl.common.projectName'),
      pageDesign: 'common',
    };
  },
  methods: {
    goLogin() {
      const redirect = this.$route.query.redirect || '';
      if (redirect) {
        this.$router.replace({ path: `${SDLUtil.WEB_CONTEXT_PATH}/login`, query: { redirect: redirect } });
      } else {
        this.$router.replace({ path: `${SDLUtil.WEB_CONTEXT_PATH}/login` });
      }
    },
    goMain() {
      this.$router.replace({ path: `${SDLUtil.WEB_CONTEXT_PATH}/` });
    },
  },
  created() {
    const errorCode = this.$route.query.code || '404';

    const login = ['185', '187', '188', '190', '194', '195', '199', '202'];
    const inactive = ['191', '192', '193', '200', '203'];

    const errList = [
      { code: '185', message: 'sdl.auth.message.user.notFound' },
      { code: '187', message: 'sdl.auth.message.token.retentionTimeout' },
      { code: '188', message: 'sdl.login.noUserInfoByIdEmail' },
      { code: '190', message: 'sdl.auth.message.user.notFound' },
      { code: '191', message: 'sdl.auth.message.user.waiting' },
      { code: '192', message: 'sdl.auth.message.user.inactive' },
      { code: '193', message: 'sdl.auth.message.user.deleted' },
      { code: '194', message: 'sdl.auth.message.token.invalid' },
      { code: '195', message: 'sdl.auth.message.token.notFound' },
      { code: '199', message: 'sdl.auth.message.duplicate.login' },
      { code: '200', message: 'sdl.auth.message.access.limit.exceeded' },
      { code: '202', message: 'sdl.common.message.knoxLoginFail' },
      { code: '203', message: 'sdl.auth.message.user.exceed.password' },
    ];

    if (login.includes(errorCode)) {
      this.pageDesign = 'login';
    } else if (inactive.includes(errorCode)) {
      this.pageDesign = 'inactive';
    }

    if (errList.some(err => err.code === errorCode)) {
      this.message = SDLUtil.getMsgProp(errList.find(err => err.code === errorCode).message);
    } else if (errorCode === '404') {
      this.message = 'Page not found';
    }

    if (this.pageDesign === 'login') {
      document.querySelector('body').classList.add('ui--login-wrap');
    } else {
      document.querySelector('body').classList.add('sdl-wrap');
    }
  },
};
</script>

<style scoped></style>
