<template>
  <div class="ui--wrapper fluid-width s-sub aside-hide">
    <!-- GNB -->
    <header class="container-fluid fixed-top ui--header">
      <nav class="navbar navbar-expand-lg justify-content-between ui--top">
        <!--      <img :src="$CONTEXT + '/static/image/main/simbol.png'" class="ui--brand-simbol" alt="" />-->
        <!--      <router-link :to="{ name: 'mainIndexPage' }" tag="span" class="brand-text cursor-pointer">-->
        <!--        {{ title }}-->
        <!--      </router-link>-->
        <router-link :to="{ name: 'mainIndexPage' }" class="navbar-brand cursor-pointer" href="javascript:">
          <img :src="$CONTEXT + '/static/image/main/simbol.png'" class="ui--brand-simbol" :alt="$t('sdl.common.projectName')" />
          <span class="brand-text">{{ $t('sdl.common.projectName') }}</span>
        </router-link>
      </nav>
    </header>
    <!-- SUB Layout -->
    <section class="ui--section-container">
      <!-- SUB Contents -->
      <div class="ui--content-wrapper">
        <div class="ui--content-heading">
          <strong>{{ $t('sdl.common.label.initPassword') }}</strong>
          <small>{{ $t('sdl.common.label.inquiry') }} : {{ $t('sdl.common.projectHelp') }}</small>
        </div>
        <!--Contents Area -->

        <div class="find-container">
          <div class="mb-4" v-html="$t('sdl.common.message.initPassNSendEmail')"></div>
          <div class="row">
            <label class="col-3 col-form-label"> {{ $t('sdl.common.label.id') }} <span class="ui--text-required">&#42;</span> </label>
            <div class="col-9">
              <input type="text" class="form-control" v-model.trim="userId" v-validation="" errorMessage="sdl.identity.message.emptyId" />
            </div>
          </div>
          <div class="row mt-3">
            <label class="col-3 col-form-label"> {{ $t('sdl.user.label.email') }} <span class="ui--text-required">&#42;</span> </label>
            <div class="col-9"><input type="email" class="form-control" v-model.trim="email" v-validation="" errorMessage="sdl.identity.message.emptyEmail" /></div>
          </div>
          <button class="btn btn-lg btn-primary btn-block w-100 mt-4" type="button" @click="confirm()">
            {{ $t('sdl.common.label.confirm') }}
          </button>
        </div>
        <!--//Contents Area -->
      </div>
    </section>

    <!-- Footer -->
    <footer class="ui--footer-container">
      <div class="ui--footer-in">
        <span>&copy; Samsung</span>
      </div>
    </footer>
  </div>
</template>

<script>
import axios from 'axios';
import { SDLUtil } from '@/utils';

export default {
  data() {
    return {
      title: SDLUtil.getMsgProp('sdl.common.projectName'),
      userId: '',
      email: '',
    };
  },
  created() {
    if (document.querySelector('body').classList.contains('ui--login-wrap')) document.querySelector('body').classList.remove('ui--login-wrap');
    if (document.querySelector('body').classList.contains('sdl-wrap')) document.querySelector('body').classList.remove('sdl-wrap');
    document.querySelector('body').classList.add('register-wrap');
  },
  methods: {
    confirm() {
      // validation
      if (SDLUtil.onSubmitValidation()) return;

      if (this.userId === '' || this.email === '') {
        SDLUtil.alert('sdl.department.message.requiredValue');
        return;
      }

      SDLUtil.showLoadingBar(true);

      // 비밀번호 체크
      axios
        .put(`${SDLUtil.API_URL}/auth/noauth/password-init?id=${this.userId}&email=${this.email}`)
        .then(() => {
          SDLUtil.showLoadingBar(false);

          SDLUtil.alert({
            msg: 'sdl.common.message.temppassSendEmail',
            onOkEvt: () => {
              this.$router.push({ path: `${this.$CONTEXT}/login` });
            },
          });
        })
        .catch(err => {
          SDLUtil.showLoadingBar(false);
          SDLUtil.errorAlert(err);
        });
    },
  },
};
</script>

<style scoped></style>
