<template>
    <div class="login-box">
        <login-header></login-header>
        <main class="wrap">
            <section>
                <div class="layout-box clearfix">
                    <div class="login-banner">
                        <h3>及时雨Pay</h3>
                        <p>
                            跨境收付款
                            <br />供应链金融一站式解决方案
                        </p>
                        <router-link to="/register">立即注册</router-link>
                    </div>
                    <div class="login-form box-shadow">
                        <h1>Hi，欢迎登录!</h1>
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                            <el-form-item prop="phoneNum">
                                <el-input
                                    type="text"
                                    v-model.number="ruleForm.phoneNum"
                                    placeholder="请输入手机号"
                                    class="phone"
                                    maxlength="11"
                                    @keypress.enter.native="submitForm('ruleForm')"
                                ></el-input>
                            </el-form-item>
                            <el-form-item prop="pass">
                                <el-input
                                    type="password"
                                    v-model.trim="ruleForm.pass"
                                    autocomplete="off"
                                    placeholder="请输入登录密码"
                                    v-if="showPassword"
                                    @keypress.enter.native="submitForm('ruleForm')"
                                ></el-input>
                                <el-input
                                    type="text"
                                    v-model.trim="ruleForm.pass"
                                    autocomplete="off"
                                    placeholder="请输入登录密码"
                                    v-else
                                    @keypress.enter.native="submitForm('ruleForm')"
                                ></el-input>
                                <div
                                    :class="showPassword ? 'show-password' : 'hide-password'"
                                    @click="toggleShowPassword"
                                ></div>
                            </el-form-item>
                            <el-form-item prop="picture" v-if="picCode">
                                <el-input
                                    type="text"
                                    v-model.trim="ruleForm.picture"
                                    placeholder="请输入图形验证码"
                                ></el-input>
                                <img
                                    src="~assets/images/icon-code.png"
                                    alt="图形验证码"
                                    class="verification-code"
                                />
                            </el-form-item>
                            <el-form-item class="btn-reg">
                                <el-button
                                    type="primary"
                                    @click="submitForm('ruleForm')"
                                    :loading="loginLoading"
                                >立即登录</el-button>
                            </el-form-item>
                        </el-form>
                        <p class="to-register">
                            没有账号，
                            <router-link to="/register">立即注册！</router-link>
                            <router-link to="/forget/index" class="forget-password">忘记密码？</router-link>
                        </p>
                    </div>
                </div>
            </section>
        </main>
        <login-footer></login-footer>
    </div>
</template>

<script>
import { mapMutations } from "vuex";
import { api_login } from "api/login.js";
import utils from "utils/utils.js";
import loginHeader from "./components/header";
import loginFooter from "./components/footer";
export default {
    name: "login",
    components: {
        loginHeader,
        loginFooter
    },
    data() {
        var checkPhone = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入手机号"));
            } else if (!utils.isvalidPhone(value)) {
                callback(new Error("手机号格式错误"));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else if (!utils.isvalidPass(value)) {
                callback(
                    new Error(
                        "密码位数最少8位且必须含有数字、小写字母、大写字母"
                    )
                );
            } else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
            }
        };
        var pictureCode = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入图形验证码"));
            } else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
            }
        };
        return {
            ruleForm: {
                phoneNum: "",
                pass: "",
                picture: ""
            },
            rules: {
                phoneNum: [{ validator: checkPhone, trigger: "blur" }],
                pass: [{ validator: validatePass, trigger: "blur" }],
                picture: [{ validator: pictureCode, trigger: "blur" }]
            },
            showPassword: true,
            picCode: false,
            loginLoading: false
        };
    },
    methods: {
        ...mapMutations(["setLoginInfo", "setMarkStr"]),
        submitForm(formName) {
            this.loginLoading = true;
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let loginData = {
                        data: {
                            phoneNo: this.ruleForm.phoneNum,
                            password: this.ruleForm.pass
                        }
                    };
                    api_login(loginData)
                        .then(res => {
                            if (res.success) {
                                utils.setCookie("token", res.data.webToken);

                                this.$store.commit(
                                    "setLoginInfo",
                                    JSON.parse(res.data.kycNaturalVO)
                                );
                                this.$store.commit(
                                    "setMarkStr",
                                    res.data.emailMarkStr
                                );
                                localStorage.setItem(
                                    "initVuex",
                                    JSON.stringify(this.$store.state)
                                );
                                this.$router.push({ path: "/account" });
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch(err => {});
                    this.loginLoading = false;
                } else {
                    this.loginLoading = false;

                    return false;
                }
            });
        },
        toggleShowPassword() {
            this.showPassword = !this.showPassword;
        }
    },
    created() {
        localStorage.removeItem("initVuex");
        utils.delCookie("token");
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.login-box /deep/ .el-input__inner {
    background: #fcfcfc;
}
.login-box {
    background: #f7f7f7;
}
.wrap {
    min-height: calc(100vh - 224px);
    margin: 50px 0;
}
.login-banner {
    float: left;
    width: 636px;
    height: 432px;
    padding: 42px;
    text-align: left;
    box-sizing: border-box;
    background: url(~assets/images/bg-login.jpg) no-repeat;
    color: #ffffff;
    h3 {
        margin-top: 10px;
        font-size: 48px;
    }
    p {
        margin-top: 30px;
        line-height: 30px;
        font-size: 24px;
    }
    a {
        display: block;
        width: 176px;
        height: 44px;
        margin-top: 20px;
        line-height: 44px;
        text-align: center;
        background: #fff;
        color: #3d86e9;
    }
}
.login-form {
    position: relative;
    float: right;
    width: 410px;
    height: 432px;
    margin: 0 auto;
    padding: 30px 40px 0;
    text-align: left;
    box-sizing: border-box;
    background: #fff;
    h1 {
        margin-top: 20px;
        margin-bottom: 36px;
        font-size: 28px;
        font-weight: normal;
        color: #3d86e9;
    }
    .btn-reg {
        position: absolute;
        bottom: 60px;
        left: 0;
        width: 100%;
        padding: 0 40px;
        box-sizing: border-box;
        .el-button--primary {
            width: 100%;
        }
    }
    .show-password {
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -2px;
        width: 24px;
        height: 12px;
        background: url(~assets/images/icon-close-eye.png) no-repeat;
        cursor: pointer;
    }
    .hide-password {
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -6px;
        width: 24px;
        height: 12px;
        background: url(~assets/images/icon-open-eye.png) no-repeat;
        cursor: pointer;
    }
    .verification-code {
        position: absolute;
        right: 2px;
        top: 2px;
        height: 38px;
        cursor: pointer;
    }
    .to-register {
        position: absolute;
        bottom: 32px;
        left: 0;
        width: 100%;
        padding: 0 40px;
        text-align: center;
        font-size: 14px;
        box-sizing: border-box;
        a {
            color: #3d86e9;
        }
    }
    .forget-password {
        position: absolute;
        right: 40px;
        bottom: 120px;
    }
}
</style>
