<template>
    <div class="login">
        <div class="login-card-container">
            <div class="title">
                艺考报名网页
            </div>
            <el-form
                    ref="loginForm"
                    :model="loginForm"
                    :rules="loginRules"
                    class="login-form"
                    @submit.prevent
            >
                <h3 class="login-title">考生登录</h3>
                <el-form-item prop="idCard">
                    <el-input
                            v-model="loginForm.idCard"
                            type="text"
                            auto-complete="off"
                            placeholder="请输入身份证号">
                    </el-input>
                </el-form-item>
                <el-form-item prop="phoneNumber">
                    <el-input
                            v-model="loginForm.phoneNumber"
                            type="text"
                            auto-complete="off"
                            placeholder="请输入手机号">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                            v-model="loginForm.password"
                            type="text"
                            style="text-security:disc; -webkit-text-security:disc;"
                            auto-complete="off"
                            placeholder="请输入密码"
                            @keyup.enter.native="handleLogin">
                    </el-input>
                </el-form-item>
                <el-form-item prop="code" v-if="captchaEnabled">
                    <div class="login-code-main">
                        <div class="login-code-sub">
                            <el-input
                                    v-model="loginForm.code"
                                    auto-complete="off"
                                    placeholder="请输入验证码"
                                    @keyup.enter.native="handleLogin"
                                    style="width:100%;"
                            >
                            </el-input>
                        </div>
                        <div style="border: none; margin-left: 50px" @click="refreshCode">
                            <Validate :identifyCode="identifyCode"></Validate>
                        </div>
                    </div>
                </el-form-item>
                <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 20px;">记住密码</el-checkbox> -->
                <el-form-item style="width:100%;" label-width="0">
                    <el-button :loading="loading" size="medium" type="primary" class="login-button"
                               @click="handleLogin">
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中...</span>
                    </el-button>
                    <div>
                        <div v-if="register">
                            <router-link class="link-type" :to="'/register'">新用户注册</router-link>
                        </div>
                    </div>
                </el-form-item>
            </el-form>

        </div>
        <!--  底部  -->
        <div class="el-login-footer">
            <span></span>
        </div>
    </div>
</template>

<script>
import {checkIdcard, validatePhone} from "@/utils/validate/index"
import Validate from '@/components/validate.vue'

export default {
    name: "Login",
    components: {
        Validate
    },
    mounted() {
        const that = this
        that.identifyCode = "";
        that.makeCode(this.identifyCodes, 4);
    },
    created() {
        this.refreshCode();
    },
    data() {
        const validateCode = (rule, value, callback) => {
            if (this.identifyCode !== value) {
                this.loginForm.code = ''
                this.refreshCode()
                callback(new Error('请输入正确的验证码'))
            } else {
                callback()
            }
        }

        return {
            identifyCode: '',//图形验证码
            identifyCodes: '1234567890',
            codeUrl: "",
            loginForm: {
                idCard: '',
                phoneNumber: '',
                password: "",
                // rememberMe: false,
                code: "",
            },
            loginRules: {
                idCard: [
                    {required: true, trigger: "blur", message: "请输入您的身份证号"},
                    {required: true, validator: checkIdcard, trigger: "blur"}
                ],
                phoneNumber: [
                    {required: true, trigger: "blur", message: "请输入您的手机号"},
                    {required: true, validator: validatePhone, trigger: "blur"}
                ],
                password: [
                    {required: true, trigger: "blur", message: "请输入您的密码"},
                  {pattern:/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,20}$/, message: '用户密码长度为 6 到 20 个字符，且必须包含字母、数字以及特殊符号', trigger: 'blur'}

                ],
                code: [{required: true, trigger: "change", message: "请输入验证码"},
                    {required: true, validator: validateCode, trigger: "blur"}
                ]
            },
            loading: false,
            // 验证码开关
            captchaEnabled: true,
            // 注册开关
            register: true,
        };
    },

    methods: {
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (!valid) return;
                const {idCard, phoneNumber, password} = this.loginForm
                this.$store.dispatch('Login', {idCard, phoneNumber, password}).then(res => {
                    this.$router.push({
                        path: '/entry'
                    })
                })
            })
        },


        /** *********前端实现验证码功能开始************/

        refreshCode() {
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
        },

        makeCode(o, l) {
            for (let i = 0; i < l; i++) {
                this.identifyCode += this.identifyCodes[
                    this.randomNum(0, this.identifyCodes.length)
                    ]
            }
        },

        randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min)
        },


        /** *********前端实现验证码功能结束************/
    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
}
</style>
<style lang="less" scoped>
.login-code-main {
  display: flex;
  flex-direction: row;
}


.login-container {
  //transition: transform .5s ease-in;

  .login-page {
    //height: 100vh;
  }
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("../assets/image/background.png");
  // background-size: cover;

  .login-card-container {
    display: flex;
    position: relative;
    width: 520px;
    height: 470px;
    background-color: #ffffff;
    border-radius: 6px;
    //padding: 20px;
    //justify-content: center;
    //align-items: center;

  }
}

.title {
  width: 310px;
  height: 56px;
  line-height: 56px;
  position: absolute;
  left: 105px;
  top: -28px;
  text-align: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  background-size: cover;
  background-image: url("../assets/image/title.png");
}

.login-title {
  margin: 45px auto 20px;
  text-align: center;
  color: #000000;
  font-weight: 900;
}

.login-form {
  border-radius: 6px;
  // border: 1px solid;
  width: 413px;
  // height: 411px;
  margin: 0 auto;
  // padding: 26px 85px 26px 50px;

  /deep/ .el-input .el-input__inner {
    height: 45px;

  }
}

.login-button {
  width: 413px;
  height: 60px;
  background: #416af2;
  border-radius: 6px;
}

// 封面背景
// .login-cover {
//   // background-image: url("");
//   background-size: cover;
// }

// .login-top {
//   background-color: rgb(240, 248, 255);
//   position: fixed;
//   top: 10px;
//   padding-top: 15px;
//   width: 95%;
//   height: 45px;
//   font-size: 18px;
// }

// 封面内容
// .cover-container {
//   width: 1200px;
//   margin: auto;
//   height: 100%;
//   display: flex;
//   flex-direction: column;

//   .cover-center {
//     position: relative;

//     .cover-center__left {
//       position: absolute;
//       left: 0;
//       top: 0;
//       display: flex;
//       flex-direction: column;
//     }

//     .cover-center__right {
//       position: absolute;
//       width: 559px;
//       height: 559px;
//       right: 0;

//     }
//   }
// }

// 登录页


.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  //color: #fff;
  color: #989797;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
