<template>
  <div class="bg-light min-vh-100 d-flex flex-row align-items-center">
    <CContainer>
      <CRow class="justify-content-center">
        <CCol :md="8">
          <CCardGroup class="fade-in">
            <CCard class="p-4">
              <CCardBody>
                <div class="mb-4">
                  <img src="/logo.png" class="logo" alt=""/>
                </div>
                <h1 class="mb-4">
                  徽象防伪
                </h1>
                <p class="text-medium-emphasis">后台登录</p>
                <CInputGroup class="mb-3">
                  <CInputGroupText>
                    <CIcon icon="cil-user" />
                  </CInputGroupText>
                  <CFormInput
                    placeholder="用户名"
                    autocomplete="username"
                    v-model="username"
                    id="username"
                  />
                </CInputGroup>
                <CInputGroup class="mb-4">
                  <CInputGroupText>
                    <CIcon icon="cil-lock-locked" />
                  </CInputGroupText>
                  <CFormInput
                    type="password"
                    placeholder="密码"
                    autocomplete="current-password"
                    @keyup.enter="login"
                    v-model="password"
                    id="password"
                  />
                </CInputGroup>
                <CRow>
                  <CCol :xs="6">
                    <CButton color="primary" @click="login" class="px-4" id="login">登录</CButton>
                  </CCol>
                </CRow>
                <CRow class="my-4" v-if="failed || redirecting">
                  <CCol :xs="12">
                    <div class="alert alert-warning" v-if="failed">
                      登录失败，请检查输入是否正确
                    </div>
                    <div v-if="redirecting" class="alert alert-success">
                      登录成功，正在跳转到首页...
                    </div>
                  </CCol>
                </CRow>
                <div class="mt-2">
                  <router-link class="mt-2" :to="{name: 'ForgotPassword'}">
                    找回密码
                  </router-link>
                </div>
              </CCardBody>
            </CCard>
          </CCardGroup>
        </CCol>
      </CRow>
    </CContainer>
  </div>
  <AppFooter />
</template>

<script>
import AppFooter from '@/components/AppFooter.vue'
export default {
  name: 'Login',
  props: [],
  components: {
    AppFooter,
  },
  data: function () {
    return {
      redirecting: false,
      username: '',
      password: '',
      failed: false,
    };
  },
  computed: {
  },
  methods: {
    login: async function() {
      this.failed = false;
      this.redirecting = false;
      try {
        var r = await this.$root.api_post("/api/v1/login/", {
          username: this.username,
          password: this.password,
        });
        if (r.data.token) {
          this.$root.login(r.data);
          this.redirecting = true;
          var redirect = this.$route.query.redirect || "/";
          setTimeout(() => this.$router.push(redirect), 1000);
        }
      } catch (e) {
        this.failed = true;
      }
    },
  },
  mounted() {
  },
}
</script>

<style scoped>
img.logo {
  height: 64px;
  width: 64px;
}
</style>

