<template>
  <div class="full-dialog column flex-center items-center" v-if="showJoinVisible">
        <div class="q-pa-lg bg-white rounded light-shadow" style="width:500px;">
            <div class="text-weight-bold q-mb-xl row items-center" style="font-size: 18px;">
                <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>
            <div class="f14 text-dark">
                {{ 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>
            <div class="q-mt-xl text-right">
                <el-button class="q-px-md q-mr-md ppt-button" @click="rejectHandler" :disabled="joinLoading">拒绝加入</el-button>
                <el-button type="primary" class="q-px-md ppt-button" :loading="joinLoading" @click="joinTenantHandler">确认加入</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ApiResult } from "@/configs/axios";
import UserServices from "@/services/UserService";
import { useUserStore } from "@/store";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { ref } from "vue";

const useUser = useUserStore()
const {userInfo} = storeToRefs(useUser)
const inviteInfo = ref<any>()
const showJoinVisible = ref(false)
const joinLoading = ref(false)

if(localStorage.getItem("sure_invite")){
    inviteInfo.value = JSON.parse(localStorage.getItem("sure_invite")??'{}')
}

const loadInviterInfo = async () => {
    if(!inviteInfo.value) return;
    const response = await UserServices.ValidateInviteCodeAsync(inviteInfo.value.code)
    if (response.data.resultCode == ApiResult.SUCCESS) {
        showJoinVisible.value = true
    }
}

const rejectHandler = () =>{
    inviteInfo.value=null
    localStorage.removeItem("sure_invite")
    showJoinVisible.value=false
}
const joinTenantHandler = async ()=>{
    if(!inviteInfo.value || joinLoading.value) return
    joinLoading.value = true

    const response = await UserServices.JoinTeamByInviteCodeAsync(inviteInfo.value.code)

    if(response.data.resultCode == ApiResult.SUCCESS){
        useUser.setNewUserInfo(response.data.data)
        ElMessage.success({message:`成功加入了「${inviteInfo.value.company}」`})
        setTimeout(() => {
            location.reload()
        }, 1000);
    }else{
        ElMessage.error({message:response.data.message})
        joinLoading.value=false
    }
    rejectHandler()
}
loadInviterInfo()
</script>

<style>

</style>