<template>
  <div>
    <Dialog>
      <v-card>
        <v-toolbar dark color="deep-orange darken-4" flat>
          <v-toolbar-title>สมัครสมาชิก</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="$store.commit('setDialog', false)">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <v-layout row wrap justify-center>
          <v-card-text>
            <v-container grid-list-md text-xs-center>
              <v-layout row wrap>
                <v-flex>
                  <!-- <v-alert
                    :value="true"
                    color="error"
                    outline
                  >
                    This is a error alert.
                  </v-alert> -->
                  <v-form @submit.prevent="register()" ref="register">
                    <v-layout row wrap>
                      <v-flex sm6 xs12>
                        <v-text-field
                          label="ชื่อ"
                          color="deep-orange darken-4"
                          v-model="registerData.first_name"
                          :rules="[rules.required, rules.space]"
                          required
                          class="fix-size"
                        ></v-text-field>
                      </v-flex>
                      <v-flex sm6 xs12>
                        <v-text-field
                          label="นามสกุล"
                          color="deep-orange darken-4"
                          v-model="registerData.last_name"
                          :rules="[rules.required, rules.space]"
                          required
                          class="fix-size"
                        ></v-text-field>
                      </v-flex>
                    </v-layout>
                    <v-text-field
                      label="อีเมล"
                      color="deep-orange darken-4"
                      v-model="registerData.email"
                      :rules="[rules.required, rules.email]"
                      required
                      class="fix-size"
                    ></v-text-field>
                    <v-text-field
                      label="รหัสผ่าน"
                      color="deep-orange darken-4"
                      v-model="registerData.password"
                      :rules="[rules.required, rules.min]"
                      :append-icon="showPassword ? 'visibility' : 'visibility_off'"
                      @click:append="showPassword = !showPassword"
                      :type="showPassword ? 'text' : 'password'"
                      required
                      class="fix-size"
                    ></v-text-field>
                    <v-text-field
                      label="ยืนยันรหัสผ่าน"
                      color="deep-orange darken-4"
                      v-model="registerData.password_confirmation"
                      :rules="[rules.required, rules.min, pwdMatch]"
                      :append-icon="showPasswordConfirm ? 'visibility' : 'visibility_off'"
                      @click:append="showPasswordConfirm = !showPasswordConfirm"
                      :type="showPasswordConfirm ? 'text' : 'password'"
                      required
                      class="fix-size"
                    ></v-text-field>
                    <p><v-alert
                      :value="!!error"
                      color="error"
                      outline
                    >
                      {{ error }}
                    </v-alert></p>
                    <v-btn color="deep-orange darken-4 my-4" block dark large type="submit">สมัครสมาชิก</v-btn>
                  </v-form>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card-text>
        </v-layout>
      </v-card>
    </Dialog>
    <v-dialog
      v-model="loading"
      hide-overlay
      persistent
      width="300"
    >
      <v-card
        color="deep-orange 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>
import Dialog from '../components/Dialog.vue';
export default {
  components: {
    Dialog
  },
  data () {
    return {
      registerData: {
        first_name: '',
        last_name: '',
        email: '',
        password: '',
        password_confirmation: '',
        role: 1
      },
      showPassword: false,
      showPasswordConfirm: false,
      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) || 'รูปแบบอีเมลล์ไม่ถูกต้อง'
      }
    }
  },
  computed: {
    pwdMatch () {
      return (this.registerData.password === this.registerData.password_confirmation) || 'รหัสผ่านไม่ตรงกัน'
    },
    error () {
      return this.$store.getters.getError
    },
    loading () {
      return this.$store.getters.getLoading
    }
  },
  methods: {
    register () {
      if(this.$refs.register.validate()) {
        this.$store.dispatch('register', this.registerData)
          .then(res => {
            this.$refs.register.reset()
          })
      } else {
        this.$Loading.error()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  a {
    text-decoration: none;
    color: #000;
  }
</style>
