<template>
  <div class="page-login">
    <div class="main-content">
      <img data-not-lazy class="pc img" src="~assets/images/title-page.png" alt="Title" />
      <div class="background-img pc">
        <img data-not-lazy src="~assets/images/login.png" alt="Login" />
        <h4>ログイン</h4>
        <p>Real Estate Investment that Continues To Illuminate The Future.</p>
      </div>
      <form class="form-login" autocomplete="off" @submit.prevent="submit">
        <div class="form-login-header sp">ログイン</div>
        <div class="email-title">メールアドレス</div>
        <input
          v-model="model.email"
          v-validate="'required|email'"
          autocomplete="off"
          type="text"
          name="email"
          placeholder="メールアドレスを入力"
        />
        <div v-if="errors.has('email')" class="error-message">
          {{ errors.first('email') }}
        </div>
        <div class="password">パスワード</div>
        <input
          v-model="model.password"
          v-validate="'required|min:8|max:16|password_rule'"
          autocomplete="off"
          type="password"
          name="password"
          placeholder="メールアドレスを入力"
        />
        <div v-if="errors.has('password')" class="error-message">
          {{ errors.first('password') }}
        </div>
        <NuxtLink to="/forgot-password">
          <div class="forgot-password">→パスワードを忘れた方</div>
        </NuxtLink>
        <div v-if="messageError" class="error-message error-account">
          {{ messageError }}
        </div>
        <button type="submit" class="btn-gradient btn btn-common btn-login">
          ログイン
        </button>
      </form>
    </div>
    <div class="foo">
      <div class="box-1">
        <div class="el">
          まだ<span>会員登録</span>が<br class="pc" />お済みでないお客様へ
        </div>
        <p class="p">＊すべて無料</p>
      </div>
      <div class="foo-el">
        <div class="num">01</div>
        <div class="foo-el__wrap">
          <div class="foo-el__title">プレミアム物件閲覧</div>
          <div class="desc">
            会員様限定のプレミアム物件を<br class="pc"/>閲覧いただけます
          </div>
        </div>
      </div>
      <div class="foo-el">
        <div class="num">02</div>
        <div class="foo-el__wrap">
          <div class="foo-el__title">不動産とのマッチ度</div>
          <div class="desc">お客様の好みの物件が<br class="pc"/>一目でわかります</div>
        </div>
      </div>
      <div class="foo-el">
        <div class="num">03</div>
        <div class="foo-el__wrap">
          <div class="foo-el__title">お得な最新情報をお届け</div>
          <div class="desc">新着情報をいち早くお届けします</div>
        </div>
      </div>
      <div class="foo-el br-none">
        <NuxtLink to="/register">
          <div class="btn-outline">会員登録</div>
        </NuxtLink>
      </div>
    </div>
    <CommonSearchNews class="sp login-search-footer" />
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'PagesLogin',
  middleware: ['guest'],
  data() {
    return {
      title: 'ログイン',
      model: {},
      messageError: ''
    }
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.title + ' | Quooly不動産投資と収益物件の総合情報'
        }
      ]
    }
  },
  watch: {
    'model.email'(value) {
      this.messageError = ''
    },
    'model.password'(value) {
      this.messageError = ''
    }
  },
  created() {
    const messError = {
      custom: {
        email: {
          required: 'メールアドレスを入力してください。',
          email: 'メールアドレス形式が正しくありません。'
        },
        password: {
          required: 'パスワードを入力してください。',
          max: 'パスワードは８文字～１６文字入力してください',
          min: 'パスワードは８文字～１６文字入力してください',
          password_rule:
            'パスワードは半角英数字で、大文字、小文字、数字で入力してください'
        }
      }
    }
    this.$validator.localize('en', messError)
  },
  mounted() {},
  methods: {
    async submit() {
      const that = this
      await this.$validator.validateAll().then(async function (valid) {
        if (valid) {
          try {
            that.$nuxt.$loading.show()
            await that.$auth.loginWith('user', {
              data: {
                email: that.model.email,
                password: that.model.password
              }
            })
            that.$router.push('/user')
          } catch (error) {
            that.messageError = 'ユーザー名とパスワードが一致しません。'
          } finally {
            that.$nuxt.$loading.hide()
          }
        } else {
          that.$el
            .querySelector(
              '[name=' + Object.keys(that.errors.collect())[0] + ']'
            )
            .focus()
          $('html, body').animate(
            {
              scrollTop:
                $(
                  '[name=' + Object.keys(that.errors.collect())[0] + ']'
                ).offset().top - 104
            },
            500
          )
        }
      })
    }
  }
}
</script>
