<template>
    <div class="window-height column flex-center items-center" style="background-color: #f0f2f5;">
        <div class="rounded light-shadow q-pa-xl bg-white text-center" style="width: 500px;">
            <div class="row items-center">
                <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1715138194000_864.png"
                    width="35px">
                <div class="text-dark q-ml-md text-weight-bold">团队或企业邀请</div>
            </div>
            <template v-if="message != 'joined' && !inviteInfo">
                <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1715138490000_986.png"
                    style="width:200px" class="q-mt-xl">
                <div class="text-subtitle q-mt-lg" style="font-size: 14px;">{{ message }}</div>
            </template>
            <template v-else-if="message == 'joined' && !inviteInfo">
                <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1715138490000_986.png"
                    style="width:200px" class="q-mt-xl">
                <div class="text-subtitle q-mt-lg row items-center flex-center" style="font-size: 14px;">
                    <span>你已经加入了「{{ userInfo.company }}」，</span>
                    <el-button link type="primary" @click="redicetTo('/space')">进入组织空间</el-button>
                </div>
            </template>
            <template v-else-if="inviteInfo && message == ''">
                <div class="q-mt-xl">
                    <div class="f14 text-dark text-left">
                        {{ inviteInfo.nickname }} 正在邀请你加入
                    </div>
                    <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">
                            <div class="text-dark text-weight-bold">{{ inviteInfo.company }}</div>
                            <div class="text-grey-8 text-small q-mt-sm">{{ inviteInfo.expire }}后失效</div>
                        </div>
                    </div>
                    <el-button type="primary" size="large" class="q-mt-xl ppt-button" :loading="joinLoading" @click="joinTenantHandler">立即加入</el-button>
                </div>
            </template>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ApiResult } from "@/configs/axios";
import { ENTERPRISE_DEFAULT_HEADER } from "@/configs/customer";
import UserServices from "@/services/UserService";
import { useUserStore } from "@/store";
import { ElLoading, ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { useRouter } from "vue-router";

const loading = ElLoading.service({ text: '正在加载邀请信息' })
const router = useRouter()
const code = router.currentRoute.value.params.code.toString()
const useUser = useUserStore()
const { userInfo, token } = storeToRefs(useUser)
const message = ref('')
const inviteInfo = ref<any>()
const joinLoading = ref(false)

if (!code) router.push({ path: '/notfound' })

const loadInviterInfo = async () => {
    const response = await UserServices.ValidateInviteCodeAsync(code)
    if (response.data.resultCode == ApiResult.SUCCESS) {
        inviteInfo.value = response.data.data
        inviteInfo.value.logo = !inviteInfo.value.logo || !inviteInfo.value.logo.includes('http://') || !inviteInfo.value.logo.includes('https://') ? ENTERPRISE_DEFAULT_HEADER : inviteInfo.value.logo
        localStorage.setItem("invite", JSON.stringify(inviteInfo.value))
        if (token.value != '') {
            //@TODO: r如果用户存在企业，是否加入其它企业，免费用户直接加入
        } else {
            router.push('/login')
        }
    } else {
        message.value = response.data.message
    }

    loading.close()

}
const redicetTo = (path: string) => router.push({ path })
const joinTenantHandler = async ()=>{
    if(!inviteInfo.value || message.value!='' || joinLoading.value) return
    joinLoading.value = true

    const response = await UserServices.JoinTeamByInviteCodeAsync(code)

    if(response.data.resultCode == ApiResult.SUCCESS){
        useUser.setNewUserInfo(response.data.data)
        ElMessage.success({message:`成功加入了「${inviteInfo.value.company}」,正在进入控制台`})
        localStorage.removeItem('invite')
        setTimeout(() => {
            router.push({path:'/space'})
        }, 1000);
    }else{
        ElMessage.error({message:response.data.message})
        joinLoading.value=false
    }
    
}
loadInviterInfo()
</script>
<style scoped></style>