<template>
  <div>
    <v-layout row wrap>
      <v-flex xs12 sm4 offset-sm4 class="border-iy pa-3 my-3">
        <h3 class="title font-weight-bold my-3">เข้าสู่ระบบสำหรับผู้ประกอบการ</h3>
        <v-form @submit.prevent="login()" ref="loginEmployer">
          <v-text-field
            color="cyan darken-4"
            outline
            label="ชื่อผู้ใช้"
            prepend-inner-icon="person"
            v-model="loginData.username"
            class="mg-ip"
            :rules="[rules.required, rules.space]"
            required
          ></v-text-field>
        <v-text-field
            color="cyan darken-4"
            outline
            label="รหัสผ่าน"
            v-model="loginData.password"
            :append-icon="showPassword ? 'visibility' : 'visibility_off'"
            :type="showPassword ? 'text' : 'password'"
            @click:append="showPassword = !showPassword"
            :rules="[rules.required]"
            prepend-inner-icon="lock"
            class="mg-ip"
            required
          ></v-text-field>
          <a href="#" class="body-2 font-weight-medium my-3">ลืมรหัสผ่าน</a>
          <p class="text-xs-center"><v-alert
            :value="!!error"
            color="error"
            outline
          >
            {{ error }}
          </v-alert></p>
          <v-btn color="cyan darken-4" large dark block type="submit">เข้าสู่ระบบ</v-btn>
        </v-form>
        <v-layout row wrap justify-center class="my-2">
          <span class="body-2 font-weight-medium">ยังไม่มีบัญชีผู้ใช้? <router-link to="/employer/register" href="#">สมัครสมาชิก</router-link></span>
        </v-layout>
      </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 {
      loginData: {
        username: '',
        password: '',
        role: 2
      },
      rules: {
        required: v => !!v || 'จำเป็นต้องกรอก',
        space: v => !(/ /.test(v)) || 'ห้ามเว้นวรรค',
      },
      showPassword: false
    }
  },
  methods: {
    login () {
      if (this.$refs.loginEmployer.validate()) {
        this.$store.dispatch('login', this.loginData)
          .then(res => {
            this.$router.push('/Employer')
          })
      } else {
        this.$Loading.error()
      }
    }
  },
  computed: {
    loading () {
      return this.$store.getters.getLoading
    },
    error () {
      return this.$store.getters.getError
    }
  }
}
</script>


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

</style>
