<template>
    <div class="loginPic">
        <div class="login_left">
            <p class="titleW">Welcome!</p>
            <p class="title">基于风机发电量全寿命周期管控的研究与应用</p>
            <p class="titleEn">Research and application of full lifecycle control based on wind turbine power generation
            </p>
        </div>
        <div class="login_right">
            <p class="loginTit">账号登录</p>
            <div class="loginUser">
                <el-icon>
                    <UserFilled />
                </el-icon>
                <el-input v-model="inputUser" placeholder="请输入账号">
                </el-input>
            </div>
            <div class="loginMima">
                <el-input type="password" v-model="inputMima" placeholder="请输入密码" @keyup.enter="handleLogin">
                    <template #prepend>
                        <i class="el-input__icon icon-mima" />
                    </template>
                </el-input>
            </div>
            <!-- <div class="loginYanzhengma">
                <el-input type="password" v-model="inputYanzhengma" placeholder="请输入验证码" @keyup.enter="handleLogin">
                    <template #prepend>
                        <i class="el-input__icon icon-yanzhengma" />
                    </template>
                </el-input>
                <div class="login-code">
                    <img :src="codeUrl" @click="getCode" class="login-code-img" />
                </div>
            </div> -->
            <div class="remeber">
                <el-checkbox v-model="ememberMe" disabled>记住密码</el-checkbox>
            </div>
            <el-button class="loginBtn" :loading="loading" @click.prevent="handleLogin">
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
            </el-button>
        </div>
    </div>
</template>

<script>
    import {
        setToken
    } from '@/utils/auth'
    import {
        ElMessage
    } from "element-plus";
    import {
        apiGetUserInfo,
        toLoginApi,
        apiGetWeather
    } from '@/api/api'
    import {
        apiProjectLogin
    } from '@/api/gengra'
    export default {
        data() {
            return {
                // administrator qweABC123
                inputUser: 'admin',
                inputMima: 'admin123',
                inputYanzhengma: '',
                codeUrl: '',
                ememberMe: true,
                loading: false,
                loginText: ''
            }
        },
        created() {
            // this.getCode();
        },
        methods: {
            getCode() {
                apiGetUserInfo().then((res => {
                    if (res.msg === "操作成功") {
                        // this.codeUrl = window.URL.createObjectURL(res) // 返回流的形式
                        this.codeUrl = "data:image/gif;base64," + res.img; //返回base64形式
                        this.loginText = this.$utils.strChangeCase(res.text, 5)
                    }
                }))
            },
            handleLogin() {
                if (this.loginText === this.$utils.strChangeCase(this.inputYanzhengma, 5)) {
                    if (this.inputUser && this.inputMima) {
                        this.loading = true
                        // this.toLogin(this.inputUser, this.inputMima)
                        this.toNewLogin(this.inputUser, this.inputMima)
                    } else {
                        ElMessage.error('请输入账号或密码');
                    }
                } else {
                    this.inputYanzhengma = ''
                    this.loading = false
                    ElMessage.error('验证码验证失败，请重新输入');
                    this.getCode()
                }
            },
            //原登录接口---带token
            toLogin(name, pass) {
                let params = {
                    username: name,
                    password: pass
                }
                toLoginApi(params).then(datas => {
                    if (datas && datas.code === 0) {
                        this.loading = false
                        setToken(datas.token)
                        let userObj = {
                            role: '',
                            userId: datas.id
                        }
                        if (datas.role === '0' || datas.role === '1') {
                            userObj.role = 'administrators'
                            window.sessionStorage.setItem('userMessage', JSON.stringify(userObj))
                        } else {
                            userObj.role = 'ordinaryUser'
                            window.sessionStorage.setItem('userMessage', JSON.stringify(userObj))
                        }
                        this.$router.push({
                            path: "/home"
                        })
                    } else {
                        ElMessage.error(datas.msg);
                    }
                })
            },
            //现登录接口---不带token
            toNewLogin(name, pass) {
                let that = this
                let params = {
                    username: name,
                    password: pass
                }
                apiProjectLogin(params).then(datas => {
                    if (datas && datas.code === 0) {
                        setToken(datas.data.accessToken)
                        that.$router.push({
                            // path: "/home"
                            path: "/generatingCap/dataFilter/prepare"
                        })
                    } else {
                        ElMessage.error(datas.msg);
                    }
                })
            }
        }
    }
</script>


<style lang="less">
    @media screen and (max-width: 1200px) {
        .loginPic {
            .login_left {
                display: none;
            }
        }
    }

    .loginPic {
        // position: relative;
        // width: 100%;
        // height: 1080px;
        height: 100vh;
        background-image: url('../../assets/windFramPicture/background1.jpg');
        // background-position: 0 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;

        .login_left {
            position: fixed;
            left: 15%;
            top: 35%;

            p {
                margin-bottom: 0px;
                color: #fff;
                margin-top: 10px;
            }

            .titleW {
                font-size: 33px;
            }

            .title {
                font-size: 33px;
                letter-spacing: 5px;
            }

            .titleEn {
                font-size: 17px;
                letter-spacing: 1px;
            }
        }

        .login_right {
            width: 350px;
            height: 400px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.2);
            position: fixed;
            right: 15%;
            top: 25%;

            .loginTit {
                font-size: 18px;
                text-align: center;
                color: #fff;
                margin: 30px 0;
            }

            .loginUser {
                margin: 0 30px 30px 30px;
                border-bottom: 1px solid #fff;
                display: flex;

                .el-icon {
                    font-size: 26px;
                    color: #fff;
                }

                .el-input {
                    border: 0 solid transparent;

                    .el-input__wrapper {
                        background: transparent;
                        box-shadow: none;

                        .el-input__inner,
                        .el-input__inner:focus {
                            background: none;
                            border: none !important;
                            color: #fff;
                            height: 30px;
                            width: 100%;
                            font-size: 14px;
                        }
                    }
                }
            }

            .loginMima {
                margin: 0 30px 30px 30px;
                border-bottom: 1px solid #fff;

                .el-input {
                    .el-input__wrapper {
                        background: transparent;
                        box-shadow: none;
                    }

                    .el-input__inner {
                        background: none;
                        border: none;
                        color: #fff;
                        height: 30px;
                        width: 100%;
                    }

                    .el-input-group__prepend {
                        background: transparent;
                        box-shadow: none;
                        width: 28px;
                        padding: 0;

                        .icon-mima {
                            width: 28px;
                            height: 28px;
                            display: inline-block;
                            background-image: url(../../assets/iconNeed/iconFont.png);
                            background-position: -44px -70px;
                            position: absolute;
                            left: -10px;
                        }
                    }
                }
            }

            .loginYanzhengma {
                display: flex;
                margin: 0 30px 0 30px;
                border-bottom: 1px solid #fff;

                .login-code {
                    width: 100px;
                    height: 40px;

                    .login-code-img {
                        width: 100px;
                    }
                }

                .el-input {
                    .el-input__wrapper {
                        background: transparent;
                        box-shadow: none;
                    }

                    .el-input__inner {
                        background: none;
                        border: none;
                        color: #fff;
                        height: 30px;
                        width: 100%;
                    }

                    .el-input-group__prepend {
                        background: transparent;
                        box-shadow: none;
                        width: 28px;
                        padding: 0;

                        .icon-yanzhengma {
                            width: 27px;
                            height: 24px;
                            display: inline-block;
                            background-image: url(../../assets/iconNeed/iconFont.png);
                            background-position: -74px -70px;
                            position: absolute;
                            left: -10px;
                        }
                    }
                }
            }

            .remeber {
                margin: 10px 0 0 30px;

                .el-checkbox {
                    .el-checkbox__label {
                        color: #fff;
                        font-size: 12px;
                        padding-left: 6px;
                    }
                }
            }

            .loginBtn {
                position: absolute;
                left: 30px;
                bottom: 35px;
                width: 294px;
                height: 34px;
                background-image: linear-gradient(to right, #5a91f6, #6656ff);
                border: none;
                color: #fff;
            }

            input::-webkit-input-placeholder {
                /*WebKit browsers*/
                color: #fff;
            }

            input::-moz-input-placeholder {
                /*Mozilla Firefox*/
                color: #fff;
            }

            input::-ms-input-placeholder {
                /*Internet Explorer*/
                color: #fff;
            }
        }

        .loginFooter {
            height: 40px;
            line-height: 40px;
            position: fixed;
            bottom: 0;
            width: 100%;
            text-align: center;
            color: #fff;
            font-family: Arial;
            font-size: 12px;
            letter-spacing: 1px;
        }
    }
</style>