<!DOCTYPE html>
<html>

<head>
    <base href="vue/" />
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <title>域卫EVOS后端控制平台</title>
    <link href="/vue/image/logo@2x.png" rel="shortcut icon"/>
    <script type="text/javascript" src="/vue/js/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/vue/css/element.css"/>
    <link rel="stylesheet" type="text/css" href="/vue/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/css/iconfont-menu.css"/>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/ruoyi/js/ry-ui.js"></script>
    <script type="text/javascript" src="/ajax/libs/jsencrypt/jsencrypt.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html,
        #app {
            width: 100%;
            height: 100%;
        }


        .bg {
            width: 100%;
            height:calc(100% - 48px);
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
            background-position: center;
            display: flex;
            /*align-items: center;*/
            position: relative;
            top: 0;
            left: 0;
        }

        .loginDiv {
            min-width: 380px;
            /*min-height: 450px;*/
            padding: 30px 0;
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.10);
            position: absolute;
            top: 25%;
            right: 18%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: column;
        }

        .logo {
            width: 40px;
            height: 40px;
        }

        .title {
            margin-left: 10px;
            font-size: 20px;
            font-weight: 600;
            font-family: "pcX";
        }

        .el-form {
            margin-top: 32px !important;
        }
        .el-form-item{
            margin-bottom: 20px;
        }

        .el-form-item__content {
            width: 300px;
            height: 40px;
            margin-left: 0 !important;
        }

        .el-input__inner {
            height: 40px !important;
            font-size: 14px;
        }

        .el-form-item__error {
            font-size: 15px;
        }

        .el-form-item__content {
            display: flex;
            align-items: center;
        }

        .el-form .el-form-item:nth-child(4) .el-form-item__content .el-input {
            width: 233px !important;
        }

        .el-button--primary {
            width: 340px;
            height: 40px;
            background-color: #2D70FA;
        }

        .verification {
            width: 110px;
            height: 40px;
        }

        .verificationMainDiv {
            width: 110px;
            height: 40px;
            margin-left: 20px;
        }

        .test{
            width: 1px;
            height: 16px;
            background: #d9d9d9;
            margin-left:5px
        }

        .el-input__prefix{
            display: flex;
            align-items: center;
        }
        .el-input__icon{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .el-input--prefix .el-input__inner{
            padding-left: 50px;
        }
        .el-input__validateIcon{
            display: none!important;
        }
        .title-text1{
            font-size: 16px;
            font-weight: 600;
            color: #1a202c;
            line-height: 24px;
            letter-spacing: 0px;
        }
        .title-text2{
            font-size: 16px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-500;
            font-weight: 500;
            text-align: CENTER;
            color: #1a202c;
            line-height: 24px;
            letter-spacing: 0px;
        }

        .titleA{

            background: #e7eeff;
            border-radius: 4px;
            color: #1E6AFF!important;
        }
    </style>
</head>

<body>
<div id='app'>
    <div style="height: 48px;background: rgba(255,255,255,0.60);display: flex;align-items: center;justify-content: space-around">
        <div style="display: flex;align-items: center">
            <img src="/vue/image/logo.png"  style="width: 28px;height: 28px;margin-right: 10px"/>
            <div class="title-text1">域卫安全</div>
            <div style="width: 1px;height: 20px;background: #cbced8;margin: 0 10px"></div>
            <div class="title-text1">YVEVOS一机多用</div>
        </div>
        <div style="display: flex;align-items: center">
            <div id="switchLogin1" @click="switchLogin(1)" style="cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 14px;margin-right: 30px;color: #384254; width: 102px;height: 32px;padding: 0 10px"><i class="iconfont iconfont icon-icon_guanliduan" style="font-size: 20px;margin-right: 6px"></i>管理端登录</div>
            <div class="titleA"  id="switchLogin2" @click="switchLogin(2)" style="cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 14px;width: 102px;height: 32px;color: #384254;"><i class="iconfont icon-icon_caidan_qiyeguanli_weixuan1" style="font-size: 20px;margin-right: 6px"></i>企业登录</div>
        </div>
    </div>
    <template>
        <div class="bg" style="background-image: url(/vue/image/bg_logins2x.png);">
            <div class="loginDiv">
                <div style="display: flex;align-items: center;margin-right: 4%">
                    <img class="logo" src="/vue/image/logo.png" alt="" />
                    <p class="title">域卫YVEVOS后端控制平台</p>
                </div>
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item id="donel" >
                        <el-input @input="verifyInput()" :validate-event="false" prefix-icon="iconfont icon-icon_guishuqiye" placeholder="请输入企业ID/企业名称" type="text" v-model="ruleForm.tenant" autocomplete="on">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="account">
                        <el-input @input="verifyInput()" :validate-event="false" prefix-icon="iconfont icon-icon_yonghuming" placeholder="用户名/手机号" type="text" v-model="ruleForm.account" autocomplete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="pass">
                        <el-input @input="verifyInput()" :validate-event="false" prefix-icon="iconfont icon-icon_mima" placeholder="密码" type="password" v-model="ruleForm.pass"  show-password>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="age" style="margin-bottom: 32px" :error="errorMsg">
                        <el-input @input="verifyInput()" :validate-event="false" prefix-icon="iconfont icon-icon_yanzhengma" placeholder="验证码" v-model.number="ruleForm.age"></el-input>
                        <div class="verificationMainDiv">
                            <img @click='verificationClick' class="verification" :src="verification" alt="" />
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-button @keyup.enter="keyDown" :disabled="forbidden" type="primary" @click="submitForm('ruleForm')">登  录</el-button>
                    </el-form-item>
                    <div>
                        <label  style="color: #6a7986;font-size: 14px;">登录即表示您已同意平台<a href="/vue/individual/privacyServiceAgreement.html"  target="_blank" style="color: #1E6AFF;">服务协议</a>和<a
                                href="/vue/individual/privacyServiceAgreement.html"  target="_blank" style="color: #1E6AFF;">隐私政策</a></label>
                    </div>
                </el-form>
            </div>
            <div style="width: 100%;height: 100%;display: flex;align-items: flex-end;justify-content:  center">
                <a target="_blank" href="https://beian.miit.gov.cn/" style="width: auto;font-size: 14px;margin-bottom: 24px;text-decoration: none;color: #8C93A1">© copyright 域卫科技 蜀ICP备2021033230号-1</a>
            </div>
        </div>
    </template>
</div>

</body>
<script>
    window.onload = function() {
        const router = new VueRouter({
            mode: 'history'
        })
        new Vue({
            el: '#app',
            router,
            data() {
                var checkAge = (rule, value, callback) => {
                    if(!value && value!==0) {
                        return callback(new Error('请输入验证码'));
                    }
                    callback();
                };
                var validateAccount = (rule, value, callback) => {
                    if(value === '') {
                        callback(new Error('请输入账号'));
                    } else {
                        callback();
                    }
                };
                var validatePass = (rule, value, callback) => {
                    if(value === '') {
                        callback(new Error('请输入密码'));
                    } else {
                        callback();
                    }
                };
                return {
                    typeDiv:'2',

                    errorMsg:'',
                    forbidden:true,
                    flag: false,
                    baseUrl: '',
                    verification: '',
                    ruleForm: {
                        tenant: '',
                        account: '',
                        pass: '',
                        age: ''
                    },
                    rules: {
                        account: [{
                            validator: validateAccount,
                        }],
                        pass: [{
                            validator: validatePass,
                        }],
                        age: [{
                            validator: checkAge,
                        }]
                    }
                };
            },
            created() {

                // this.handleScreen()

            },
            methods: {

                switchLogin(type){

                    if (type == 2){
                        $("#donel").show();
                    }else {
                        $("#donel").hide();

                    }
                       $("#switchLogin" + this.typeDiv).removeClass("titleA")
                       $("#switchLogin" + type ).addClass("titleA")
                    this.typeDiv = type
                },


                verifyInput(){
                    if (this.ruleForm.account != '' && this.ruleForm.pass != '' && (this.ruleForm.age != '' || this.ruleForm.age == '0')){
                        this.forbidden = false
                        window.localStorage.setItem('tenant', this.ruleForm.tenant);
                        window.localStorage.setItem('typeDiv', this.typeDiv);
                    }else {
                        this.forbidden = true
                    }

                },
                // handleScreen() {
                //     const m = this.detectZoom();
                //     document.body.style.zoom = 100 / Number(m);
                //     document.getElementsByTagName("html")[0].setAttribute("style", "font-size:" + 99 + "px");
                // },
                detectZoom() {
                    let ratio = 0,
                        screen = window.screen,
                        ua = navigator.userAgent.toLowerCase();
                    if(window.devicePixelRatio !== undefined) {
                        ratio = window.devicePixelRatio;
                    } else if(~ua.indexOf('msie')) {
                        if(screen.deviceXDPI && screen.logicalXDPI) {
                            ratio = screen.deviceXDPI / screen.logicalXDPI;
                        }
                    } else if(window.outerWidth !== undefined && window.innerWidth !== undefined) {
                        ratio = window.outerWidth / window.innerWidth;
                    }
                    if(ratio) {
                        ratio = Math.round(ratio * 100);
                    }
                    return ratio;
                },
                /*验证码*/
                verificationClick() {
                    axios.get( '/captcha/captchaImage?type=math', {
                        responseType: 'blob'
                    }).then(res => {
                        this.verification = window.URL.createObjectURL(res.data);
                    }, err => {
                        console.log(err)
                    })
                },
                submitForm(formName) {

                    this.$refs[formName].validate((valid) => {

                        if(valid) {
                            var tena = ''
                            if (this.typeDiv == 2){
                                tena = this.ruleForm.tenant
                            }
                            var data = {
                                isAdminType: this.typeDiv == '1' ? true : false,
                                tenant: tena,
                                username: this.ruleForm.account,
                                password: $.common.rsaEncrypt(this.ruleForm.pass),
                                validateCode: this.ruleForm.age,
                                rememberMe: false
                            }
                            axios.post('/login', Qs.stringify(data)).then(res => {
                                if(res.data.code == 0) {
                                    top.location.href = '/index'
                                } else {
                                    this.verificationClick()
                                   this.errorMsg = res.data.msg
                                }
                            }, err => {
                                console.log(err)
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                    this.errorMsg = ''
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                },
                keyDown(e){
                    //如果是回车则执行登录方法
                    if(e.keyCode == 13){
                        //需要执行的登录方法
                        this.submitForm('ruleForm');
                    }
                },
                checkIfItIsTheTopmostLevel() {
                    //判断一下当前是不是最顶层，如果不是，则做一下顶层页面重定向
                    if (window != top) {
                        top.location.href = location.href;
                    }
                },

            },
            mounted() {


                // window.onresize = () => {
                //     this.handleScreen()
                // }
                this.verificationClick()
                //绑定事件
                window.addEventListener('keydown',this.keyDown);
                this.checkIfItIsTheTopmostLevel();

                var div = document.createElement("div");
                var divattr = document.createAttribute("class");
                divattr.value = "test";

                var div1 = document.createElement("div")
                var divattr1 = document.createAttribute("class");
                divattr1.value = "test";

                var div2 = document.createElement("div");
                var divattr2 = document.createAttribute("class");
                divattr2.value = "test";

                var div3= document.createElement("div");
                var divattr3 = document.createAttribute("class");
                divattr3.value = "test";


                div.setAttributeNode(divattr);
                div1.setAttributeNode(divattr1);
                div2.setAttributeNode(divattr2);
                div3.setAttributeNode(divattr3);

                document.getElementsByClassName("el-input__prefix").item(0).appendChild(div)
                document.getElementsByClassName("el-input__prefix").item(1).appendChild(div1)
                document.getElementsByClassName("el-input__prefix").item(2).appendChild(div2)
                document.getElementsByClassName("el-input__prefix").item(3).appendChild(div3)
                // 从本地存储中获取之前保存的值
                const savedValue = window.localStorage.getItem('tenant');
                const typeDiv = window.localStorage.getItem('typeDiv');
                if (savedValue) {
                    this.ruleForm.tenant = savedValue;
                }
                if (typeDiv) {
                    this.switchLogin(typeDiv);
                }

            },
        })
    }
</script>
<script type="text/javascript" src="/vue/js/vue-router.min.js"></script>
<script type="text/javascript" src="/vue/js/axios.min.js"></script>
<script type="text/javascript" src="/vue/js/qs.js"></script>

<script type="text/javascript" src="/vue/js/element.js"></script>

</html>