<template>
    <div class="login-box q-pa-xl row">
        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pptTD.png" class="logo"  />
        <div class="col column">
            <div class="col column flex-center items-center">
                <div class="wel">
                    <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1711705161000_818.png" />
                    <h1 style="font-size: 32px;" class="text-dark q-my-lg">快速，智能，美观</h1>
                    <div class="text-info text-small" style="font-size: 13px;">这里有上百种行程设计模板供你选择</div>
                    <div class="text-info text-small q-my-md" style="font-size: 13px;">我们为你提供了大量的插件，支持快速实现自己想要的行程</div>
                    <div class="text-info text-small" style="font-size: 13px;">AI助手的辅助让你报价与设计快人一步</div>
                </div>
            </div>
            <div class="text-center text-small text-info full-width">@2012-2024 成都微途科技有限公司 版权所有 <a class="q-pl-md" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
        style="color: rgb(155, 153, 188);text-decoration: none;">蜀ICP备13024891号-9</a></div>
        </div>
        <div class="login-form q-pa-xl column flex-center items-center" style="padding: 30px 0;" v-if="token==''">
            <div class="login-formCenter">
                <div class="q-mb-xl  full-width" v-if="inviteInfo">
                    <div class="q-mt-lg no-select row items-center q-pa-lg rounded" style="background-color:  rgb(240, 246, 255);">
                        <el-avatar :size="44" :src="inviteInfo.logo" shape="square"></el-avatar>
                        <div class="q-ml-md col flex-overflow">
                            <div class="text-dark text-weight-bold text-ellipsis"> {{ inviteInfo.nickname }}邀请你加入{{ inviteInfo.company }}{{ inviteInfo.nickname }}邀请你加入{{ inviteInfo.company }}</div>
                            <div class="text-grey-8 text-small q-mt-sm">{{ inviteInfo.expire }}后失效</div>
                        </div>
                        <el-button type="info" class="ppt-button q-ml-md" @click="cancelInviteHandler">取消</el-button>
                    </div>
                </div>
                <div class="row flex-end">
                    <div class="gdwc-togger-sign hydrated" @click="loadingType">
                        <div class="gdwc-togger-sign-tip">
                            <svg width="113" height="32" viewBox="0 0 113 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M4 0C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H104C106.209 32 108 30.2091 108 28V23.4482C108 22.5125 108.328 21.6063 108.927 20.8875L111.933 17.2804C112.551 16.5387 112.551 15.4613 111.933 14.7196L108.927 11.1125C108.328 10.3937 108 9.48755 108 8.5518V4C108 1.79086 106.209 0 104 0H4Z" fill="#F0F6FF"></path>
                            </svg>
                            <span class="gdwc-togger-sign-tip-text PingFangSC">
                                {{currentLogin==2?'账号/邮箱':'微信扫码'}}登录
                            </span>
                        </div>
                        <div class="gdwc-togger-sign-btn">
                            <span>
                                <svg v-if="currentLogin==2" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M33 6.41675H11C10.4937 6.41675 10.0833 6.82715 10.0833 7.33342V36.6667C10.0833 37.173 10.4937 37.5834 11 37.5834H33C33.5063 37.5834 33.9167 37.173 33.9167 36.6667V7.33341C33.9167 6.82715 33.5063 6.41675 33 6.41675ZM11 3.66675C8.97496 3.66675 7.33334 5.30837 7.33334 7.33342V36.6667C7.33334 38.6918 8.97496 40.3334 11 40.3334H33C35.025 40.3334 36.6667 38.6918 36.6667 36.6667V7.33341C36.6667 5.30837 35.025 3.66675 33 3.66675H11Z" fill="#564bec"></path>
                                    <path d="M12.8333 9.16675H31.1667V28.4167H12.8333V9.16675Z" fill="#564bec"></path>
                                    <path d="M24.2917 32.9999C24.2917 34.2656 23.2657 35.2916 22 35.2916C20.7343 35.2916 19.7083 34.2656 19.7083 32.9999C19.7083 31.7343 20.7343 30.7083 22 30.7083C23.2657 30.7083 24.2917 31.7343 24.2917 32.9999Z" fill="#564bec"></path>
                                </svg>
                                <svg v-else width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.1902 3.23803H3.23803V16.1902H16.1902V3.23803ZM0 0V19.4282H19.4282V0H0Z" fill="#564bec"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M30.762 3.23803H25.4688V8.30874H30.762V3.23803ZM22.2308 0V11.5468H34V0H22.2308Z" fill="#564bec"></path>
                                    <path d="M22.2308 17.9629H26.1538V23.7363H22.2308V17.9629Z" fill="#564bec"></path>
                                    <path d="M26.1538 21.811H30.0769V25.66H26.1538V21.811Z" fill="#564bec"></path>
                                    <path d="M22.2308 25.6592H26.1538V29.5081H22.2308V25.6592Z" fill="#564bec"></path>
                                    <path d="M30.077 25.6592H34V29.5081H30.077V25.6592Z" fill="#564bec"></path>
                                    <path d="M30.077 17.9629H34V23.7363H30.077V17.9629Z" fill="#564bec"></path>
                                    <path d="M4.85705 4.85693H14.5711V14.571H4.85705V4.85693Z" fill="#564bec"></path>
                                    <path d="M22.2308 13.4707H26.1538V16.0367H22.2308V13.4707Z" fill="#564bec"></path>
                                    <path d="M30.077 13.4707H34V16.0367H30.077V13.4707Z" fill="#564bec"></path>
                                    <path d="M22.2308 31.4331H34V33.9991H22.2308V31.4331Z" fill="#564bec"></path>
                                    </svg>
                            </span>
                        </div>
                    </div>
                </div>
                <div style="font-size: 20px; margin-top: 40px;font-weight: 600;" class="text-dark text-center PingFangSC">
                    <span style="color: #564becCC">{{currentLogin==1?'账号/邮箱密码':'微信扫码一键'}}</span>
                    <span>登录</span>
                </div>
                <div class="text-info text-small text-center q-pt-xs">你的创作空间</div>
                <template v-if="!multipleUsers || multipleUsers.length==0">
                    <div class="q-mb-md" style="padding: 0 50px;">
                        <passwordLogin v-if="currentLogin==1" @submitForm="(multUser)=> multipleUsers=multUser"></passwordLogin>
                        <wechatLogin v-if="currentLogin==2"></wechatLogin>
                        <div class="q-pt-lg">
                            <el-divider class="q-pb-md"> <span class="fz12 PingFangSC" style="color:#7f8792">其他方式登录</span></el-divider>
                        </div>
                        <div class="otherLoading PingFangSC q-pb-lg">
                            <div v-if="currentLogin!=1" class="row flex-center items-center otherLoading-centwr cursor-pointer"
                            @click="currentLogin=1">
                                <el-icon class="" size="14px" title="">
                                    <IconMail theme="multi-color"
                                :fill="['#9DA3AC' ,'#9DA3AC' ,'#FFF' ,'#9DA3AC']"/>
                                </el-icon>
                                <span class="fz12 q-pl-sm" style="color: #9DA3AC;">账号/邮箱登录</span>
                            </div>
                            <div v-if="currentLogin!=2" class="row flex-center items-center otherLoading-centwr cursor-pointer"
                            @click="currentLogin=2">
                                <el-icon class="" size="14px" title="">
                                    <IconWechat theme="multi-color"
                                :fill="['#9DA3AC' ,'#9DA3AC' ,'#FFF' ,'#9DA3AC']"/>
                                </el-icon>
                                <span class="fz12 q-pl-sm" style="color: #9DA3AC;">微信登录</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row items-center fz12 ServAgrelLoad PingFangSC q-pt-md">
                        <div class="ServAgrelLoadL q-pr-lg">
                            您登录即同意<strong><a>用户服务协议、</a></strong>
                            <strong><a>隐私政策</a></strong>和
                            <strong><a>授权许可协议</a></strong>，如您成为稿定设计会员，成为会员即视为同意
                            <strong><a>会员服务协议</a></strong>
                        </div>
                        <div class="ServAgrelLoadR q-pl-lg cursor-pointer" @click="redicetToRegist">邮箱注册</div>
                    </div>
                </template>
                <template v-if="multipleUsers && multipleUsers.length>0">
                    <el-divider> <span class="text-info">选择你需要登录的组织</span> </el-divider>
                    <div v-for="x in multipleUsers" :key="x.tid" @click="()=>model.tid=x.tid" class="light-shadow q-pa-md row items-center full-width rounded q-mt-xl cursor-pointer q-mb-md transparent-borders" :class="{'primary-borders-thin':model.tid==x.tid}">
                        <el-avatar :size="30" :src="x.logo"></el-avatar>
                        <div class="q-ml-lg">
                            <div class="text-weight-bold" style="font-size: 20px;">{{ x.nickname }}</div>
                            <div class="text-info text-small">{{ x.tenantname }}</div>
                        </div>
                    </div>
                    <el-button type="primary" size="large" class="full-width q-mt-lg" @click="loginByCompany" :loading="loading" :disabled="model.tid==''">登录</el-button>
                    <div class="text-center q-mt-lg">
                        <el-button link type="primary" class="q-mb-lg" @click="clearCompanyChoosenHandler">重新登录</el-button>
                    </div>
                </template>
            </div>
        </div>
        <div class="login-form q-pa-xl column flex-center items-center" style="padding: 30px 100px;" v-else>
            <div style="font-size: 36px; " class="text-dark">已登录</div>
            <div class="text-info text-small">你的创作空间</div>
            <div class="q-py-xl flex-center items-center column">
                <el-avatar :size="100" shape="square" class="bg-transparent"  :src="userInfo.photo"></el-avatar>
                <div class="row items-center flex-center q-mt-md ">
                    <div class="text-weight-bold" style="font-size: 18px;">{{ userInfo.nickname }}</div>
                    <el-tag type="primary" class="q-ml-md" v-if="userInfo.it">企业专业版</el-tag>
                    <el-tag type="warning" class="q-ml-md" v-else-if="userInfo.iv">个人专业版</el-tag>
                    <el-tag type="info" class="q-ml-md" v-else>个人免费版</el-tag>
                </div>
                <div class="q-mt-md text-small text-info">{{ userInfo.company }}</div>
                <div class="q-mt-lg row items-center">
                    <el-button @click="loginOutHandler">退出登录</el-button>
                    <el-button class="q-ml-md" type="primary" @click="forwardWorkspaceHandler">进入工作台</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ApiResult } from '@/configs/axios';
import UserServices from '@/services/UserService';
import { useUserStore } from '@/store/user';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue';
import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";
import passwordLogin from "./components/passwordLogin";
import wechatLogin from "./components/wechatLogin";
import verifyLogin from "./components/verifyLogin"

interface RuleForm {
  account: string
  password: string
}
const model = ref<{account:string,password:string,tid:string}>({
    account:'',
    password:'',
    tid:''
})
const loginFormRef = ref<FormInstance>()
const loading = ref(false)
const user = useUserStore()
const token = user.getUserToken??''
const userInfo = user.getUser
const multipleUsers = ref<any[]>([])
const inviteInfo = ref<any>()
const needVerify = ref(false)
const validateToken = ref('')
const invisibleHcaptcha = ref()

if(localStorage.getItem("invite")){
    inviteInfo.value = JSON.parse(localStorage.getItem("invite")??'{}')
}
const rules = reactive<FormRules<RuleForm>>({
    account: [
        { required: true, message: '请输入你的账号/邮箱', trigger: 'blur' },
        { min: 6, message: '请输入正确的账号', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入你的密码', trigger: 'blur' },
        { min: 6,max:20, message: '请输入正确的密码', trigger: 'blur' },
    ]
})

const LoginType = reactive([
    {Name:'密码登录',Id:1},
    {Name:'验证码登录',Id:2},
    {Name:'微信登录',Id:3},

])
const currentLogin = ref(1)

const loadingType = () =>{
    if(currentLogin.value==1) currentLogin.value = 2
    else currentLogin.value = 1
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl || loading.value || (needVerify.value && validateToken.value=='')) return
  loading.value=true
  await formEl.validate(async (valid) => {
    if (valid) {
      await userLoginHandler()
    }
    loading.value=false
  })
  
}
const cancelInviteHandler = ()=>{
    inviteInfo.value = null
    localStorage.removeItem('invite')
}
const loginByCompany = async ()=>{
    if(model.value.tid=='') ElMessage.error({message:'请选择需要登录的组织'})
    else {
        loading.value=true
        validateToken.value=''
        await userLoginHandler()
        loading.value=false
    }
}
const verifyHandler = (token:string,ekey:string)=>{
    validateToken.value = token
}
const userLoginHandler = async ()=>{
    const result = await user.setUserPasswordLoginAsync(model.value.account,model.value.password,validateToken.value,model.value.tid)
    if(result.status=='SUCCESS'){
        ElMessage.success({message:'登录成功'})
        if(inviteInfo.value){
            localStorage.removeItem('invite')
            localStorage.setItem('sure_invite',JSON.stringify(inviteInfo.value))
        }
        location.href='/space';
    }else if(result.status=='CHOSEN' && Array.isArray(result.data)){
        multipleUsers.value = result.data
    }else{
        if(!needVerify.value) needVerify.value = result.verify
        if(invisibleHcaptcha.value && needVerify.value) invisibleHcaptcha.value.reset()
        ElMessage.error({message:'账号或密码错误'})
    }
}

const redicetToWechat = () => {
    location.href='/BindToWechat'
}
const forwardWorkspaceHandler = ()=>{
    location.href='/space';
}
const redicetToRegist = ()=>{
    location.href='/regist'
}
const redicetToForgot = ()=>{
    location.href='/forgot'
}
const clearCompanyChoosenHandler = ()=>{
    multipleUsers.value=[]
    model.value.tid=''
}

const loginOutHandler = ()=>{
    user.setUserLoginOut()
}
const verifyCheckHandler = async ()=>{
    const response = await UserServices.NeedVerifyStatusAsync()
    if(response.data.resultCode == ApiResult.SUCCESS){
        needVerify.value = response.data.data==1
    } else needVerify.value = true
}
verifyCheckHandler()
</script>
<style lang="scss">
.login-box{
    background-color: #f8f7fc;
    background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1711704450000_818.jpeg');
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    position: relative;
}
.login-box .logo{
    height: 30px;
    width: auto;
    top: 80px;
    left: 80px;
    position: absolute;
    z-index: 2;
}
.login-box .foot-box{
    position: absolute;
    bottom: 30px;
}
.login-box .login-form{
    width:600px;
    background-color: #FFF;
    border-radius: 15px;
}
.login-box .wel{
    text-align: center;
}
.login-box .wel img{
    width: 300px;
    height: auto;
}
.login-box .login-type{
    border:1px solid #dbdfe9;
    padding:10px 20px;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
}
.login-box .login-type:hover{
    background-color: #f8f7fc;
    color:var(--el-color-primary);
}
.login-type.active{
    background-color: #f8f7fc;
    color:var(--el-color-primary); 
}
.login-box .login-type img{
    width:16px;
}
.LoginTypeBox{
    font-size: 0.94vw;
    
}
.currentLoginCenter{
    padding: 1vw 0;
    position: relative;
}
.currentLoginCenter.active div{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}
.currentLoginCenter.active p {
    font-size: 1.25vw;
    font-family: PingFang SC;
    font-weight: bold;
}
.currentLoginCenter.active span{
    width: 2.24rem;
    height: 0.36rem;
    background: #1E3FE7;
    border-radius: 0.18rem;
    display: inline-block;
    margin: auto;
}
.currentLoginCenter:nth-child(2){
    padding: 1vw 2.34vw;
}
.login-formCenter{
    width: 480px;
    height: 531px;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.gd-login-content .gdwc-togger-sign {
    position: absolute;
    top: 0;
    right: 0;
}
.gdwc-togger-sign-tip {
    position: relative;
    top: 15px;
    right: 65px;
    cursor: pointer;
}
.gdwc-togger-sign-tip-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 5px;
    text-align: center;
    color: $el-color-primary;
    font-size: 14px;
    line-height: 32px;
    height: 32px;
    background: #F0F6FF;
}
.gdwc-togger-sign-btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    background: #f0f6ff;
    cursor: pointer;
}
.gdwc-togger-sign-btn::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: " ";
    border: 31px solid;
    border-color: transparent transparent #fff #fff;
}
.ServAgrelLoad{
    padding: 13px 24px;
    background: #f6f7f9;
}
.ServAgrelLoadL{
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    line-height: 21px;
    color: #9da3ac;
}
.ServAgrelLoadL a {
    text-decoration: none;
    color: black;
    font-weight: 400;
}
.ServAgrelLoadR{
    flex-shrink: 0;
    color: $el-color-primary;
    
}
</style>