<template>
    <el-form ref="ruleForm" class="login_container" :model="login" status-icon :rules="rules" label-width="70px">
        <!-- h3要放在里面:只能有一个根,且title也是表单的一部分 -->
        <h3 class="login_title">管理员登录</h3>
        <!-- prop对应rules里的键 -->
        <el-form-item label="账 户" prop="username">
            <el-input v-model="login.username" auto-complete="off" placeholder='请输入用户名' clearable></el-input>
        </el-form-item>

        <el-form-item label="密 码" prop="password">
            <el-input type="password" v-model="login.password" auto-complete="new-password"
                      placeholder='请输入密码'
                       clearable></el-input>
        </el-form-item>

        <el-form-item label="验 证" prop="code">
            <el-input
                prefix-icon="el-icon-mobile-phone"
                type="text"
                clearable
                placeholder="点击图片更换验证码"
                v-model="login.code"
                class="vertify_code"
                auto-complete="false"
                style="width: 175px"
            ></el-input>
            <!-- <span class="code">验证码</span> -->
            <img :src="imageUrl" @click="resetImg" class="vertify_img"/>
        </el-form-item>

        <el-form-item>
            <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button @click="submit('ruleForm')" type="primary" style=";margin-top:10px">提交</el-button>
            </div>
        </el-form-item>
    </el-form>
</template>

<script>
import axios from "axios";
import Vue from "vue";

export default {
    data() {
        return {
            imageUrl: "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getDate(),
            // 登陆数据
            login: {
                username: '',
                password: '',
                code:'',
            },
            // 校验规则
            rules: {
                username: [{ required: 'true', message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: 'true', message: '请输入用户名', trigger: 'blur' }],
                code: [{ required: 'true', message: '请输入验证码', trigger: 'blur' }],

            }
        }
    },
    methods: {
        resetImg() {
            this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
        },
        submit(formName){
            var _this=this;
            this.$refs[formName].validate((valid) => {
                if (valid) {

                    //调用方法提交
                    axios({
                        method: 'post',
                        // 请求的地址
                        url: 'http://localhost:8082/helloGithub_war_exploded/adminLogin',
                        // URL 中的查询参数
                        params: {
                            adminname: this.login.username,
                            password: this.login.password,
                            code: this.login.code,
                        }
                    }).then(function (res) {
                        if (res.data.code === 200) {
                            Vue.prototype.$notify({
                                title: '成功',
                                message: ('i', {style: 'color: teal'}, res.data.msg),
                                type: 'success',
                                offset: 50
                            });
                            _this.$cookie.set('adminName',_this.login.username);
                            _this.$router.push({
                                path:'/systemIndex',
                            })
                        } else {
                            Vue.prototype.$notify.error({
                                title: '错误',
                                message: res.data.msg,
                                offset: 50
                            });
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    }
}
</script>

<style scoped>
.login_container {
  width: 400px;
  border: 1px solid #eaeaea;


  margin: 100px auto;

  padding: 35px 35px 15px 35px;


  box-sizing: border-box;

  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 0 25px #cac6c6;

  .login_title {
    color: #505458;

    text-align: center;
    margin-bottom: 40px;
  }

  .el-input {
    width: 198px;
  }
}
</style>