<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-form @submit.prevent="login()" ref="login">
                    <v-text-field
                      label="อีเมล"
                      color="deep-orange darken-4"
                      type="email"
                      v-model="loginData.email_users"
                      :rules="[rules.required, rules.email]"
                      required
                    ></v-text-field>
                    <v-text-field
                      label="รหัสผ่าน"
                      color="deep-orange darken-4"
                      v-model="loginData.password"
                      :append-icon="showPassword ? 'visibility' : 'visibility_off'"
                      :type="showPassword ? 'text' : 'password'"
                      @click:append="showPassword = !showPassword"
                      :rules="[rules.required]"
                      required
                    ></v-text-field>
                    <p class="text-xs-right"><router-link to="/" class="body-2 font-weight-medium">ลืมรหัสผ่าน?</router-link></p>
                    <p><v-alert
                      :value="!!error"
                      color="error"
                      outline
                    >
                      {{ error }}
                    </v-alert></p>
                    <v-btn color="deep-orange darken-4" large dark block type="submit">เข้าสู่ระบบ</v-btn>
                  </v-form>
                  <div class="my-3"><span class="font-weight-bold">หรือ</span></div>
                  <v-btn color="primary" block><v-icon>fab fa-facebook</v-icon>&nbsp;เข้าสู่ระบบด้วยบัญชี Facebook</v-btn>
                  <v-btn color="deep-orange" class="white--text" block><v-icon>fab fa-google</v-icon>&nbsp;เข้าสู่ระบบด้วยบัญชี Google</v-btn>
                </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 {
      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) || 'รูปแบบอีเมลล์ไม่ถูกต้อง'
      },
      clickLogin: false
    }
  },
  computed: {
    loading () {
      return this.$store.getters.getLoading
    },
    error () {
      return this.$store.getters.getError
    }
  },
  methods: {
    login () {
      if(this.$refs.login.validate()) {
        this.$store.dispatch('login', this.loginData)
          .then(res => {
            this.$refs.login.reset()
          })
      } else {
        this.$Loading.error()
      }
    }
  }
}
</script>

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

