<template>
  <div class="login-business">
    <div class="banner-login">
      <img data-not-lazy src="~assets/images/banner-login.png" alt="" class="img-bg"/>
      <div class="banner-login-content">
        <img data-not-lazy src="~assets/images/quooly.png" alt="" class="txt-logo" />
        <div class="txt-jp">ログイン</div>
        <div class="txt-en">
          Real Estate Investment that Continues To Illuminate The Future.
        </div>
      </div>
    </div>
    <form
      id="form-reset"
      class="form-login pt-224"
      autocomplete="off"
      @submit.prevent="submit"
    >
      <div class="email-title">新しいパスワード</div>
      <div class="form-control-group">
        <input
          ref="password"
          v-model="model.password"
          v-validate="'required|min:8|max:16|password_rule'"
          name="password"
          type="password"
          placeholder="メールアドレスを入力"
        />
        <div v-if="errors.has('password')" class="error-message">
          {{ errors.first('password') }}
        </div>
      </div>

      <div class="password-title">新しいパスワード（確認）</div>
      <div class="form-control-group">
        <input
          v-model="model.re_password"
          v-validate="'required|confirmed:password'"
          name="re_password"
          type="password"
          placeholder="新しいパスワード（確認）"
        />
        <div v-if="errors.has('re_password')" class="error-message">
          {{ errors.first('re_password') }}
        </div>
      </div>

      <button type="submit" class="btn btn-primary btn-gradient">
        設定する
      </button>
    </form>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'PagesReset',
  layout: 'auth',
  auth: false,
  data() {
    return {
      model: {}
    }
  },
  async fetch() {
    await this.$repositories.user
      .checkExpireToken({
        token: this.$route.params.id
      })
      .then((res) => {
        if (res.valid === null) {
          this.$router.push('/login')
        }
      })
  },
  created() {
    const messError = {
      custom: {
        password: {
          required: 'パスワードを入力してください',
          max: 'パスワードは８文字～１６文字入力してください',
          min: 'パスワードは８文字～１６文字入力してください',
          password_rule:
            'パスワードは半角英数字で、大文字、小文字、数字で入力してください'
        },
        re_password: {
          required: 'パスワード確認を入力してください',
          confirmed: 'パスワード確認は入力したものと一致しません'
        }
      }
    }
    this.$validator.localize('en', messError)
  },
  mounted() {},
  methods: {
    async submit() {
      const that = this
      await this.$validator.validateAll().then(async function (valid) {
        if (valid) {
          await that.$repositories.user.resetPassword(
            that.$route.params.id,
            $('#form-reset').serialize()
          )
          that.$router.push('/login')
        } 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>
