<template>
  <div class="login">
    <div class="login_box">
      <h1>请登录账号</h1>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="60px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="userName">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input v-model="ruleForm.passWord" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
        <el-form-item>
            没有账号，请立即
            <router-link to="/register">注册</router-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { apiServe } from '@/api/api.js'
export default {
  name: "BYEsame2307DLogin",

  data() {
    return {
        ruleForm: {
           userName: '',
           passWord: '' 
        },
        rules: {
            userName: [
                // required表示是否必填, message表示验证提示, trigger表示验证触发的方式
                {
                    required: true, message: '请输入账号', trigger: 'blur'
                }
            ],
            passWord: [
                // required表示是否必填, message表示验证提示, trigger表示验证触发的方式
                {
                    required: true, message: '请输入密码', trigger: 'blur'
                }
            ]
        }
    };
  },

  mounted() {},

  methods: {
    submitForm(formName) {
        // this.$refs[formName] 相当于
        // this.$refs['formName'] 相当于
        // this.$refs.formName

        // validate 对整个表单进行验证
        this.$refs[formName].validate(async (valid) => {
            if (valid) {
                // 若验证成功 此时应该调登录接口
                let data = {
                    username: this.ruleForm.userName,
                    password: this.ruleForm.passWord,
                }
                let res = await apiServe.login(data);
                if (res) {
                    console.log(res);
                    localStorage.setItem('token', res.data.token.data);
                    this.$message({
                        message: '登陆成功',
                        type: 'success'
                    })
                    this.$router.push('/')
                }
            } else {
                console.log('表单验证失败');
            }
        })
    },
    resetForm(formName) {
        // 对整个表单进行重置 将所有字段重置为初始值并移除校验
        this.$refs[formName].resetFields();
    }
  },
};
</script>

<style lang="less" scoped>
    .login::v-deep {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        .login_box {
            width: 350px;
            height: 300px;
            box-shadow: 0 0 20px #999;
            padding: 0 20px;
            h1 {
                text-align: center;
                padding: 20px 0;
                font-size: 20px; 
            }
        }
        .el-form {
            .el-form-item {
                &:nth-child(3),
                &:nth-child(4) {
                    text-align: center;
                    .el-form-item__content {
                        margin-left: 0 !important;
                    }
                }

                &:nth-child(4) {
                    text-align: right;
                }
            }
        }
    }
</style>
