<template>
  <div class="page-register">
    <div v-show="step == 1" class="register">
      <div class="register__main flex-cm">
        <div class="register__main--poster img-wrap">
          <img
            src="../assets/images/register-poster.png"
            alt="register-poster"
            class="images-poster img-wrap"
          />
        </div>
        <div class="poster--heading">
          <img
            src="../assets/images/title-page.png"
            alt="images-quooly"
            class="poster--quooly img-wrap"
          />
          <h4 class="poster__name-membership">無料会員登録</h4>
          <h5 class="poster__heading-desc">
            Real Estate Investment that Continues To Illuminate The Future.
          </h5>
        </div>
        <form
          id="register-form"
          class="register__form"
          @submit.prevent="submit"
        >
          <div class="form--control">
            <label class="register__form--control-label">お名前</label>
            <div class="form--control-group">
              <div class="form__control-flex flex-cm between-justify">
                <input
                  v-model="model.first_name"
                  v-validate="'required|max:255'"
                  name="first_name"
                  class="register__form-input-flex"
                  type="text"
                  placeholder="姓"
                />
                <input
                  v-model="model.last_name"
                  v-validate="'required|max:255'"
                  name="last_name"
                  class="register__form-input-flex"
                  type="text"
                  placeholder="名"
                />
              </div>
              <div
                v-if="errors.has('first_name') || errors.has('last_name')"
                class="error-message"
              >
                {{
                  errors.first('first_name')
                    ? errors.first('first_name')
                    : errors.first('last_name')
                }}
              </div>
            </div>
          </div>
          <div class="form--control">
            <label class="register__form--control-label">お名前（カナ）</label>
            <div class="form--control-group">
              <div class="form__control-flex flex-cm between-justify">
                <input
                  v-model="model.first_name_furigana"
                  v-validate="'required|max:255|furigana'"
                  name="first_name_furigana"
                  class="register__form-input-flex"
                  type="text"
                  placeholder="セイ"
                />
                <input
                  v-model="model.last_name_furigana"
                  v-validate="'required|max:255|furigana'"
                  class="register__form-input-flex"
                  name="last_name_furigana"
                  type="text"
                  placeholder="メイ"
                />
              </div>
              <div
                v-if="
                  errors.has('first_name_furigana') ||
                  errors.has('last_name_furigana')
                "
                class="error-message"
              >
                {{
                  errors.first('first_name_furigana')
                    ? errors.first('first_name_furigana')
                    : errors.first('last_name_furigana')
                }}
              </div>
            </div>
          </div>
          <div class="form--control">
            <label for="" class="register__form--control-label"
              >メールアドレス</label
            >
            <div class="form--control-group">
              <input
                ref="email"
                v-model="model.email"
                v-validate="'required|email|unique_custom'"
                name="email"
                class="form--control-input"
                type="text"
                placeholder="メールアドレスを入力"
              />
              <div v-if="errors.has('email')" class="error-message">
                {{ errors.first('email') }}
              </div>
            </div>
            <div class="form--control-group">
              <input
                v-model="model.re_email"
                v-validate="'required|confirmed:email'"
                name="re_email"
                class="form--control-input"
                type="text"
                placeholder="確認用メールアドレス"
              />
              <div v-if="errors.has('re_email')" class="error-message">
                {{ errors.first('re_email') }}
              </div>
            </div>
          </div>
          <div class="form--control">
            <label for="" class="register__form--control-label">電話番号</label>
            <div class="form--control-group">
              <input
                v-model="model.phone_number"
                v-validate="'required|phone_number'"
                name="phone_number"
                class="form--control-input"
                type="text"
                placeholder="例）08012345678"
              />
              <div v-if="errors.has('phone_number')" class="error-message">
                {{ errors.first('phone_number') }}
              </div>
            </div>
          </div>
          <div class="form--control">
            <div class="form--control-group input-privacy-accept">
              <label>
                <input
                  v-validate="'required'"
                  type="checkbox"
                  name="privacy_accept"
                  value="個人情報取扱規定に同意する"
                />
                <span class="check"></span>個人情報取扱規定に同意する
              </label>
              <p class="notes">
                当社の<NuxtLink to="/privacy-policy" target="_blank"
                  >個人情報の取扱規定</NuxtLink
                >について同意される方のみ送信できます。
              </p>
              <div v-if="errors.has('privacy_accept')" class="error-message">
                {{ errors.first('privacy_accept') }}
              </div>
            </div>
          </div>
          <v-btn type="submit" class="btn-register btn-common btn btn-gradient">
            確認画面
          </v-btn>
        </form>
      </div>
      <div class="register__content">
        <div class="register__content--membership register__content--box">
          <h4 class="content__membership-registration">会員登録の</h4>
          <h4 class="membership--registration__name">3つのメリット</h4>
          <h4 class="membership--registration__sub txt-gold">＊すべて無料</h4>
        </div>
        <div class="register__content-premium register__content--box">
          <h4 class="content-membership-registration register__content-number">
            01
          </h4>
          <h4 class="membership--registration__name register__content-name01">
            プレミアム物件閲覧
          </h4>
          <h4 class="membership--registration__sub">
            会員様限定のプレミアム物件を<br />
            閲覧いただけます。
          </h4>
        </div>
        <div class="register__content-premium02 register__content--box">
          <h4 class="content-membership-registration">02</h4>
          <h4 class="membership--registration__name">不動産とのマッチ度</h4>
          <h4 class="membership--registration__sub">
            お客様の好みの物件が一目でわかります。
          </h4>
        </div>
        <div class="register__content-premium02 register__content--box">
          <h4 class="content-membership-registration">03</h4>
          <h4 class="membership--registration__name">お得な最新情報をお届け</h4>
          <h4 class="membership--registration__sub">
            新着情報をいち早くお届けします。
          </h4>
        </div>
      </div>
    </div>
    <div v-show="step == 2">
      <div class="container-main">
        <CommonUserBreadcrumb :breadcrumbs="breadcrumbs" />
      </div>
      <div class="confirm__main">
        <div class="contact__box">
          <h4 class="pages-title">新規会員登録</h4>
          <div class="table-common">
            <table>
              <tr>
                <th>
                  <div class="form__label">お名前</div>
                </th>
                <td>
                  <div class="form__group_input">
                    {{ model.first_name }}
                    {{ model.last_name }}
                  </div>
                </td>
              </tr>
              <tr>
                <th>
                  <div class="form__label">お名前（カナ）</div>
                </th>
                <td>
                  <div class="form__group_input">
                    {{ model.first_name_furigana }}
                    {{ model.last_name_furigana }}
                  </div>
                </td>
              </tr>
              <tr>
                <th>
                  <div class="form__label">メールアドレス</div>
                </th>
                <td>
                  <div class="form__group_input user-furigana">
                    {{ model.email }}
                  </div>
                </td>
              </tr>
              <tr>
                <th>
                  <div class="form__label">電話番号</div>
                </th>
                <td>
                  <div class="form__group_input">{{ model.phone_number }}</div>
                </td>
              </tr>
            </table>
          </div>
          <v-btn
            type="submit"
            form="register-form"
            class="btn-common btn-confirm btn btn-gradient"
            color="primary"
          >
            登録
          </v-btn>
        </div>
      </div>
    </div>
    <div v-show="step == 3">
      <div class="container-main">
        <CommonUserBreadcrumb :breadcrumbs="breadcrumbs" />
      </div>
      <div class="complete">
        <h2 class="complete--title">新規会員登録</h2>
        <div class="complete__main">
          <h3 class="complete__main--title">
            ありがとうございます。会員登録が完了しました。
          </h3>
          <h4 class="complete__main--sub">
            ご登録のメールアドレスへ、パスワード通知メールをお送りしました。
            <br />
            メールに書かれているメールアドレスとパスワードで
            <nuxt-link to="/login" class="main--sub__color">ログイン</nuxt-link>
            いただきますと、会員専用コンテンツがご覧いただけます。
          </h4>
          <div class="content__feedback">
            <h4 class="content__feedback--name">メールが届かない場合</h4>
            <h4 class="content__feedback--check">
              ・迷惑フォルダをご確認ください
              <br />
              ・ご登録のメールアドレスが誤っている可能性がございます。お手数ですが<a
                href="/register"
                class="main--sub__color"
                >会員登録フォーム</a
              >より再度ご登録ください。
            </h4>
            <br />
            <h4 class="content__feedback--email">
              その他、お困りの事がございましたら、下記のメールアドレスまでお問い合わせ下さい。
              <br />
              info@quooly.jp
            </h4>
          </div>
          <NuxtLink to="/login" class="btn btn-common btn-complete btn-gradient"
            >ログイン画面へ</NuxtLink
          >
        </div>
      </div>
    </div>
    <CommonSearchNews />
  </div>
</template>
<script>
import $ from 'jquery'
export default {
  name: 'RegisterPage',
  data() {
    return {
      title: '無料会員登録',
      model: {},
      step: 1,
      breadcrumbs: [
        {
          text: 'QUOOLY ',
          disabled: false,
          href: '/'
        },
        {
          text: ' マイページ',
          disabled: true
        }
      ]
    }
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.title + ' | Quooly不動産投資と収益物件の総合情報'
        }
      ]
    }
  },
  created() {
    const messError = {
      custom: {
        first_name: {
          required: 'お名前を入力してください。',
          max: '255文字以内で入力してください。'
        },
        last_name: {
          required: 'お名前を入力してください。',
          max: '255文字以内で入力してください。'
        },
        first_name_furigana: {
          required: 'フリガナで入力してください。',
          max: '255文字以内で入力してください。',
          furigana: 'フリガナで入力してください。'
        },
        last_name_furigana: {
          required: 'フリガナで入力してください。',
          max: '255文字以内で入力してください。',
          furigana: 'フリガナで入力してください。'
        },
        email: {
          required: 'メールアドレスを入力してください。',
          email: '正しいメールアドレスを入力してください。',
          unique_custom: 'このメールアドレスは既に登録されています。'
        },
        re_email: {
          required: '確認用メールアドレスを入力してください。',
          email: '正しいメールアドレスを入力してください。',
          confirmed: '確認メールアドレスが同じメールアドレスではありません。'
        },
        phone_number: {
          required: '電話番号を入力してください。',
          phone_number: '正しい電話番号をハイフンありでご記入ください。'
        },
        privacy_accept: {
          required: '「個人情報の取扱規定」に同意をお願いいたします。'
        }
      }
    }
    const that = this
    this.$validator.localize('en', messError)
    this.$validator.extend('unique_custom', {
      validate(value, args) {
        return that.$repositories.user
          .checkEmail({ email: value })
          .then((res) => {
            return res.valid
          })
      }
    })
  },
  mounted() {},
  methods: {
    async submit() {
      const that = this
      await this.$validator.validateAll().then(async function (valid) {
        if (valid) {
          if (that.step === 1) {
            that.step++
            return
          }

          const formData = $('#register-form').serializeArray()
          that.$axios.$post(that.$config.credMemberRegisterApi, {
            first_name: formData[0].value,
            last_name: formData[1].value,
            first_name_furigana: formData[2].value,
            last_name_furigana: formData[3].value,
            email: formData[4].value,
            phone_number: formData[6].value
          })

          await that.$repositories.user.register(
            $('#register-form').serialize()
          )
          that.step = 3
        } else {
          that.step = 1
          that.$nuxt.$loading.hide()
          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>
