<template>
    <div class="login">
        <div style="display: flex; align-items: center;margin-left:60px;padding-top:40px;margin-bottom:136px">
            <img src="../assets/logo/logo.png" style="width:54px;height:54px" alt="">
            <span style="font-size: 18px;font-family: Microsoft YaHei;font-weight: 400;color: #333333;margin-left:12px"> 优鲜信家政平台</span>
        </div>
        <div style="display: flex;justify-content: center; align-items: center;">
            <img src="../assets/images/loginCover.png" alt="" style="width:600px;height:540px;">
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                <div class="title-login"><span style="display: inline-block;line-height: .7;border-bottom: 7px solid #FD8E70;">登录</span></div>
                    <div style="display:flex;align-items: center;margint-top:100px">
                        <img style="width: 26px; height: 26px;margin-bottom: 22px;margin-right:15px" src="../assets/images/loginPhone.png" />
                        <el-form-item prop="username" style="width:100%">
                            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入手机号">
                                <!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> -->
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="display:flex;align-items: center;">
                        <img style="width: 26px; height: 26px;margin-bottom: 22px;margin-right:15px" src="../assets/images/loginPassword.png" />
                        <el-form-item prop="password" style="width:100%">
                            <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin">
                                <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
                            </el-input>
                        </el-form-item>
                    </div>

                    <el-form-item prop="code" v-if="captchaOnOff" style="margin-left:36px;width:100%">
                        <el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" style="width: 63%" @keyup.enter.native="handleLogin">
                            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                        </el-input>
                        <div class="login-code">
                            <img :src="codeUrl" @click="getCode" class="login-code-img" />
                        </div>
                    </el-form-item>

                    <el-form-item style="width:100%;margin-top:100px">
                        <el-button :loading="loading" size="medium" type="primary" style="width:100%;background-color: #FC6035;border-color: #FC6035" @click.native.prevent="handleLogin">
                            <span v-if="!loading">登 录</span>
                            <span v-else>登 录 中...</span>
                        </el-button>
                        <div style="float: right;" v-if="register">
                            <router-link class="link-type" :to="'/register'">立即注册</router-link>
                        </div>
                    </el-form-item>
                    <el-link style="margin:0px 0px 25px 0px;" @click="$router.push('/forget')">忘记密码?</el-link>
                    <el-link style="float:right;" @click="$router.push('/settled')"> <span style="color:#FC6035">申请入驻 ></span> </el-link>
            </el-form>
            <!--  底部  -->
            <!--    <div class="el-login-footer">-->
            <!--      <span>Copyright © 2021 you All Rights Reserved.</span>-->
            <!--    </div>-->
        </div>

    </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { mapGetters, mapState } from "vuex";

export default {
    name: "Login",

    data() {
        return {
            codeUrl: "",
            cookiePassword: "",
            loginForm: {
                username: "",
                password: "",
                rememberMe: false,
                code: "",
                uuid: "",
            },
            loginRules: {
                username: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入您的账号",
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入您的密码",
                    },
                ],
                code: [
                    {
                        required: true,
                        trigger: "change",
                        message: "请输入验证码",
                    },
                ],
            },
            loading: false,
            // 验证码开关
            captchaOnOff: true,
            // 注册开关
            register: false,
            redirect: undefined,
        };
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect;
            },
            immediate: true,
        },
    },
    computed: {
        ...mapGetters(["roles"]),
    },
    created() {
        this.getCode();
        this.getCookie();
    },
    methods: {
        getCode() {
            getCodeImg().then((res) => {
                this.captchaOnOff =
                    res.captchaOnOff === undefined ? true : res.captchaOnOff;
                if (this.captchaOnOff) {
                    this.codeUrl = "data:image/gif;base64," + res.img;
                    this.loginForm.uuid = res.uuid;
                }
            });
        },
        getCookie() {
            const username = Cookies.get("username");
            const password = Cookies.get("password");
            const rememberMe = Cookies.get("rememberMe");
            this.loginForm = {
                username:
                    username === undefined ? this.loginForm.username : username,
                password:
                    password === undefined
                        ? this.loginForm.password
                        : decrypt(password),
                rememberMe:
                    rememberMe === undefined ? false : Boolean(rememberMe),
            };
        },
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    if (this.loginForm.rememberMe) {
                        Cookies.set("username", this.loginForm.username, {
                            expires: 30,
                        });
                        Cookies.set(
                            "password",
                            encrypt(this.loginForm.password),
                            { expires: 30 }
                        );
                        Cookies.set("rememberMe", this.loginForm.rememberMe, {
                            expires: 30,
                        });
                    } else {
                        Cookies.remove("username");
                        Cookies.remove("password");
                        Cookies.remove("rememberMe");
                    }
                    this.$store
                        .dispatch("Login", this.loginForm)
                        .then(() => {
                            this.$router.push({ path: this.redirect || "/" });
                        })
                        .catch(() => {
                            this.loading = false;
                            if (this.captchaOnOff) {
                                this.getCode();
                            }
                        });
                }
            });
        },
    },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    height: 100%;
    background-image: url("../assets/images/login-background.png");
    background-size: cover;
}
.title-login {
    //   margin: 0px auto 30px auto;
    //   text-align: center;
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    margin-top: 40px;
    margin-bottom: 70px;
    position: relative;
}

.login-form {
    //   border-radius: 6px;
    background: #ffffff;
    width: 600px;
    height: 540px;
    padding: 25px 100px 5px 97px;
    .el-input {
        height: 38px;
        input {
            height: 38px;
        }
    }
    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
    }
}
.login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}
.login-code {
    width: 33%;
    height: 38px;
    float: right;
    img {
        cursor: pointer;
        vertical-align: middle;
    }
}
.el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}
.login-code-img {
    height: 38px;
}
</style>
