<template>
    <div id="login">
        <div id="systemName">市住建委“一网通办”管理门户</div>
        <div id="loginBox">
            <div id="login_title">登录</div>
            <div class="input_co_type">
                <div class="inputicon">
                    <img src="../../assets/imgs/login/用户名.png" />
                </div>
                <input type="text"  v-model="loginForm.userName" placeholder="请输入用户名" class="input_type" maxlength="40" />
            </div>
            <div class="input_co_type">
                <div class="inputicon">
                    <img src="../../assets/imgs/login/密码.png" />
                </div>
                <input  type="password"  v-model="loginForm.passWord" placeholder="请输入密码" class="input_type" maxlength="40" />
            </div>
            <div class="input_co_type">
                <div class="inputicon">
                    <img src="../../assets/imgs/login/验证码.png" />
                </div>
                <input  type="text"  v-model="loginForm.identifyingCode" placeholder="请输入验证码" class="input_type" maxlength="40" />
                <canvas @click="draw" id="myCanvas" width="90" height="40"></canvas>
            </div>
            <div id="submitBtn_div">
                <el-button
                        type="primary"
                        round
                        class="submitBtn"
                        @click="submitForm"
                >登录</el-button>
            </div>

<!--            <el-form
                    :model="loginForm"
                    :rules="loginRules"
                    ref="loginForm"
                    label-width="0px"
            >
                <el-form-item
                        label=""
                        prop="userName"
                        style="margin-top:40px;"
                >
                    <el-row>
                        <el-col :span='2'>
                            <div class="inputicon" @click="clearvalue">
                                <img src="../../assets/imgs/login/用户名.png" />
                            </div>
                        </el-col>
                        <el-col :span='22'>
                            <el-input
                                    class="inps"
                                    placeholder='用户名'
                                    v-model="loginForm.userName"
                            ></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item
                        label=""
                        prop="passWord"
                >
                    <el-row>
                        <el-col :span='2'>
                            <div class="inputicon" @click="clearvalue">
                                <img src="../../assets/imgs/login/密码.png" />
                            </div>
                        </el-col>
                        <el-col :span='22'>
                            <el-input type="password"
                                    class="inps"
                                    placeholder='密码'
                                    v-model="loginForm.passWord"
                            ></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item>
                <el-row>
                    <el-col :span='2'>
                        <div class="inputicon" @click="clearvalue">
                            <img src="../../assets/imgs/login/验证码.png" />
                        </div>
                    </el-col>
                    <el-col :span='22'>
                        <el-input type="password"
                                  class="inps"
                                  placeholder='密码'
                                  v-model="loginForm.identifyingCode"
                        ></el-input>
                    </el-col>
                </el-row>
                </el-form-item>
                <el-form-item style="margin-top:55px;">
                    <el-button
                            type="primary"
                            round
                            class="submitBtn"
                            @click="submitForm"
                    >登录</el-button>
                </el-form-item>
            </el-form>-->
        </div>
    </div>
</template>

<script>
    import {MessageBox} from "element-ui";
    import {Base64} from "js-base64";


    export default {
        data() {
            return {
                canvas: null,
                context: null,
                message_text:null,
                show_num:[],
                width: window.innerWidth,
                height: window.innerHeight,
                loginForm: {
                    userName: "",
                    passWord: "",
                    identifyingCode:""
                },
                loginRules: {
                    userName: [
                        { required: true, message: "请输入用户名", trigger: "blur" }
                    ],
                    passWord: [{ required: true, message: "请输入密码", trigger: "blur" }]
                }
            };
        },
        methods: {
            loadLogin(){
                if(this.getQueryByName("username") == null || this.getQueryByName("username") == "" ||this.getQueryByName("username") == undefined){
                    return;
                }
                this.loginForm.identifyingCode = this.show_num.join("");
                this.loginForm.passWord = "Ywtb@123";
                this.loginForm.userName = this.getQueryByName("username");
                localStorage.removeItem("ywtb_usercode");
                localStorage.removeItem("ywtb_username");
                localStorage.removeItem("ywtb_unitcode");
                localStorage.removeItem("ywtb_unitname");
                localStorage.removeItem("ywtb_lasttime");
                localStorage.removeItem("ywtb_role");
                localStorage.removeItem("ywtb_userkeycode");
                localStorage.removeItem("ywtb_changetime");
                localStorage.removeItem("ywtb_role_uuid");
                localStorage.removeItem("tempConfigButtonMap");
                this.submitForm();
            },
            getQueryByName(name){
                var url = window.location.toString().toLocaleLowerCase();
                url.replace("？","?");
                var temp = url.split("?");
                var paras = temp[1].split("&");
                var para = {};
                for(var i = 0 ; i < paras.length ;i++){
                    var temp_para = paras[i].split("=");
                    para[temp_para[0]] = decodeURI(temp_para[1]);
                }
                return para[name];
            },
            //提交登录
            submitForm() {
                this.message_text = null;
                if(this.loginForm.identifyingCode == "" || this.loginForm.identifyingCode == null){
                    this.message_text = "请输入验证码!";
                }
                if(this.show_num.join("") != this.loginForm.identifyingCode.toString().toLocaleLowerCase()){
                    this.message_text = "验证码输入错误!";
                }

                if(this.loginForm.passWord == "" || this.loginForm.passWord == null){
                    this.message_text = "请输入密码!";
                }

                if(this.loginForm.userName == "" || this.loginForm.userName == null){
                    this.message_text = "请输入用户名!";
                }
                this.draw();
                if(this.message_text != null){
                    MessageBox.alert(this.message_text, '提示', {
                        confirmButtonText: '确定'
                    });
                    return;
                }
                this.$request({
                    url:'/user/userLogin',
                    method:'post',
                    data:{
                        "username":this.loginForm.userName,
                        "password":Base64.encode(this.loginForm.passWord),
                        "type":"10",
                    }
                }).then(response => {
                    //var result = eval("(" + data.msg + ")");
                    var result =response.data.msg;
                    if (result.length == 0) {
                        MessageBox.alert('获取登录信息失败！', '提示', {
                            confirmButtonText: '确定'
                        });
                        return;
                    }
                    var rowcount = result[0].TotalRowCount;
                    if (rowcount != "1") {
                        MessageBox.alert('用户名或密码错误！', '提示', {
                            confirmButtonText: '确定'
                        });
                        return;
                    }
                    var rows = result[0].Rows;
                    if (rows.length != 1) {
                        MessageBox.alert('用户名或密码错误！', '提示', {
                            confirmButtonText: '确定'
                        });
                        return;
                    }
                    var LOGIN_LOCK = rows[0]["LOGIN_LOCK"];

                    if (LOGIN_LOCK == 1) {
                        var time = new Date(rows[0]["GETTIME"]).getTime() - new Date(rows[0]["LAST_TIME"]).getTime();
                        time = time / 1000;
                        if (time < 20) {
                            MessageBox.alert('当前用户已登录！', '提示', {
                                confirmButtonText: '确定'
                            });
                            return;
                        }
                    }
                    //获取用户信息  0  1 163  173  174
                    var usercode = rows[0].USERID;
                    var username = rows[0].USERNAME;
                    var unitcode = rows[0].UNIT;
                    var unitname = rows[0].UNIT_NAME;
                    var lasttime = rows[0].LAST_TIME;
                    var changetime = rows[0].CHANGE_TIME;
                    var role = rows[0].ROLE_CODE;
                    var userkeycode = rows[0]["TEMPUSERKEYCODE"];
                    var role_uuid = rows[0]["ROLE_UUID"];


                    //202209113修改，中秋前开会决定，限制登录权限
                    if(0 != role && 1 != role && 163 != role && 173 != role && 174 != role && '183' != role && '5' != role ){
                        MessageBox.alert('当前用户无登录权限！', '提示', {
                            confirmButtonText: '确定'
                        });
                        return;
                    }
                    //保存用户信息
                    localStorage.setItem("ywtb_usercode", usercode);
                    localStorage.setItem("ywtb_username", username);
                    localStorage.setItem("ywtb_unitcode", unitcode);
                    localStorage.setItem("ywtb_unitname", unitname);
                    localStorage.setItem("ywtb_lasttime", lasttime);
                    localStorage.setItem("ywtb_role", role);
                    localStorage.setItem("ywtb_userkeycode", userkeycode);
                    localStorage.setItem("ywtb_changetime", changetime);
                    localStorage.setItem("ywtb_role_uuid", role_uuid);
                    this.editUserinfoLoginStates(usercode,userkeycode);
                    //
                })

            },
            //修改登录状态
            editUserinfoLoginStates(usercode,userkeycode){
                this.$request({
                    url:'/user/editUserinfoLoginStates',
                    method:'post',
                    data:{
                        "CODE":usercode,
                        "USERKEYCODE":userkeycode,
                        "LOGIN_LOCK":"1",
                        "LOGIN_TYPE":"10"
                    }
                }).then(response => {
                    //var result = eval("(" + data.msg + ")");
                    let result =response.data.msg;
                    if (result[0]["success"] == "true") {
                        this.selecModuleByRoleCode();
                        return;
                    }
                })
            },
            selecModuleByRoleCode(){
                this.$request({
                    url:'/ptjkInterface/selecModuleByRoleCode',
                    method:'post',
                    data:{
                        "ROLE_ID":localStorage.getItem("ywtb_role"),
                        "APPKEY":localStorage.getItem("ywtb_userkeycode")
                    }
                }).then(response => {
                    //var result = eval("(" + data.msg + ")");
                    var result =response.data.msg;
                    var rows = result[0].Rows;
                    localStorage.setItem("ywtb_role_models",JSON.stringify(rows));
                    this.selectConfigModuleByRole();
                    return;
                })
            },
            selectConfigModuleByRole(){//判断当前页面上的所有模块 当前角色是否配置使用
                this.$request({
                    url:"http://10.81.66.9:9250/ptjkInterface/selectAllZymlRoleModuleByRoleCode?appkey="+localStorage.getItem("ywtb_userkeycode"),
                    method:'post',
                    data:{
                        "ROLE_ID":localStorage.getItem("ywtb_role")//暂时使用测试角色  平台管理
                    }
                }).then(response => {
                    //var result = eval("(" + data.msg + ")");
                    var result =response.data.msg;
                    var tempConfigButtonMap = {};
                    if(result[0].Rows.length > 0){
                        for(var i = 0 ;i < result[0].Rows.length;i++){
                            tempConfigButtonMap[result[0].Rows[i]["MODULE_ID"]] = result[0].Rows[i];
                        }
                        this.selectConfigButtonByRole_01(tempConfigButtonMap);
                    }
                })
            },
            selectConfigButtonByRole_01(tempConfigButtonMap){
                this.$request({
                    url:"http://10.81.66.9:9250/ptjkInterface/selectConfigButtonByRole?appkey="+localStorage.getItem("ywtb_userkeycode"),
                    method:'post',
                    data:{
                        "ROLE_ID":localStorage.getItem("ywtb_role")//暂时使用测试角色  平台管理
                    }
                }).then(response => {
                    //var result = eval("(" + data.msg + ")");
                    var result =response.data.msg;
                    if(result[0].Rows.length > 0){
                        for(var i = 0 ;i < result[0].Rows.length;i++){
                            tempConfigButtonMap[result[0].Rows[i]["CODE"]] = result[0].Rows[i];
                        }
                    }
                    localStorage.setItem("tempConfigButtonMap",JSON.stringify(tempConfigButtonMap));
                    this.$router.push('/origion/home')
                    return;
                })
            },
            draw() {
                var canvas_width = this.canvas.width;
                var canvas_height = this.canvas.height;
                var canvas = document.getElementById("myCanvas");//获取到canvas的对象，演员
                var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
                canvas.width = canvas_width;
                canvas.height = canvas_height;
                var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
                var aCode = sCode.split(",");
                var aLength = aCode.length;//获取到数组的长度

                for (var i = 0; i <= 3; i++) {
                    var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                    var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                    var txt = aCode[j];//得到随机的一个内容
                    this.show_num[i] = txt.toLowerCase();
                    var x = 10 + i * 20;//文字在canvas上的x坐标
                    var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                    context.font = "bold 23px 微软雅黑";

                    context.translate(x, y);
                    context.rotate(deg);

                    context.fillStyle = this.randomColor();
                    context.fillText(txt, 0, 0);

                    context.rotate(-deg);
                    context.translate(-x, -y);
                }
                for (let i = 0; i <= 5; i++) { //验证码上显示线条
                    // context.strokeStyle = this.randomColor();
                    // context.beginPath();
                    // context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    // context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    // context.stroke();
                }
                for (let i = 0; i <= 30; i++) { //验证码上显示小点
                    context.strokeStyle = this.randomColor();
                    context.beginPath();
                    let x = Math.random() * canvas_width;
                    let y = Math.random() * canvas_height;
                    context.moveTo(x, y);
                    context.lineTo(x + 1, y + 1);
                    context.stroke();
                }
            },randomColor() {//得到随机的颜色值
                return "#11E3FF";
                        // var r = Math.floor(Math.random() * 256);
                        // var g = Math.floor(Math.random() * 256);
                        // var b = Math.floor(Math.random() * 256);
                        // return "rgb(" + r + "," + g + "," + b + ")";
                    }
        },
        mounted() {
            this.canvas = document.getElementById("myCanvas");
            this.draw();
            this.loadLogin();
            //this.context = this.canvas.getContext("2d");

            //this.createStar(true);
            //this.drawFrame();
        }
    };
</script>

<style scoped lang="scss">
    #login {
        background: url("../../assets/imgs/login/一网通办登录页背景.jpg") no-repeat;
        /* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动 */
        //background-attachment: fixed;
        /* 图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。 */
        background-size: cover;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        font-size: 16px;
        color: #fff;
        //font-family: "Source Sans Pro";
        #loginBox {
            width: 540px;
            height: 500px;
            background: rgba(255, 255, 255, 0.2);
            position: absolute;
            top: 5%;
            left: 0%;
            right: -50%;
            bottom: 0%;
            margin:auto;
            box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
            opacity: 1;
            .inps input {
                border: none;
                color: #fff;
                background-color: transparent;
                font-size: 12px;
            }
            .submitBtn {
                background-color: transparent;
                color: #39f;
                width: 200px;
                margin-left: 170px;
                margin-top: -6.889vh;
            }
            .iconfont {
                color: #fff;
            }
        }

        #systemName{
            width: 731px;
            height: 47px;
            font-size: 48px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #D4F1FF;
            line-height: 175px;
            margin-left: 100px;
        }

    }

    .input_co_type{
        width:90%;
        height:48px;
        background: rgba(255, 255, 255, 0.2);
        margin-top: 8%;
        margin-left: 5%;
        display: flex;
        background: #000D26;
        opacity: 0.4;
        border-radius: 6px;
    }
    .input_type{
        height:48px;
        border: none;
        font-size: 16px;
        //color: #333333;
        letter-spacing: 0;
        padding-left:16px;
        flex:1;
        outline: none;

        color: #FFFFFF;
        line-height: 48px;

    }
    .inputicon{
        width:40px;
        height:48px;
        margin-left:15px;
    }
    .inputicon>img{
        position:relative;
        width: 28px;
        height: 28px;
        padding-top:10px;
        padding-right:10px;
    }

    #login_title{
        width:80%;
        height: 30px;
        font-size: 30px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 30px;
        text-align: center;
        margin-left:8%;
        margin-top: 5%;
    }
    #submitBtn_div{
        margin-top: 16%;
        width: 100%;
    }
</style>
