<template>
    <el-dialog v-model="show" title="加入团队/企业" style="width:450px;" @close="closed" :close-on-click-modal="false" :close-on-press-escape="false">
        <main>
            <el-input v-model="code" :disabled="loading" @change="queryCodeHandler" class="text-dark full-width rounded" style="font-family: pingfangr !important;" size="large" placeholder="请输入邀请码">
                <template #suffix>
                    <IconSearch size="18" class="cusor-pointer" @click="queryCodeHandler" v-if="!loading"></IconSearch>
                    <IconRefresh size="18" class="search-loading" v-if="loading"></IconRefresh>
                </template>
            </el-input>
            <div class="q-mt-sm text-small text-info q-mb-lg">邀请码是邀请链接最后一个'/'后面的数字和字母</div>
            <div class="no-select row items-center q-pa-lg rounded" style="background-color:  rgb(240, 246, 255);" v-if="inviteInfo">
                <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-alert :title="errorMsg" type="error" :closable="false" v-if="errorMsg!=''" />
            <div class="text-right q-mt-xl">
                <el-button type="info" size="large" class="ppt-button text-weight-bold" :disabled="loading" @click="closed">取消</el-button>
                <el-button type="primary" size="large" class="ppt-button" v-if="inviteInfo" @click="joinTenantHandler" :loading="loading">确认加入</el-button>
                <el-button type="info" size="large" class="ppt-button text-weight-bold text-grey-8" disabled v-else>确认解散</el-button>
            </div>
        </main>
    </el-dialog>
</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 { ref } from "vue"

const props = defineProps({})

const emit = defineEmits<{
    (event: 'close'): void,
    (event: 'apply'): void
}>()
const useUser = useUserStore()

const show = ref(true)
const code = ref('')
const loading = ref(false)
const inviteInfo = ref()
const errorMsg = ref('')

const closed = () => {
    show.value=false
    emit('close')
}
const queryCodeHandler = async () => {
    if(loading.value || code.value=='') return;
    loading.value = true
    inviteInfo.value = null
    errorMsg.value = ''
    const response = await UserServices.ValidateInviteCodeAsync(code.value)
    if (response.data.resultCode == ApiResult.SUCCESS) {
        inviteInfo.value = response.data.data
    }else errorMsg.value = response.data.message
    loading.value=false
}

const joinTenantHandler = async ()=>{
    if(!inviteInfo.value || loading.value) return
    loading.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})
        loading.value=false
    }
}
</script>

<style scoped>
.search-loading{
    animation: rotate 2s linear infinite;
}
 @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>