<template>
  <v-container id="login-container">
    <v-card class="elevation-1 pa-3 login-card">
      <v-card-text>
        <div class="layout column align-center">
          <img src="/static/m.png" alt="Vue Material Admin" width="120" height="120">
          <h2 class="flex my-4 primary--text">天心天思商学院</h2>
        </div>
        <v-form>
          <v-text-field
            v-model="loginForm.username"
            append-icon="mdi-account"
            name="login"
            :label="$t('login.account')"
            type="text"
          />
          <v-text-field
            id="password"
            v-model="loginForm.password"
            append-icon="mdi-lock"
            name="password"
            :label="$t('login.password')"
            type="password"
          />
        </v-form>
      </v-card-text>
      <div class="login-btn">
        <!-- <v-btn icon>
        <v-icon color="blue">fa fa-facebook-square fa-lg</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon color="red">fa fa-google fa-lg</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon color="light-blue">fa fa-twitter fa-lg</v-icon>
      </v-btn> -->
        <v-spacer />
        <v-btn block color="primary" :loading="loading" @click="login">{{ $t("login.submit") }}</v-btn>
      </div>
    </v-card>
  </v-container>
</template>

<script>
export default {
  name: 'Login',
  data: () => ({
    loading: false,
    loginForm: {
      username: 'admin',
      password: 'abc.123'
    }
  }),
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    login() {
      this.loading = true
      // // handle login
      // setTimeout(() => {
      //   this.$router.push("/dashboard")
      // }, 1000)
      this.$store.dispatch('user/login', this.loginForm).then(() => {
        this.$router.push({ path: this.redirect || '/' })
        this.loading = false
      }, () => {

      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style scoped lang="scss">
// #login-container{
//   background-image: url('~@/assets/13.jpg');
//   background-size: cover;
// }
</style>
