<template>
<div id="login">
    <div class="loginWrap">
        <div class="form">
            <el-row>
                <el-col :span="24" class="form-tit cent">
                    <img src="@/assets/logo1.png" alt width="100px" />
                    <h1>危化品企业监管平台</h1>
                    <p>
                        <em>The Hazardous Chemicals Supervision System</em>
                        <br />
                    </p>
                </el-col>
                <div class="contianer">
                    <el-form class="form-con" :model="ruleForm" :rules="rules" ref="ruleForm">
                        <el-form-item prop="username">
                            <el-input placeholder="请输入用户名" name="username" id="username" v-model="ruleForm.username"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input placeholder="请输入密码" type="password" name="password" id="password" v-model="ruleForm.password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="loginbtn" @click="handleSubmit()" :loading="isLoging">登录</el-button>
                            <!-- 注释：native.prevent 取消默认事件 -->
                        </el-form-item>
                        <p>
                            <!-- <el-checkbox label="7天自动登陆" v-model="ruleForm.autoLogin"></el-checkbox> -->
                            <el-button type="text" class="fl" @click="$router.push('/register')">还没有企业账号?点击注册</el-button>
                            <el-button type="text" class="fr" @click="$router.push('/search')">查询注册信息</el-button>
                        </p>
                    </el-form>
                </div>
            </el-row>
        </div>
        <div class="bckg">
            <img src="@/assets/bg.jpeg" alt />
        </div>
    </div>
</div>
</template>

<script lang="ts">
import {
    Component,
    Vue,
    Provide
} from "vue-property-decorator";
import {
    Message
} from "element-ui";
import {
    State,
    Getter,
    Mutation,
    Action
} from "vuex-class";
import Layout from "@/views/Layout/Layout.vue";
import {
    mapActions
} from "vuex";
import METHOD from "@/utils/methods";
import {
    createrouter,
    asyncRouterMap
} from "../../router";
import routers from "@/router";
@Component({
    components: {},
})
export default class Login extends Vue {
    @Action("setMoudleArr") setMoudleArr: any;

    @Provide() isLoging: Boolean = false;
    @Provide() ruleForm: {
        username: String;
        password: String;
        autoLogin: Boolean;
    } = {
        username: "",
        password: "",
        autoLogin: true,
    };
    @Provide() rules = {
        username: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
        }],
        password: [{
            required: true,
            message: "请输入密码",
            trigger: "blur"
        }],
    };
    addDouter(rolelist: any) {
        let that = this;
        var deArr: any = [];
        let obj: any = {};
        if (rolelist.length == 0) {
            that.$message.error("该用户未分配角色！");
            return;
        }
        rolelist.forEach((ele: any) => {
            let isSelected = ele.children.some((el: any) => el.selected == "true");
            var obj = {
                path: ele.path,
                component: Layout,
                redirect: "",
                meta: {
                    title: ele.title,
                    icon: ele.icon,
                    selected: isSelected ? "true" : ele.selected,
                    level: ele.level,
                },
                children: [],
            };
            obj.path = ele.path;
            let childarr: any = ele.children;
            if (childarr.length > 0) {
                childarr.forEach((sele: any) => {
                    let vueurl =
                        (METHOD.componentUrl as any)[sele.path.replace("/", "")] +
                        sele.path;
                    let sobj: any = {
                        name: sele.name,
                        path: sele.path,
                        component: () => import(`@/views/${vueurl}.vue`),
                        meta: {
                            title: sele.title,
                            icon: sele.icon,
                            selected: sele.selected,
                            level: sele.level,
                        },
                    };
                    if (sele.code) sobj.meta.listId = sele.code;
                    if (sele.selected == "true") {
                        obj.children.push(sobj);
                    }
                });
            }
            if (obj.children.length > 0) obj.redirect = (obj.children[0] as any).path;
            deArr.push(obj);
        });
        let arr = deArr.find((ele: any) => ele.meta.selected == 'true');
        (that.$router as any).matcher = (createrouter(
            asyncRouterMap
        ) as any).matcher; //重置router
        that.$router.addRoutes(deArr);
        that.setMoudleArr(deArr);
        sessionStorage.setItem("moudleArr", JSON.stringify(deArr));
        that.$router.push(arr.path)
    }
    handleSubmit(): void {
        let that = this;
        (that.$refs["ruleForm"] as any).validate((valid: any) => {
            if (valid) {
                // let today = new Date(),timestamp = today.getTime();
                that.isLoging = true;
                (that as any).$axios
                    .post("/account/login", {
                        account: that.ruleForm.username,
                        password: that.ruleForm.password,
                        methodName: "auth",
                        timestamp: "",
                    })
                    .then((res: any) => {
                        that.isLoging = false;
                        if (res.code == 0) {
                            sessionStorage.setItem(
                                "userInfo",
                                JSON.stringify(res.data.userInfo)
                            );
                            sessionStorage.setItem("token", JSON.stringify(res.data.token));
                            //登陆成功跳转页面
                            that.addDouter(res.data.userInfo.roleMenuList);
                        }
                    })
                    .catch(() => {
                        that.isLoging = false;
                    });
            } else {
                return false;
            }
        });
    }
    created() {
        let usd = sessionStorage.getItem("userInfo");
        if (usd) {
            sessionStorage.removeItem("userInfo");
            sessionStorage.removeItem("token");
        }
        let that = this;
        document.onkeydown = function (e) {
            let key = (window.event as any).keyCode;
            if (key == 13) {
                that.handleSubmit();
            }
        };
    }
}
</script>

<style lang="scss">
@import "@/utils/public.scss";

#login {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.loginWrap {
    display: flex;
    align-items: center;
    -webkit-lign-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .bckg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;

        img {
            width: 100%;
            height: 100vh;
            filter: blur(20px);
            -webkit-filter: blur(4px);
        }
    }

    .form {
        background: rgba(0, 0, 0, 0.5);
        width: 350px;
        height: auto;
        padding: 40px 30px;
        -webkit-box-shadow: 0 0 11px 2px #ffffff;
        box-shadow: 0 0 11px 2px #ffffff;
        border-radius: 3px;
        position: relative;
        z-index: 1;
    }

    .el-row {
        margin-bottom: 20px;
    }

    .form-tit {
        margin-bottom: 20px;
    }

    h1 {
        margin-bottom: 5px;
        color: #eee;
        font-family: "黑体";
    }

    p {
        color: rgb(136, 139, 136);
        margin: 0;
    }

    .loginbtn {
        background: $theme-color;
        color: #ffffff;
        font-size: 1.2em;
        width: 100%;
        border: none;
    }
}

#username,
#password,
#email {
    height: 45px;
    line-height: 45px;
    background-position: 10px center;
    background-repeat: no-repeat;
    padding-left: 40px;
    background-color: transparent;
    color: #fff;
}

#username {
    background-image: url("../../assets/u22.png");
}

#password {
    background-image: url("../../assets/u24.png");
}

#email {
    background-image: url("../../assets/u23.png");
    background-size: 24px;
}
</style>
