<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="login()" ref="login">
                    <v-layout row wrap>
                      <v-flex sm6 xs12>
                        <v-text-field
                          label="ชื่อ"
                          color="deep-orange darken-4"
                          clearable
                          required
                          class="fix-size"
                        ></v-text-field>
                      </v-flex>
                      <v-flex sm6 xs12>
                        <v-text-field
                          label="นามสกุล"
                          color="deep-orange darken-4"
                          clearable
                          required
                          class="fix-size"
                        ></v-text-field>
                      </v-flex>
                    </v-layout>
                    <v-text-field
                      label="อีเมล"
                      color="deep-orange darken-4"
                      clearable
                      required
                      class="fix-size"
                    ></v-text-field>
                    <v-text-field
                      label="รหัสผ่าน"
                      color="deep-orange darken-4"
                      required
                      class="fix-size"
                    ></v-text-field>
                    <v-text-field
                      label="ยืนยันรหัสผ่าน"
                      color="deep-orange darken-4"
                      required
                      class="fix-size"
                    ></v-text-field>
                    <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>
  </div>
</template>

<script>
import Dialog from '../components/Dialog.vue';
export default {
  components: {
    Dialog
  },
  data () {
    return {
      loginData: {
        email_users: '',
        password: '',
        role: 1
      },
      showPassword: false,
      rules: {
        required: v => !!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) || 'รูปแบบอีเมลล์ไม่ถูกต้อง'
      }
    }
  },
  methods: {
    login () {
      if(this.$refs.login.validate()) {
        this.$store.dispatch('login', this.loginData)
          .then(res => {
            this.$refs.login.reset()
          })
      }
    }
  }
}
</script>

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