<template>
  <div>
    <v-container grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex xs12 sm4 offset-sm1 align-center>
          <div class="text-sm-left mb-4">
            <span class="headline font-weight-bold">เข้าสู่ระบบ</span>
          </div>
          <v-form @submit.prevent="login()" v-model="formLogin" ref="login">
            <v-text-field
              label="อีเมล"
              :rules="[rules.required]"
              color="primary"
              class="fix-size red--text"
              type="email"
              v-model="loginData.email_users"
            ></v-text-field>
            <v-text-field
              label="รหัสผ่าน"
              color="primary"
              :rules="[rules.required]"
              :append-icon="showPasswordLogin ? 'visibility' : 'visibility_off'"
              @click:append="showPasswordLogin = !showPasswordLogin"
              v-model="loginData.password"
              :type="showPasswordLogin ? 'text' : 'password'"
            ></v-text-field>
            <p class="text-xs-right"><router-link to="/" class="body-2 font-weight-medium">ลืมรหัสผ่าน?</router-link></p>
            <v-alert
              :value="loginError"
              color="error"
              icon="warning"
              outline
            >
              อีเมลหรือรหัสผ่านไม่ถูกต้อง!
            </v-alert>
            <v-btn color="blue" 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-flex sm2 xs12>
          <v-layout justify-center fill-height>
              <v-divider vertical inset></v-divider>
          </v-layout>
        </v-flex>
        <v-flex sm4 xs12 align-center>
          <div class="text-sm-left mb-4">
            <span class="headline font-weight-bold">สมัครสมาชิก</span>
          </div>
          <v-form @submit.prevent="register()" ref="register" v-model="formRegister">
            <v-layout row wrap>
              <v-flex sm6 xs12>
                <v-text-field
                  label="ชื่อ"
                  v-model="registerData.first_name"
                  :rules="[rules.required]"
                  clearable
                  required
                  class="fix-size"
                ></v-text-field>
              </v-flex>
              <v-flex sm6 xs12>
                <v-text-field
                  label="นามสกุล"
                  v-model="registerData.last_name"
                  :rules="[rules.required]"
                  clearable
                  required
                  class="fix-size"
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-text-field
              label="อีเมล"
              v-model="registerData.email"
              :rules="clickRegister ? [rules.required, rules.email] : [rules.required]"
              clearable
              required
              class="fix-size"
            ></v-text-field>
            <v-text-field
              label="รหัสผ่าน"
              v-model="registerData.password"
              :rules="clickRegister ? [rules.required, rules.min] : [rules.required]"
              :append-icon="showPassword ? 'visibility' : 'visibility_off'"
              @click:append="showPassword = !showPassword"
              clearable
              :type="showPassword ? 'text' : 'password'"
              hint="รหัสผ่านต้องมี 8 ตัวขึ้นไป"
              required
              class="fix-size"
            ></v-text-field>
            <v-text-field
              label="ยืนยันรหัสผ่าน"
              v-model="registerData.password_confirmation"
              :rules="clickRegister ? [rules.required, rules.min, pwdMatch] : [rules.required]"
              :append-icon="showPasswordConfirm ? 'visibility' : 'visibility_off'"
              @click:append="showPasswordConfirm = !showPasswordConfirm"
              clearable
              hint="รหัสผ่านต้องมี 8 ตัวขึ้นไป"
              :type="showPasswordConfirm ? 'text' : 'password'"
              required
              class="fix-size"
            ></v-text-field>
            <v-alert
              :value="error"
              color="error"
              icon="warning"
              outline
            >
              อีเมลนี้ถูกใช้งานเเล้ว
            </v-alert>
            <v-btn color="red accent-3 my-4" block dark large type="submit" :loading="loading2">สมัครสมาชิก</v-btn>
          </v-form>
        </v-flex>
      </v-layout>
    </v-container>
    <v-snackbar
      v-model="snackbar"
      color="success"
      :timeout="6000"
    >
      ลงทะเบียนสำเร็จ!
      <v-btn
        dark
        flat
        @click="snackbar = false"
      >
        ปิด
      </v-btn>
    </v-snackbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loginData: {
        email_users: '',
        password: '',
        role: 1
      },
      registerData: {
        first_name: '',
        last_name: '',
        email: '',
        password: '',
        password_confirmation: ''
      },
      rules: {
        required: v => !!v || 'จำเป็นต้องกรอก',
        min: v => v.length || 'รหัสผ่านต้องมี 8 ตัวขึ้นไป',
        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,
      showPasswordLogin: false,
      clickRegister: false,
      snackbar: false,
      formRegister: false,
      formLogin: false,
      loginError: false
    }
  },
  computed: {
    pwdMatch () {
      return (this.registerData.password === this.registerData.password_confirmation) || 'รหัสผ่านไม่ตรง'
    },
    loading2 () {
      return this.$store.getters.getLoading2
    },
    error () {
      return this.$store.getters.getError
    }
  },
  methods: {
    login () {
      this.$refs.login.validate()
      if(this.formLogin) {
        this.$store.dispatch('login', this.loginData)
          .catch(err => {
            console.log(err)
            this.loginError = true
          })
      }
    },
    register () {
      this.clickRegister = true
      this.$refs.register.validate()
      if(this.formRegister) {
        this.$store.dispatch('register', {
          first_name: this.registerData.first_name,
          last_name: this.registerData.last_name,
          email: this.registerData.email,
          password: this.registerData.password,
          password_confirmation: this.registerData.password_confirmation,
          role: 1
        })
          .then(res => {
            this.snackbar = true
            this.registerData= {
              first_name: '',
              last_name: '',
              email: '',
              password: '',
              password_confirmation: ''
            }
            this.clickRegister = false
            this.$refs.register.resetValidation()
          })
      }
    }
  }
}
</script>


<style lang="scss" scoped>
  // .fix-size {
  //   height: 50px;
  // }
</style>

