<template>
    <div class="loginPanel">
        <div class="loginBox">
            <div class="box">
                <div class="formBg">
                    <img :src="formBgImg" width="100%" alt="" />
                </div>
                <el-form
                    ref="form"
                    :model="form"
                    :rules="rules"
                    label-width="0"
                >
                    <!-- <div class="formTop">
                        <img :src="formTopImg" width="100%" alt="" />
                    </div> -->
                    <div class="title">密码登录</div>
                    <el-form-item label="" prop="username">
                        <div class="label username el-icon-user"></div>
                        <el-input
                            placeholder="请输入用户名"
                            maxlength="30"
                            v-autoTrim="{ obj: form, key: 'username' }"
                            v-model="form.username"
                            @keyup.enter.native="toLogin"
                        >
                        </el-input>
                    </el-form-item>

                    <!-- autocomplete="new-password" -->
                    <el-form-item label="" prop="password">
                        <div class="label password el-icon-lock"></div>
                        <el-input
                            placeholder="请输入密码"
                            type="password"
                            maxlength="16"
                            v-autoTrim="{ obj: form, key: 'password' }"
                            v-model="form.password"
                            @keyup.enter.native="toLogin"
                        >
                        </el-input>
                    </el-form-item>

                    <div class="btns">
                        <el-button type="primary" @click="toLogin"
                            >登录</el-button
                        >
                    </div>
                </el-form>
            </div>
        </div>
        <!-- <div class="top">
            <img :src="topImg" width="100%" alt="" />
        </div> -->

        <div class="bottom">
            ICP备案号: 京ICP备18035552号-1 All Rights Reserved: Copyright 2022
            CICV
        </div>
    </div>
</template>

<script>
//import  from '';

export default {
    name: "login", // 登录
    components: {},
    data() {
        return {
            form: {
                username: "",
                password: "",
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur",
                    },
                ],
            },
            i: 0,
            formTopImg: require("@/assets/common/image/login/formTop.png"),
            // formBgImg: require("@/assets/common/image/login/bgc.png"),
            formBgImg: require("@/assets/common/image/login/bgc1.png"),
            topImg: require("@/assets/common/image/login/top.png"),
        };
    },

    computed: {},

    methods: {
        toLogin() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$axios({
                        method: "post",
                        url: this.$api.common.username,
                        data: this.form,
                    }).then((res) => {
                        if (res.code == 200 && res.info) {
                            let Authorization =
                                res.info.token_type +
                                " " +
                                res.info.access_token;
                            let refreshToken = res.info.refresh_token;
                            let expiresTime = res.info.expires_time;

                            localStorage.clear();
                            localStorage.setItem(
                                "Authorization",
                                Authorization
                            );
                            localStorage.setItem("refreshToken", refreshToken);
                            localStorage.setItem("expiresTime", expiresTime);
                            localStorage.setItem(
                                "username",
                                this.form.username
                            );

                            let tokenTimer = null;
                            let toExpiresTime =
                                new Date(expiresTime).getTime() -
                                new Date().getTime();
                            if (toExpiresTime < 5 * 60 * 1000) {
                                this.getRefreshToken();
                            } else {
                                this.getUserInfo();
                                // this.$router.push({ path: "/mainPage" });
                            }
                        } else {
                            this.$message.error(res.message || "登录失败");
                        }
                    });
                }
            });
        },
        getRefreshToken() {
            this.$axios({
                method: "post",
                url: this.$api.common.refreshToken,
                data: {
                    refreshToken: localStorage.getItem("refreshToken"),
                },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    let Authorization =
                        res.info.token_type + " " + res.info.access_token;
                    let refreshToken = res.info.refresh_token;
                    let expiresTime = res.info.expires_time;

                    localStorage.clear();
                    localStorage.setItem("Authorization", Authorization);
                    localStorage.setItem("refreshToken", refreshToken);
                    localStorage.setItem("expiresTime", expiresTime);

                    this.getUserInfo();
                    // this.$router.push({ path: "/mainPage" });
                } else {
                    this.$message.error(res.message || "获取refresh_token失败");
                }
            });
        },
        getUserInfo() {
            this.$axios({
                method: "POST",
                url: this.$api.common.getCurrentUserInfo,
                data: {},
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.$store.commit("getUserId", res.info.id);
                    this.$store.commit("getUsername", res.info.username);
                    this.$store.commit("getRoleCode", res.info.roleCode);
                    this.$store.commit("getUseType", res.info.useType);

                    this.$router.push({ path: "/mainPage" });
                } else {
                    this.$message.error(res.message || "获取用户信息失败");
                }
            });
        },
    },

    mounted() {
        localStorage.clear();

        this.$store.commit("getUserId", "");
        this.$store.commit("getUsername", "");
        this.$store.commit("getRoleCode", "");
        this.$store.commit("getUseType", "");
    },

    beforeRouteLeave(to, from, next) {
        if (!localStorage.getItem("Authorization")) {
            // alert(666)
            return false;
        } else {
            next();
        }
    },
};
</script>

<style lang='less' scoped>
.loginPanel {
    position: relative;
    // padding: 100px;

    .loginBox {
        // position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        min-width: 100vw;
        min-height: 100vh;
        padding: 0;
        margin: 0;
        background: url("../assets/common/image/login/bg1.png") center no-repeat;
        background-size: cover;
        // background-size: 100% 100%;
    }

    .box {
        // position: absolute;
        position: relative;
        // top: 50%;
        // left: 50%;
        width: 48%;
        padding-top: 8.1%;
        padding-bottom: 4.5%;
        margin: 0 auto;
        // width: 1134px;
        // height: 747px;
        // height: 75%;
        // z-index: 1;
        // transform: translate(-50%, -50%);
        // background: url("../assets/common/image/login/bgc.png") center no-repeat;
        // background-size: contain;
    }

    .formBg {
        // position: absolute;
        // top: 0;
        // left: 0;
        // bottom: 0;
        // right: 0;
        width: 100%;
    }

    .top {
        position: fixed;
        top: 2.7%;
        right: 1.41%;
        width: 13.38%;
        z-index: 2;
    }

    .bottom {
        // position: fixed;
        position: absolute;
        bottom: 2.7%;
        left: 0;
        width: 100%;
        z-index: 2;
        color: #ffffff;
        font-size: 12px;
        text-align: center;
    }

    .el-form {
        position: absolute;
        top: 24%;
        left: 44.7%;
        // right: 90%;
        z-index: 3;
        // width: 400px;
        width: 52.5%;
        // min-width: 400px;
        padding: 36px 60px 96px;
        // background-color: rgba(220, 220, 220, 0.2);
        // backdrop-filter: blur(3px);
        overflow: hidden;

        .title {
            display: inline-block;
            color: @themeColor;
            font-size: 20px;
            padding-bottom: 10px;
            margin-bottom: 15%;
            border-bottom: 1px solid @themeColor;
        }

        /deep/ .el-form-item {
            margin-bottom: 15%;

            // .el-form-item__content {
            //     line-height: 100%;
            // }
        }

        /deep/ .el-input {
            width: 100%;
            // height: 40px;
            color: #ffffff;

            input,
            input.el-input__inner {
                // height: 48px;
                padding-left: 36px;
                // line-height: 48px;
                background: transparent !important;
                // color: #ffffff;
                color: #0c0c0c;
            }
        }

        .el-form-item {
            position: relative;

            .label {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 3;
                width: 18px;
                height: 18px;
                margin-left: 10px;
                line-height: 32px;
                font-size: 16px;
                color: #dcdcdc;
            }

            .username {
                color: @themeColor;
            }

            // .username {
            // background: url("../assets/common/image/login/name.png") center
            //     no-repeat;
            // background-size: contain;
            // }

            // .password {
            // background: url("../assets/common/image/login/pwd.png") center
            //     no-repeat;
            // background-size: contain;
            // }
        }
    }

    input:-webkit-autofill {
        box-shadow: 0 0 0 1000px #f00 inset; // 背景颜色
        -webkit-box-shadow: 0 0 0px 1000px #f00 inset;
        -webkit-text-fill-color: #fff; // input 的文字的颜色
        border: 0;
        background-color: transparent !important;
    }

    input:-internal-autofill-selected {
        background-color: transparent !important;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        transition-delay: 5000s;
        transition: color 5000s ease-out, background-color 5000s ease-out;
        -webkit-transition-delay: 5000s;
        -webkit-transition: color 5000s ease-out,
            background-color 5000s ease-out;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        color: #fff !important;
        -webkit-text-fill-color: #fff;
        -webkit-transition: background-color 99999999s ease-in-out 0s;
        transition: background-color 99999999s ease-in-out 0s;
    }

    input:autofill,
    input:autofill:hover,
    input:autofill:focus {
        -webkit-text-fill-color: #fff;
        -webkit-transition: background-color 99999999s ease-in-out 0s;
        transition: background-color 99999999s ease-in-out 0s;
    }

    .formTop {
        width: 62.1%;
        margin: 0 auto 20px;
        // background: url("../assets/common/image/login/formTop.png") center
        //     no-repeat;
        // background-size: contain;
    }

    .btns {
        padding-top: 8px;
        text-align: center;

        .el-button {
            width: 100%;
        }
    }
}

/* @media screen and (min-width: 33750px) {
    /deep/ .el-form {
        font-size: 30px;

        /deep/ .title {
            font-size: 30px;
        }
    }

    /deep/ .el-input {
        width: 100%;
        height: 40px;
        font-size: 30px;
        // color: #ffffff;

        input,
        input.el-input__inner {
            height: 60px;
            padding-left: 36px;
            line-height: 60px;
            background: transparent !important;
            color: #ffffff;
            font-size: 30px;
        }
    }

    .btns {
        .el-button {
            height: 60px;
            line-height: 40px;
            font-size: 30px;
        }
    }
} */
</style>