<template>
  <div id="login-container">
    <el-card class="login-card"
      shadow="always">
      <div slot="header"
        class="clearfix">
        <span>登录</span>
      </div>
      <div class="login-form">
        <el-form :model="form"
          ref="form"
          label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="form.username"
              autocomplete="off"
              @keydown.enter="handleLogin"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password"
              type="password"
              autocomplete="off"
              @keyup.enter.native="handleLogin"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
              @click="handleLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-dialog title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        @keyup.enter.native="dialogVisible = false">
        <span>用户名或密码错误，请重新输入。</span>
        <span slot="footer"
          class="dialog-footer">
          <el-button @click="dialogVisible = false">确定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      dialogVisible: false
    };
  },
  methods: {
    handleLogin() {
      const { username, password } = this.form;
      if (username === 'admin' && password === 'admin') {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
          this.$router.push({ name: 'previews' }); // 登录成功，跳转到主页

        }, 1000);
      } else {
        this.dialogVisible = true; // 显示错误提示
      }
    }
  }
};
</script>

<style scoped>
#login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-card {
  width: 400px;
}

.login-form {
  margin-top: 20px;
}
</style>
