<template>
  <div>
    <v-layout row wrap>
      <v-flex xs12 sm8 offset-sm2 class="border-iy pa-3 my-3">
        <h3 class="title font-weight-bold my-3"> สมัครสมาชิกสำหรับผู้ประกอบการ</h3>
        <v-form @submit.prevent="register()" ref="registerEmployer">
          <v-layout row wrap xs12>
            <v-flex xs12 sm6 class="px-3">
              <label class="font-weight-bold ">ชื่อผู้ใช้ <span class="red--text">&nbsp;*</span></label>
              <v-text-field
                color="cyan darken-4"
                outline
                label="ชื่อผู้ใช้"
                v-model="registerData.username"
                class="mg-ip"
                :rules="[rules.required, rules.space]"
                required
              ></v-text-field>
              
              <label class="font-weight-bold">รหัสผ่าน <span class="red--text">&nbsp;*</span></label>
              <v-text-field
                color="cyan darken-4"
                outline
                label="รหัสผ่าน"
                :append-icon="showPassword ? 'visibility' : 'visibility_off'"
                @click:append="showPassword = !showPassword"
                :type="showPassword ? 'text' : 'password'"
                v-model="registerData.password"
                :rules="[rules.required, rules.min]"
                class="mg-ip"
                required
              ></v-text-field>
              
              <label class="font-weight-bold">รหัสผ่านอีกครั้ง <span class="red--text">&nbsp;*</span></label>
              <v-text-field
                color="cyan darken-4"
                outline
                label="รหัสผ่านอีกครั้ง"
                :append-icon="showPasswordConfirm ? 'visibility' : 'visibility_off'"
                @click:append="showPasswordConfirm = !showPasswordConfirm"
                :type="showPasswordConfirm ? 'text' : 'password'"
                v-model="registerData.password_confirmation"
                :rules="[rules.required, rules.min, pwdMatch]"
                class="mg-ip"
                required
              ></v-text-field>

            </v-flex>
            <v-flex xs12 sm6 class="px-3">
              <label class="font-weight-bold">ชื่อบริษัท <span class="red--text">&nbsp;*</span></label>
              <v-text-field
                color="cyan darken-4"
                outline
                label="ชื่อบริษัท"
                v-model="registerData.company_name"
                :rules="[rules.required]"
                class="mg-ip"
                required
              ></v-text-field>
              
              <label class="font-weight-bold">อีเมล <span class="red--text">&nbsp;*</span></label>
              <v-text-field
                color="cyan darken-4"
                outline
                label="อีเมล"
                v-model="registerData.email"
                :rules="[rules.required, rules.email]"
                class="mg-ip"
                required
              ></v-text-field>
              
              <label class="font-weight-bold">เบอร์โทรศัพท์ <span class="red--text">&nbsp;*</span></label>
              <v-text-field
                color="cyan darken-4"
                outline
                label="เบอร์โทรศัพท์"
                v-model="registerData.tel"
                :rules="[rules.required]"
                class="mg-ip"
                required
              ></v-text-field>
            </v-flex>
            <v-flex class="px-3">
              <p><v-alert
                :value="!!error"
                color="error"
                outline
              >
                {{ error }}
              </v-alert></p>
            </v-flex>
          </v-layout>
          <v-layout row wrap justify-center>
            <v-btn color="cyan darken-4 my-3" dark type="submit">สมัครสมาชิก</v-btn>
          </v-layout>
          <v-layout row wrap justify-center>
              <span class="body-2 font-weight-medium">มีบัญชีผู้ใช้แล้ว? <router-link to="/employer/login">เข้าสู่ระบบ</router-link></span>           
          </v-layout>
        </v-form>
      </v-flex>
    </v-layout>
    <v-dialog
      v-model="loading"
      hide-overlay
      persistent
      width="300"
    >
      <v-card
        color="cyan darken-4"
        dark
      >
        <v-card-text>
          กำลังลงทะเบียน
          <v-progress-linear
            indeterminate
            color="white"
            class="mb-0"
          ></v-progress-linear>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      registerData: {
        username: '',
        email: '',
        password: '',
        password_confirmation: '',
        company_name: '',
        tel: '',
        role: 2
      },
      rules: {
        required: v => !!v || 'จำเป็นต้องกรอก',
        min: v => v.length > 7 || 'รหัสผ่านต้องมี 8 ตัวขึ้นไป',
        space: v => !(/ /.test(v)) || 'ห้ามเว้นวรรค',
        email: v => /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(v) || 'รูปแบบอีเมลล์ไม่ถูกต้อง'
      },
      showPassword: false,
      showPasswordConfirm: false
    }
  },
  computed: {
    pwdMatch () {
      return (this.registerData.password === this.registerData.password_confirmation) || 'รหัสผ่านไม่ตรงกัน'
    },
    loading () {
      return this.$store.getters.getLoading
    },
    error () {
      return this.$store.getters.getError
    }
  },
  methods: {
    register () {
      if(this.$refs.registerEmployer.validate()) {
        this.$store.dispatch('register', this.registerData)
          .then(res => {
            this.$router.push('/employer/login')
          })
      } else {
        this.$Loading.error()
      }
    }
  }
}
</script>


<style lang="scss" scoped>
  // .mg-ip{
  //   height:70px;
  // }
  
  .border-iy {
    border: 1px solid #dcdcdc;
    border-radius: 7px;
  }

</style>