<template>
    <div class="full-dialog column flex-center items-center" ref="enterpriseRef">
        <div class="create-enter-box">
            <div class="close-btn column items-center flex-center cusor-pointer" @click="close">
                <IconClose size="0.83vw"></IconClose>
            </div>
            <div class="row full-width">
                <div class="column flex-center items-center q-px-xl">
                    <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1714372736000_535.png" style="width:20vw;">
                </div>
                <div class="create-enter col column flex-center items-center" style="height: 30vw;">
                    <div class="text-weight-bold " style="font-size: 1.25vw;">创建团队/企业</div>
                    <div class="full-width" style="margin: 3.5vw 0;">
                        <div style="font-size: 0.73vw;" class="q-mb-sm">你的团队/企业名称</div>
                        <el-input v-model="groupName" placeholder="请输入团队/企业名称" size="large" @input="validator" input-style="background: transparent;font-family:pingfangr" />
                        <div class="q-mt-sm text-negative text-small" :style="{'visibility':errorMsg==''?'hidden':'visible'}">&nbsp;{{ errorMsg }}</div>
                    </div>
                    <el-button :type="groupName==''?'info':'primary'" :disabled="groupName==''" :loading="loading" size="large" @click="createTenantHandler" class="text-weight-bolder full-width pingfangr">
                        <span style="font-size: 14px;" :style="{'color':groupName==''?'grey':'unset'}">立即创建</span>
                    </el-button>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ApiResult } from "@/configs/axios";
import OrderService from "@/services/OrderService";
import { ElLoading, ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useUserStore } from "@/store";

const props = defineProps({
  orderId: {
    type: String,
    required: true,
  },
})

const emit = defineEmits<{
  (event: 'close'): void
}>()

const useUser = useUserStore()
const enterpriseRef = ref()
const groupName = ref('')
const errorMsg = ref('')
const loading = ref(false)

const validator = ()=>{
    if(groupName.value=='') errorMsg.value='请填写你的团队/企业名称'
    else if(groupName.value.length<2) errorMsg.value='团队/企业名称至少需要2个字'
    else errorMsg.value=''
}
const createTenantHandler = async ()=>{
    validator()
    if(errorMsg.value=='' && !loading.value){
        loading.value=true
        const response = await OrderService.SetTentantAsync(props.orderId,groupName.value)
        if(response.data.resultCode==ApiResult.SUCCESS){
            changeUserInfo(response.data.data)
        } else {
            ElMessage.error({ message:response.data.message })
        }
        loading.value=false
    }
}

const changeUserInfo = (userInfo:any)=>{
    ElLoading.service({
        lock:true,
        text:'正在切换新的身份信息'
    })
    setTimeout(() => {
        useUser.setNewUserInfo(userInfo)
        location.reload()
    }, 1000);
}

const close = ()=> emit('close')

onMounted(()=>{
    if(enterpriseRef.value){
        enterpriseRef.value.click()
    }
})
</script>

<style scoped>
.create-enter-box{
    width: 50vw;
    background: linear-gradient(90deg, #638FEB, #5921DB);
    border-radius:0.52vw;
    padding: 4px;
    position: relative;
}
.create-enter-box .close-btn{
    position: absolute;
    top:-1.93vw;
    right: -1.93vw;
    width: 1.77vw;
    height: 1.77vw;
    border:2px solid #AFAFAF;
    text-align: center;
    color:#AFAFAF;
    border-radius: 50%;
}
.create-enter-box .create-enter{
    background: #FFF;
    border-radius: 10px;
    padding:3vw;
}
</style>