<script setup>
import {ref} from 'vue'
import { showToast } from 'vant';
import {apiLogin,_apiLogin} from '@/api/user'
import md5 from 'js-md5'
import {Base64} from 'js-base64'
import { useRouter } from 'vue-router';
import MobileModel from './login/MobileModel.vue';
import OrdinaryModel from './login/OrdinaryModel.vue';
import EmailModel from './login/EmailModel.vue';
import ForgetPassModel from './login/ForgetPassModel.vue';

import logoImg from '@/assets/imgs/logo_icon.png'

const router=useRouter()

//登陆模式 ordinaryModel账号密码 mobileModel手机号 emailModel邮箱
let activeModel = ref('ordinaryModel')
let autoAccount = ref('')
function changeModel(model){
    if(model==='forgetPassModel'){
        autoAccount.value = loginForm.value.getValues().username
    }
    activeModel.value = model
}

const onSubmit = (values) => {
    const params={
        Username:values.username,
        Password:md5(values.password),
        IsRemember:true
    }
    apiLogin(params).then(res=>{
        if(res.Ret===200){
            localStorage.setItem('token',res.Data.Authorization)
            localStorage.setItem('account',Base64.encode(values.username))
            localStorage.setItem('checkPass',Base64.encode(values.password))
            const userInfo={
                AdminName:res.Data.AdminName,
                Authority:res.Data.Authority,
                ProductName:res.Data.ProductName,
                RealName:res.Data.RealName,
                RoleName:res.Data.RoleName,
                RoleTypeCode:res.Data.RoleTypeCode,
                SysRoleTypeCode:res.Data.SysRoleTypeCode,
                AdminId:res.Data.AdminId,
                DepartmentName:res.Data.DepartmentName
            }
            localStorage.setItem('userInfo',Base64.encode(JSON.stringify(userInfo)))
            router.replace('/')
        }
    })
};


let loginForm = ref(null)
let mobileModel = ref(null)
let emailModel = ref(null)
const onSubmit2 = ()=>{
    //根据activeModel验证值
    const values = loginForm.value.getValues()
    if(activeModel.value==='ordinaryModel'){
        loginForm.value.validate(['username','password']).then(async ()=>{
            const t=new Date().getTime()
            const md5Key='MiQM9yusNA9T2uIH'
            // 校验是否为域用户登录
            let isLdap=false
            const checkRes=await _apiLogin.checkUserIsLdap({UserName:values.username})
            if(checkRes.Ret===200&&checkRes.Data) isLdap=true
            userLogin({
                LoginType:1,
                Username:values.username,
                Password:isLdap?Base64.encode(values.password+md5Key): md5(md5(values.password)+md5Key+t),
                ReqTime:`${t}`
            },values)
        }).catch((error)=>{
            console.log('error',error)
        })
    }

    if(activeModel.value==='mobileModel'){
        loginForm.value.validate(['mobile','mobileCode']).then(()=>{
            userLogin({
                LoginType:2,
                Mobile:values.mobile,
                TelAreaCode:mobileModel.value.mobileTelAreaCode,
                VerifyCode:values.mobileCode
            })
        }).catch((error)=>{
            console.log('error',error)
        })
    }
    
    if(activeModel.value==='emailModel'){
        loginForm.value.validate(['email','emailCode']).then(()=>{
            userLogin({
                LoginType:3,
                Email:values.email,
                VerifyCode:values.emailCode
            })
        }).catch((error)=>{
            console.log('error',error)
        })
    }
}
function userLogin(params,values){
    _apiLogin.apiUserLogin(params).then(res=>{
        //账号异常，提醒用户用其他方式登陆
        if(res.Ret===4011){
            showToast('您的账号异常，请使用其他方式登陆')
            return
        }
        //账号或密码错误，弹窗提示就行,因为PC端有特殊提示要求所以单独设置了状态码
        if(res.Ret===4012){
            showToast('账号或密码错误，请检查')
            return
        }
        if(res.Ret!==200){
            activeModel.value!=='ordinaryModel'&&[activeModel].value.getCodePic()
            return
        }

        localStorage.setItem('token',res.Data.Authorization)
        activeModel.value==='ordinaryModel'&&localStorage.setItem('account',Base64.encode(values.username))
        activeModel.value==='ordinaryModel'&&localStorage.setItem('checkPass',Base64.encode(values.password))
        const userInfo={
            AdminName:res.Data.AdminName,
            Authority:res.Data.Authority,
            ProductName:res.Data.ProductName,
            RealName:res.Data.RealName,
            RoleName:res.Data.RoleName,
            RoleTypeCode:res.Data.RoleTypeCode,
            SysRoleTypeCode:res.Data.SysRoleTypeCode,
            AdminId:res.Data.AdminId,
            DepartmentName:res.Data.DepartmentName,
            GroupName:res.Data.GroupName,
        }
        localStorage.setItem('userInfo',Base64.encode(JSON.stringify(userInfo)))
        router.replace('/')
    })
}

let recordInformation=ref([])

// function getRecordInfo(){
//     _apiLogin.getICPgetBaseInfoLicense().then(res=>{
//         if(res.Ret == 200){
//             // 两个空格以上截一段
//             recordInformation.value = res.Data.ConfVal.split(/\s{2,}/)
//         }
//     })

// }
const logo=ref('')
function getBaseInfo(){
    _apiLogin.getBaseInfo().then(res=>{
        if(res.Ret == 200){
            logo.value=res.Data.LogoMobile?res.Data.LogoMobile.ConfVal:''
            // 备案信息两个空格以上截一段 
            recordInformation.value = res.Data.Icp?res.Data.Icp.ConfVal.split(/\s{2,}/):''

        }
    })
}

// getRecordInfo();//获取备案信息
getBaseInfo()//获取基础信息

</script>

<template>
    <div>
        <div class="login-page">
            <van-form class="form-box" ref="loginForm" v-if="activeModel!=='forgetPassModel'">
                <div class="logo-wrap">
                    <img class="logo" :src="logo || logoImg" alt="">
                    <div class="title">Bind on account,</div>
                    <div class="sub-title">sign in to continue</div>
                </div>
                <div class="ordinaryModel" v-show="activeModel==='ordinaryModel'">
                    <ordinary-model :activeModel="activeModel" @change-model="changeModel('forgetPassModel')"/>
                </div>
                <div class="mobileModel" v-show="activeModel==='mobileModel'">
                    <mobile-model ref="mobileModel"
                        :activeModel="activeModel"/>
                </div>
                <div class="emailModel" v-show="activeModel==='emailModel'">
                    <email-model ref="emailModel"
                        :activeModel="activeModel"/>
                </div>
                <div class="btn-box">
                    <van-button 
                        round 
                        block 
                        type="primary" 
                        @click="onSubmit2"
                    >登录</van-button>
                </div>
                <!-- 选择其他登陆方法 -->
                <div class="model-icon-box">
                    <div class="model-item" 
                        @click="changeModel('ordinaryModel')"
                        v-show="activeModel!=='ordinaryModel'">
                        <div class="model-item-icon">
                            <img src="@/assets/imgs/login/account-icon.png"/>
                        </div>
                    </div>
                    <div class="model-item" 
                        @click="changeModel('mobileModel')"
                        v-show="activeModel!=='mobileModel'">
                        <div class="model-item-icon">
                            <img src="@/assets/imgs/login/phone-icon.png"/>
                        </div>
                        
                    </div>
                    <div class="model-item" 
                        @click="changeModel('emailModel')"
                        v-show="activeModel!=='emailModel'">
                        <div class="model-item-icon">
                            <img src="@/assets/imgs/login/email-icon.png"/>
                        </div>
                    </div>
                </div>
            </van-form>
            <div class="form-box" v-else>
                <forget-pass-model ref="forgetPassModel"
                    :autoAccount="autoAccount"
                    @change-model="changeModel('ordinaryModel')"/>
            </div>
            <img class="pad-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/login_img.png" alt="">
        </div>

        <!-- <div class="mobile-bot-text">Long time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;More profit</div> -->
        <div class="record-info">
            <a v-for="(item,index) in recordInformation" :key="index" target="_blank"
            href="https://beian.miit.gov.cn/#/Integrated/index">{{ item }}</a>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.login-page{
    padding: 220px 80px 0;
    min-height: calc(100vh - 52PX);
}
.logo-wrap{
    // margin-top: 220px;
    margin-bottom: 180px;
    .logo{
        width: 225px;
    }
    .title{
        font-size: 58px;
        margin-top: 41px;
        margin-bottom: 30px;
        font-weight: bold;
    }
    .sub-title{
        color: #999;
    }
    
}

.model-icon-box{
    margin-top: 100px;
    display: flex;
    width: 100%;
    justify-content: center;
    gap:120px;
    .model-item-icon{
        width:80px;
        height:80px;
        border-radius: 50%;
        box-shadow: 0px 2px 12px 0px #0000001A;
        box-sizing: border-box;
        padding:16px;
        img{
            width:100%;
        }
    }
}
// .mobile-bot-text{
//     margin-top: 200px;
//     text-align: center;
//     color: #999;
// }
.pad-img{
    display: none;
}
.record-info{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 16PX 0;
    width: 100%;
    a{
        font-size: 13PX;
        color: #C0C4CC;
        text-align: center;
        margin: 0 6PX;
    }
}

@media screen and (min-width:$media-width) {
    .login-page{
        margin-top: auto;
        padding: 30px;
        display: flex;
        justify-content: space-between;
        // align-items: center;
        .form-box{
            flex-shrink: 0;
            width: 47%;
            max-width: 400px;
        }
        .logo-wrap{
            margin-top: 0;
            margin-bottom: 40px;
            .logo{
                width: 160px;
            }
            .title{
                font-size: 32px;
                margin-top: 41px;
                margin-bottom: 20px;
                font-weight: bold;
            }
            .sub-title{
                color: #999;
            }
            
        }

        .pad-img{
            display: block;
            width: 48%;
            height: 80vh;
            max-height: 500px;
            border-radius: 40px;
            object-fit: cover;
        }
    }

    // .mobile-bot-text{
    //     display: none;
    // }
    .model-icon-box{
        margin-top: 50px;
        display: flex;
        width: 100%;
        justify-content: center;
        gap:60px;
        .model-item-icon{
            width:40px;
            height:40px;
            border-radius: 50%;
            box-shadow: 0px 2px 12px 0px #0000001A;
            box-sizing: border-box;
            padding:6px;
            img{
                width:100%;
            }
        }
    }
    .record-info{
        font-size: 15PX;
    }
}
</style>