<template>
    <div id="login">
        <div id="bgd">
            <canvas
                    id='myCanvas'
                    :width='width'
                    :height='height'
            >
            </canvas>
        </div>
        <div id="loginBox">
            <h4>登录</h4>
            <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'>
                            <span class="iconfont">账号:</span>
                        </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'>
                            <span class="iconfont">密码:</span>
                        </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 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,
                stars: [], //星星数组
                shadowColorList: [
                    "#39f",
                    "#ec5707",
                    "#b031d4",
                    "#22e6c7",
                    "#92d819",
                    "#14d7f1",
                    "#e23c66"
                ], //阴影颜色列表
                directionList: ["leftTop", "leftBottom", "rightTop", "rightBottom"], //星星运行方向
                speed: 50, //星星运行速度
                last_star_created_time: new Date(), //上次重绘星星时间
                Ball: class Ball {
                    constructor(radius) {
                        this.x = 0;
                        this.y = 0;
                        this.radius = radius;
                        this.color = "";
                        this.shadowColor = "";
                        this.direction = "";
                    }

                    draw(context) {
                        context.save();
                        context.translate(this.x, this.y);
                        context.lineWidth = this.lineWidth;
                        var my_gradient = context.createLinearGradient(0, 0, 0, 8);
                        my_gradient.addColorStop(0, this.color);
                        my_gradient.addColorStop(1, this.shadowColor);
                        context.fillStyle = my_gradient;
                        context.beginPath();
                        context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
                        context.closePath();

                        context.shadowColor = this.shadowColor;
                        context.shadowOffsetX = 0;
                        context.shadowOffsetY = 0;
                        context.shadowBlur = 10;

                        context.fill();
                        context.restore();
                    }
                }, //工厂模式定义Ball类
                width: window.innerWidth,
                height: window.innerHeight,
                loginForm: {
                    userName: "",
                    passWord: ""
                },
                loginRules: {
                    userName: [
                        { required: true, message: "请输入用户名", trigger: "blur" }
                    ],
                    passWord: [{ required: true, message: "请输入密码", trigger: "blur" }]
                }
            };
        },
        methods: {
            //提交登录
            submitForm() {
                if(this.loginForm.userName == "" || this.loginForm.passWord == ""){
                    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;
                        }
                    }
                    //获取用户信息
                    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"];
                    //保存用户信息
                    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.$router.push('/origion/home');
                    return;
                })
            }
            ,
            //重复动画
            drawFrame() {
                requestAnimationFrame(this.drawFrame);
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
                this.createStar(false);
                this.stars.forEach(this.moveStar);
            },
            //展示所有的星星
            createStar(params) {
                let now = new Date();
                if (params) {
                    //初始化星星
                    for (var i = 0; i < 50; i++) {
                        const radius = Math.random() * 3 + 2;
                        let star = new this.Ball(radius);
                        star.x = Math.random() * this.canvas.width + 1;
                        star.y = Math.random() * this.canvas.height + 1;
                        star.color = "#ffffff";
                        star.shadowColor = this.shadowColorList[
                            Math.floor(Math.random() * this.shadowColorList.length)
                            ];
                        star.direction = this.directionList[
                            Math.floor(Math.random() * this.directionList.length)
                            ];
                        this.stars.push(star);
                    }
                } else if (!params && now - this.last_star_created_time > 3000) {
                    //每隔3秒重绘修改颜色其中30个球阴影颜色
                    for (let i = 0; i < 30; i++) {
                        this.stars[i].shadowColor = this.shadowColorList[
                            Math.floor(Math.random() * this.shadowColorList.length)
                            ];
                    }
                    this.last_star_created_time = now;
                }
            },
            //移动
            moveStar(star) {
                if (star.y - this.canvas.height > 0) {
                    //触底
                    if (Math.floor(Math.random() * 2) === 1) {
                        star.direction = "leftTop";
                    } else {
                        star.direction = "rightTop";
                    }
                } else if (star.y < 2) {
                    //触顶
                    if (Math.floor(Math.random() * 2) === 1) {
                        star.direction = "rightBottom";
                    } else {
                        star.direction = "leftBottom";
                    }
                } else if (star.x < 2) {
                    //左边
                    if (Math.floor(Math.random() * 2) === 1) {
                        star.direction = "rightTop";
                    } else {
                        star.direction = "rightBottom";
                    }
                } else if (star.x - this.canvas.width > 0) {
                    //右边
                    if (Math.floor(Math.random() * 2) === 1) {
                        star.direction = "leftBottom";
                    } else {
                        star.direction = "leftTop";
                    }
                }
                if (star.direction === "leftTop") {
                    star.y -= star.radius / this.speed;
                    star.x -= star.radius / this.speed;
                } else if (star.direction === "rightBottom") {
                    star.y += star.radius / this.speed;
                    star.x += star.radius / this.speed;
                } else if (star.direction === "leftBottom") {
                    star.y += star.radius / this.speed;
                    star.x -= star.radius / this.speed;
                } else if (star.direction === "rightTop") {
                    star.y -= star.radius / this.speed;
                    star.x += star.radius / this.speed;
                }
                star.draw(this.context);
            }
        },
        mounted() {
            this.canvas = document.getElementById("myCanvas");
            this.context = this.canvas.getContext("2d");

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

<style scoped lang="scss">
    #login {
        width: 100vw;
        padding: 0;
        margin: 0;
        height: 100vh;
        font-size: 16px;
        background-repeat: no-repeat;
        background-position: left top;
        background-color: #242645;
        color: #fff;
        font-family: "Source Sans Pro";
        background-size: 100%;
        /*background-image: url("../../../static/images/Starry.jpg");*/
        position: relative;
        #bgd {
            height: 100vh;
            width: 100vw;
            overflow: hidden;
        }
        #loginBox {
            width: 540px;
            height: 280px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            padding: 50px 40px 40px 40px;
            box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
            opacity: 1;
            background: linear-gradient(
                    230deg,
                    rgba(53, 57, 74, 0) 0%,
                    rgb(0, 0, 0) 100%
            );
            .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;
            }
        }
    }
</style>