<template>
    <div class="PCandMobeilLogin" v-if="isSinglePoint === 'noSinglePoint'">
        <div class="loginPic" v-if="isMobile === 'PC'">
            <div class="login_right">
                <img class="titleIcon" src="../assets/loginImage/logo.png" alt="">
                <div class="loginCom" style="margin-bottom: 30px">
                    <img class="userIcon" src="../assets/loginImage/userIcon.png" alt="">
                    <el-input v-model="inputUser" placeholder="请输入用户名" />
                </div>
                <div class="loginCom" style="margin-bottom: 16px">
                    <img class="passwordIcon" src="../assets/loginImage/passwordIcon.png" alt="">
                    <el-input type="password" v-model="inputMima" placeholder="请输入密码" />
                </div>
                <div class="remeber">
                    <el-checkbox v-model="ememberMe" @change="changeBox">记住密码</el-checkbox>
                </div>
                <!-- v-if="!loginLoading"  v-else -->
                <div class="loginBtn" @click="handleLogin" v-if="!loginLoading">
                    <span class="loginSpan">登录</span>
                </div>
                <div class="loginBtn" v-else>
                    <div class="loading">
                        <el-icon color="#fff"><Loading /></el-icon>
                        <span class="loadingSpan">登录</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="loginMobeil" v-else>
            <div class="login_mobeilMain">
                <img class="titleIcon" src="../assets/loginImage/logo.png" alt="">
                <div class="loginCom" style="margin-bottom: 30px">
                    <img class="userIcon" src="../assets/loginImage/userIcon.png" alt="">
                    <el-input v-model="inputUser" placeholder="请输入用户名" />
                </div>
                <div class="loginCom" style="margin-bottom: 16px">
                    <img class="passwordIcon" src="../assets/loginImage/passwordIcon.png" alt="">
                    <el-input type="password" v-model="inputMima" placeholder="请输入密码" />
                </div>
                <div class="remeber">
                    <el-checkbox v-model="ememberMe" @change="changeBox">记住密码</el-checkbox>
                </div>
                <!-- v-if="!loginLoading"  v-else -->
                <div class="loginMobeilBtn" @click="handleLogin" v-if="!loginLoading">
                    <span class="loginSpan">登录</span>
                </div>
                <div class="loginMobeilBtn" v-else>
                    <div class="loading">
                        <el-icon color="#fff"><Loading /></el-icon>
                        <span class="loadingSpan">登录</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-else v-loading="loading" style="height: 100vh"></div>
</template>

<script>
import { ElMessage } from "element-plus";
import JSEncrypt from 'jsencrypt'
import { loginApi, apiGetCodeByToken, apiGetUserMsg, apiGetPrivilegesOfCurrentUserAll, apigetPublicKey } from '../api/api'
export default {
    data() {
        return {
            inputUser:'',
            // inputUser:'testrsadmin',Gddl!#%135
            inputMima:'',
            codeUrl:'',
            ememberMe:false,
            loading:false,
            loginText: '',
            loginLoading: false,
            isMobile: window.localStorage.getItem('isMobile'),
            isSinglePoint: window.localStorage.getItem('singlePoint'),
            loading: true,
            vantActive: 0
        }
    },
    created() {
        if (this.$route?.query?.iamCode && this.$route?.query?.iamAccessToken) {
            console.log('有iamCode===>>>', this.$route )
            window.localStorage.setItem('token', this.$route.query.iamAccessToken)
            window.localStorage.setItem('code', this.$route.query.iamCode)
            window.localStorage.setItem('singlePoint', 'singlePoint')
            // this.$router.push({ path: "/home"})
            this.getUserMsg(this.$route.query.iamCode)
        } else {
            console.log('没有iamCode===>>>', this.$route)
            window.localStorage.setItem('singlePoint', 'noSinglePoint')
            if (window.localStorage.getItem('userData')) {
                let userData = JSON.parse(window.localStorage.getItem('userData'))
                this.inputUser = userData.user
                this.inputMima = userData.password
                this.ememberMe = true
            } else {
                this.ememberMe = false
            }
        }
    },
    methods:{
        handleLogin() {
            if (this.inputUser !== '' && this.inputMima !== '') {
                this.loginLoading = true
                if (this.ememberMe) {
                    this.changeBox(this.ememberMe)
                }
                this.getLogin(this.inputUser, this.inputMima)
            } else {
                ElMessage.error('请输入账号或密码');
            }
        },
        changeBox(val) {
            if (val) {
                if (this.inputUser !== '' && this.inputMima !== '') {
                    let obj = {
                        user: this.inputUser,
                        password: this.inputMima
                    }
                    window.localStorage.setItem('userData', JSON.stringify(obj))
                }
            } else {
                window.localStorage.removeItem('userData')
            }
        },
        //登录接口
        getLogin(userName, password) {
            // setToken('userMsg', params)
            let that = this
            apigetPublicKey().then(request =>{
                if (request && request.data) {
                    let publicKeyStr = request.data
                    const jsRsa = new JSEncrypt()
                    jsRsa.setPublicKey(publicKeyStr)
                    let passwordRsa = jsRsa.encrypt(password)
                    loginApi(userName, passwordRsa).then(datas=>{
                        if (datas) {
                            if (datas.success) {
                                // setToken('token', datas.data.access_token)
                                window.localStorage.setItem('token', datas.data.access_token)
                                that.getTokenCode(datas.data.access_token)
                            } else {
                                ElMessage.error(datas.message);
                                that.loginLoading = false
                            }
                        }
                    }).catch(e =>{
                        that.loading = false
                        that.loginLoading = false
                    })
                }
            })
        },
        // 根据token获取code
        getTokenCode(val) {
            let that = this
            apiGetCodeByToken(val).then(datas =>{
                if (datas && datas.data) {
                    // setToken('code', datas.data)
                    window.localStorage.setItem('code', datas.data)
                    that.getUserMsg(datas.data)
                }
            })
        },
        getUserMsg(val) {
            let that = this
            apiGetUserMsg(val).then(datas =>{
                if (datas && datas.data) {
                    // setToken('user', JSON.stringify(datas.data))
                    let obj = {
                        unitId: datas.data.unitId,
                        unitName: datas.data.unitName,
                        deptId: datas.data.deptId,
                        deptName: datas.data.deptName,
                        name: datas.data.name,
                        id: datas.data.id
                    }
                    window.sessionStorage.setItem('user', JSON.stringify(obj))
                    that.getApprverData()
                }
            })
        },
        getApprverData() {
            let that = this
            apiGetPrivilegesOfCurrentUserAll().then(datas =>{
                if (datas && datas.data) {
                    // setToken('purview', JSON.stringify(datas.data.data))
                    window.localStorage.setItem('purview', JSON.stringify(datas.data.data))
                    if (that.isMobile === 'PC') {
                        that.$router.push({ path: "/home"})
                    } else {
                        that.$router.push({ path: "/mobeil"})
                    }
                }
            })
        }
    }
}
</script>


<style lang="scss">
@media screen and (max-width: 1200px) {
    .loginPic{
        .login_left {
            display: none;
        }
    }
}
.PCandMobeilLogin{
    .loginPic{
        position: relative;
        width: 100%;
        height:100vh;
        background-image: url('../assets/loginImage/logindefBak.png');
        background-position: 0 0;
        background-repeat: no-repeat;
        display: flex;
        .login_left{
            position: fixed;
            left: 15%;
            top: 35%;
            p{
                margin-bottom: 0px;
                font-size: 32px;
                color: #fff;
                margin-top: 10px;
            }
            .title{
                letter-spacing: 5px;
            }
        }
        .login_right{
            width: 470px;
            height:680px;
            background: rgba(0,0,0,0.4);
            position: fixed;
            right: 15%;
            top: 15%;
            .titleIcon{
                margin: 100px 0px 43px 95px;
            }
            .loginCom{
                margin: 0 30px 0px 43px;
                width: 384px;
                height: 56px;
                background: #1B1A1F;
                border-radius: 5px;
                display: flex;     
                .userIcon {
                    width: 24px;
                    height: 24px;
                    margin: 16px;
                }   
                .passwordIcon {
                    width: 24px;
                    height: 24px;
                    margin: 16px;
                }
                .el-input{
                    border: 0 solid transparent;
                    .el-input__wrapper{
                        background: transparent;
                        box-shadow: none;
                        .el-input__inner, .el-input__inner:focus{
                            background-color: transparent;
                            border: none !important;
                            color: #fff;
                            height: 30px;
                            width: 100%;
                            font-size: 14px;
                        }
                    }
                }
            }
            .remeber{
                margin: 0 0 0 50px;
                .el-checkbox{
                    .el-checkbox__label{
                        color: #fff;
                        font-size: 12px;
                        padding-left:6px;
                    }
                }
            }
            .loginBtn{
                margin: 48px 0 0 43px;
                width: 384px;
                height: 56px;
                background-image: url('../assets/loginImage/loginBtn.png');
                cursor: pointer;
                .loginSpan{
                    position: relative;
                    top: 27%;
                    left: 45%;
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #FFFFFF;
                }
                .loading{
                    display: flex;
                    justify-content: center;
                    padding-top: 13px;
                    .loadingSpan{
                        position: relative;
                        top: 2px;
                        left: -9px;
                        font-size: 18px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                    .el-icon{
                        position: relative;
                        top: 7px;
                        left: -12px;
                    }
                }
            }
            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;
        }
    }
    .loginMobeil{
        position: relative;
        width: 100%;
        height:100%;
        background-image: url('../assets/loginImage/logindefBak.png');
        background-position: 0 0;
        background-repeat: no-repeat;
        overflow: hidden;
        .login_mobeilMain{
            width: 470px;
            height:680px;
            // background: rgba(0,0,0,0.4);
            position: relative;
            right: 5%;
            // top: 15%;
            .titleIcon{
                margin: 100px 0px 43px 75px;
            }
            .loginCom{
                margin: 0 30px 0px 43px;
                width: 350px;
                height: 56px;
                background: #1B1A1F;
                border-radius: 5px;
                display: flex;     
                .userIcon {
                    width: 24px;
                    height: 24px;
                    margin: 16px;
                }   
                .passwordIcon {
                    width: 24px;
                    height: 24px;
                    margin: 16px;
                }
                .el-input{
                    border: 0 solid transparent;
                    .el-input__wrapper{
                        background: transparent;
                        box-shadow: none;
                        .el-input__inner, .el-input__inner:focus{
                            background-color: transparent;
                            border: none !important;
                            color: #fff;
                            height: 30px;
                            width: 100%;
                            font-size: 14px;
                        }
                    }
                }
            }
            .remeber{
                margin: 0 0 0 50px;
                .el-checkbox{
                    .el-checkbox__label{
                        color: #fff;
                        font-size: 12px;
                        padding-left:6px;
                    }
                }
            }
            .loginMobeilBtn{
                margin: 48px 0 0 43px;
                width: 350px;
                height: 56px;
                // background-image: url('../assets/loginImage/loginBtn.png');
                background: linear-gradient(#1e5adf, #1746d3);
                border-radius: 5px;
                cursor: pointer;
                .loginSpan{
                    position: relative;
                    top: 27%;
                    left: 45%;
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #FFFFFF;
                }
                .loading{
                    display: flex;
                    justify-content: center;
                    padding-top: 13px;
                    .loadingSpan{
                        position: relative;
                        top: 2px;
                        left: -9px;
                        font-size: 18px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                    .el-icon{
                        position: relative;
                        top: 7px;
                        left: -12px;
                    }
                }
            }
            input::-webkit-input-placeholder{ /*WebKit browsers*/
                color: #fff;
            }
            input::-moz-input-placeholder{ /*Mozilla Firefox*/
                color: #fff;
            }
            input::-ms-input-placeholder{ /*Internet Explorer*/
                color: #fff;
            }
        }
    }
}
</style>