<template>
   <div class="full-height full-width column" ref="memberListRef">
        <div class="text-dark text-weight-bolder">解散团队/企业</div>
        <div class="borders-light q-pa-lg rounded q-mt-xl" style="width:650px;">
            <div class=" row items-center">
                <div class="col" style="margin-right: 45px;">
                    <div class="text-dark text-weight-bold">解散企业</div>
                    <div class="q-mt-lg text-small text-info">解散企业后，您将不可再进入该企业，企业内所有内容、成员将会被永久删除。该操作不可逆，请谨慎操作！</div>
                </div>
                <div>
                    <el-button type="danger" class="ppt-button" @click="dissTeamHandler">解散</el-button>
                </div>
            </div>
            
        </div>
    </div>
    <el-dialog v-model="dissVisible" title="确认解散企业" style="width:480px;" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
        <main class="f14 text-dark">
            <div>请确认已知晓以下解散企业的操作结果</div>
            <div><el-checkbox v-model="checked[0]" :disabled="loading" label="将删除所有成员的作图记录" size="large" /></div>
            <div><el-checkbox v-model="checked[1]" :disabled="loading" label="将删除团队空间/企业资源库全部内容" size="large" /></div>
            <div><el-checkbox v-model="checked[2]" :disabled="loading" label="删除后内容无法找回" size="large" /></div>
            <div><el-checkbox v-model="checked[3]" :disabled="loading" label="解散后组织无法使用，不可恢复" size="large" /></div>
            <div class="q-mt-lg">
                <div>解散企业的原因</div>
                <el-select v-model="selectedReason" :disabled="loading" placeholder="请选择解散企业的原因" class="full-width q-my-md" size="large">
                    <el-option label="企业重复创建" value="企业重复创建" />
                    <el-option label="离职或工作变动，不需要使用" value="离职或工作变动，不需要使用" />
                    <el-option label="团队解散/公司停止运营" value="团队解散/公司停止运营" />
                    <el-option label="产品功能无法满足使用" value="产品功能无法满足使用" />
                    <el-option label="其他" value="其他" />
                </el-select>
                <el-input v-model="inputReason" :disabled="loading" v-if="selectedReason=='其他'" class="full-width pingfangr" size="large" placeholder="请输入原因" />
            </div>
            <div class="q-mt-lg">
                <div>超级管理员身份认证</div>
                <el-input v-model="pass" type="password" class="full-width q-mt-md" size="large" :disabled="loading" placeholder="请输入登录密码" />
            </div>
            <div class="text-right q-mt-xl">
                <el-button type="info" size="large" class="ppt-button text-weight-bold" :disabled="loading" @click="()=>dissVisible=false">取消</el-button>
                <el-button type="primary" size="large" class="ppt-button" v-if="enabledSubmit" :loading="loading" @click="dissTenantSubmit">确认解散</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 OrgService from "@/services/OrgService";
import { useUserStore } from "@/store";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { computed } from "vue";
import { ref } from "vue";

const dissVisible = ref(false)
const checked = ref<boolean[]>([false,false,false,false])
const selectedReason = ref('企业重复创建')
const inputReason = ref('')
const pass = ref('')
const loading = ref(false)

const enabledSubmit = computed(()=>{
    let flag = !checked.value.includes(false)
    if(flag){
        if(selectedReason.value=='其他'){
            flag = inputReason.value!=''
        }
        if(flag) flag = pass.value!=''
    }
    return flag
})
const dissTeamHandler = ()=>{
    dissVisible.value = true
    checked.value.forEach((x) => {
        x=false
    })
}
const dissTenantSubmit= async ()=>{
    if(loading.value || !enabledSubmit.value) return
    loading.value = true

    const r = selectedReason.value=='其他'?inputReason.value:selectedReason.value
    const response= await OrgService.DissTenantAsync(r,pass.value)

    if(response.data.resultCode == ApiResult.SUCCESS){
        ElMessage.success('当前团队/企业已注销，账号即将退出')
        setTimeout(() => {
            useUserStore().setUserLoginOut()
        }, 1000);
    }else{
        ElMessage.error(response.data.message)
    }
    loading.value=false
}
</script>

<style>

</style>