<template>
  <div>
    <div v-show="step == 1" class="login-business">
      <div class="banner-login banner-register">
        <img data-not-lazy src="../assets/images/banner-register.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="register-company"
        class="form-login pt-80"
        autocomplete="off"
        @submit.prevent="submit"
      >
        <div class="name-title">会社名</div>
        <div class="form-control-group">
          <input
            v-model="model.name"
            v-validate="'required|max:255'"
            type="text"
            name="name"
            placeholder="会社名を入力"
          />
          <div v-if="errors.has('name')" class="error-message">
            {{ errors.first('name') }}
          </div>
        </div>
        <div class="name-title">本社住所</div>
        <div class="form-control-group">
          <input
            v-model="model.address"
            v-validate="'required|max:255'"
            type="text"
            name="address"
            placeholder="本社住所を入力"
          />
          <div v-if="errors.has('address')" class="error-message">
            {{ errors.first('address') }}
          </div>
        </div>
        <div class="name-title">担当者名</div>
        <div class="form-control-group">
          <input
            v-model="model.manager_name"
            v-validate="'required|max:255'"
            type="text"
            name="manager_name"
            placeholder="担当者名を入力"
          />
          <div v-if="errors.has('manager_name')" class="error-message">
            {{ errors.first('manager_name') }}
          </div>
        </div>
        <div class="email-title">担当者メールアドレス</div>
        <div class="form-control-group">
          <input
            v-model="model.email"
            v-validate="'required|max:255|email|unique_custom'"
            type="text"
            name="email"
            placeholder="メールアドレスを入力"
          />
          <div v-if="errors.has('email')" class="error-message">
            {{ errors.first('email') }}
          </div>
        </div>

        <div class="number-title">担当者電話番号</div>
        <div class="form-control-group">
          <input
            v-model="model.tel"
            v-validate="'required|phone_number'"
            type="text"
            name="tel"
            placeholder="例）08012345678"
          />
          <div v-if="errors.has('tel')" class="error-message">
            {{ errors.first('tel') }}
          </div>
        </div>
        <div class="number-title">免許番号</div>
        <div class="form-control-group pb-0">
          <div class="license-number-gr">
            <select
              v-model="model.license_number"
              v-validate="'required'"
              name="license_number"
              class="license-number"
            >
              <option value="">選択してください</option>
              <option v-for="item in licenseNumbers" :key="item" :value="item">
                {{ item }}
              </option>
            </select>
            <span>（</span>
            <input
              v-model="model.license_number_no1"
              v-validate="'required'"
              type="text"
              name="license_number_no1"
              onKeyPress="if(this.value.length==1) return false;"
              class="license-number-no1"
              placeholder="1"
              @keypress="isNumber($event)"
              />
              <span>）第</span>
            <input
              v-model="model.license_number_no2"
              v-validate="'required|min:6'"
              type="text"
              name="license_number_no2"
              onKeyPress="if(this.value.length==6) return false;"
              class="license-number-no2"
              placeholder="123456"
              @keypress="isNumber($event)"
            />
            <span>号</span>
          </div>
          <div v-if="errors.has('license_number') || errors.has('license_number_no1') || errors.has('license_number_no2')" class="error-message">
            <span v-if="errors.first('license_number_no2') == 'The license_number_no2 field must be at least 6 characters' && !errors.has('license_number') && !errors.has('license_number_no1')">免許番号は6桁で入力してください。</span>
            <span v-else>免許番号を入力してください。</span>
          </div>
        </div>
        <button type="submit" class="btn btn-primary btn-register btn-gradient">
          確認画面
        </button>
      </form>
    </div>
    <div v-show="step == 2">
      <CommonUserBreadcrumb :breadcrumbs="breadcrumbs" />

      <div class="container-main comfirm-page">
        <div class="comfirm-main">
          <div class="main-title">新規会員登録申請</div>
          <div class="table-common">
            <table>
              <tr>
                <th>
                  <div class="form__label">会社名</div>
                </th>
                <td>
                  <div class="form__group_input font-medium">
                    {{ model.name }}
                  </div>
                </td>
              </tr>
              <tr>
                <th>
                  <div class="form__label">本社住所</div>
                </th>
                <td>
                  <div class="form__group_input font-medium">
                    {{ model.address }}
                  </div>
                </td>
              </tr>
              <tr>
                <th>
                  <div class="form__label">担当者名</div>
                </th>
                <td>
                  <div class="form__group_input font-medium">
                    {{ model.manager_name }}
                  </div>
                </td>
              </tr>
              <tr>
                <th>
                  <div class="form__label">担当者メールアドレス</div>
                </th>
                <td>
                  <div class="form__group_input font-medium">
                    {{ model.email }}
                  </div>
                </td>
              </tr>
              <tr>
                <th>
                  <div class="form__label">電話番号</div>
                </th>
                <td>
                  <div class="form__group_input font-medium">
                    {{ model.tel }}
                  </div>
                </td>
              </tr>
              <tr>
                <th>
                  <div class="form__label">免許番号</div>
                </th>
                <td>
                  <div class="form__group_input font-medium">
                    {{ model.license_number }} {{ model.license_number_no1 }}第 {{ model.license_number_no2 }}号
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <button
            type="submit"
            form="register-company"
            class="btn btn-primary btn-confirm btn-gradient d-block btn-confirm"
          >
            登録申請
          </button>
        </div>
      </div>
    </div>
    <div v-show="step == 3">
      <div class="container-main">
        <CommonUserBreadcrumb :breadcrumbs="breadcrumbs" />

        <div class="complete-main comfirm-page">
          <div class="main-title">新規会員登録申請</div>
          <div class="complete-title">
            ありがとうございます。新規登録申請が完了しました。
          </div>
          <p class="complete-notification">
            審査には、<span class="txt-color">最大5営業日</span
            >を頂いております。<br />
            審査完了後、ご登録のメールアドレスに審査結果を通知致しますので、<br />
            いましばらくおまちください。
          </p>
          <div class="notification-contact">
            その他、お困りの事がございましたら、下記のメールアドレスまでお問い合わせ下さい。<br />
            「」info@12345.com
          </div>
          <NuxtLink
            to="/"
            class="btn-primary btn btn-complete btn-gradient"
            color="primary"
            >トップへ戻る</NuxtLink
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'RegisterPage',
  layout: 'auth',
  auth: false,
  data() {
    return {
      model: {
        license_number: ''
      },
      step: 1,
      breadcrumbs: [
        {
          text: 'QUOOLY ',
          disabled: false,
          href: '/'
        },
        {
          text: ' マイページ',
          disabled: true
        }
      ],
      licenseNumbers: [
        '国土交通大臣',
        '北海道知事',
        '青森県知事',
        '岩手県知事',
        '宮城県知事',
        '秋田県知事',
        '山形県知事',
        '福島県知事',
        '茨城県知事',
        '栃木県知事',
        '群馬県知事',
        '埼玉県知事',
        '千葉県知事',
        '東京都知事',
        '神奈川県知事',
        '新潟県知事',
        '富山県知事',
        '石川県知事',
        '福井県知事',
        '山梨県知事',
        '長野県知事',
        '岐阜県知事',
        '静岡県知事',
        '愛知県知事',
        '三重県知事',
        '滋賀県知事',
        '京都府知事',
        '大阪府知事',
        '兵庫県知事',
        '奈良県知事',
        '和歌山県知事',
        '鳥取県知事',
        '島根県知事',
        '岡山県知事',
        '広島県知事',
        '山口県知事',
        '徳島県知事',
        '香川県知事',
        '愛媛県知事',
        '高知県知事',
        '福岡県知事',
        '佐賀県知事',
        '長崎県知事',
        '熊本県知事',
        '大分県知事',
        '宮崎県知事',
        '鹿児島県知事',
        '沖縄県知事',
        '北海道（石狩）知事',
        '北海道（渡島）知事',
        '北海道（檜山）知事',
        '北海道（後志）知事',
        '北海道（空知）知事',
        '北海道（上川）知事',
        '北海道（留萌）知事',
        '北海道（宗谷）知事',
        '北海道（オホ）知事',
        '北海道（胆振）知事',
        '北海道（日高）知事',
        '北海道（十勝）知事',
        '北海道（釧路）知事',
        '北海道（根室）知事',
        '信託会社等'
      ]
    }
  },
  created() {
    const messError = {
      custom: {
        name: {
          required: '会社名を入力してください。',
          max: '255文字以内で入力してください。'
        },
        address: {
          required: '本社住所を入力してください。',
          max: '255文字以内で入力してください。',
          furigana: 'フリガナで入力してください。'
        },
        manager_name: {
          required: '担当者名を入力してください。',
          max: '255文字以内で入力してください。'
        },
        email: {
          required: 'メールアドレスを入力してください。',
          email: '正しいメールアドレスを入力してください。',
          max: '255文字以内で入力してください。',
          unique_custom: 'このメールアドレスは既に登録されています。'
        },
        tel: {
          required: '電話番号を入力してください。',
          phone_number: '正しい電話番号でご記入ください。'
        }
      }
    }
    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
          })
      }
    })
  },
  methods: {
    async submit() {
      const that = this
      await this.$validator.validateAll().then(async function (valid) {
        if (valid) {
          if (that.step === 1) {
            that.step++
            return
          }
          await that.$repositories.user.register(
            $('#register-company').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
          )
        }
      })
    },
    isNumber($event) {
      const keyCode = $event.keyCode ? $event.keyCode : $event.which
      if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) {
        $event.preventDefault()
      }
    }
  }
}
</script>
