<template>
    <div class="flex flex-col w-[240px] min-w-[240px] border-r-solid-light2">
        <structure @handle-organization="handleOrganization" />
        <organization-tree
            ref="organizationTreeRef"
            :data="data"
            :loading="loading"
            :currentNodeKey="curSelectedNode?.id"
            @set-group-leader="setGroupLeader"
            @handle-organization="handleOrganization"
            @handle-delete="handleDelete"
        />
    </div>
    <group-leader-dialog ref="groupLeaderDialogRef" @refresh-list="$emit('fetchTableList')" />
    <edit-popup v-if="showEdit" ref="editRef" @success="fetchOrganizationList" @close="showEdit = false" />
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import structure from '../components/organization/structure.vue'
import organizationTree, { type Tree } from '../components/organization/organization-tree.vue'
import groupLeaderDialog from '../components/organization/groupLeader-dialog.vue'
import editPopup from '@/views/account_center/organization/edit.vue'
import MessageBoxContent from '../components/organization/message-box.vue'
import { ORGANIZATION_INJECTION_KEY } from '@/config/symbol'
import { organzationDelete, organzationLists } from '@/api/account_center/organization'
import { ElMessageBox } from 'element-plus'
import feedback from '@/utils/feedback'

defineProps({
    curSelectedNode: {
        type: Object as PropType<Tree>,
        default: () => ({})
    }
})
const emit = defineEmits(['setSelectedNode', 'fetchTableList', 'getOrganizationList'])
const data = ref<Tree[]>([])
const loading = ref(false)
const organizationTreeRef = ref<InstanceType<typeof organizationTree>>()
const setSelectedNode = (data: Tree) => {
    emit('setSelectedNode', data)
    organizationTreeRef.value?.setCurrentKey(data)
}
const fetchOrganizationList = async () => {
    loading.value = true
    try {
        const result = await organzationLists()
        data.value = result
        loading.value = false
        data.value.length > 0 && setSelectedNode(data.value[0])
    } catch (error) {}
}
provide(ORGANIZATION_INJECTION_KEY, {
    fetchOrganizationList,
    setSelectedNode
})
fetchOrganizationList()

const groupLeaderDialogRef = ref<InstanceType<typeof groupLeaderDialog>>()
const setGroupLeader = (data: Tree) => {
    groupLeaderDialogRef.value?.openDialog({
        title: '设置组长',
        data
    })
}
const showEdit = ref(false)
const editRef = ref<InstanceType<typeof editPopup>>()
const handleOrganization = async (mode: 'add' | 'edit', data?: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open(mode)
    mode == 'edit' && editRef.value?.getDetail(data)
}
const handleDelete = (data?: Tree) => {
    const props = { name: data?.name }
    ElMessageBox({
        title: '温馨提示',
        showCancelButton: true,
        message: () => {
            return h(MessageBoxContent, props)
        },
        callback: (value: string) => {
            if (value == 'confirm') {
                const ids = [data?.id]
                organzationDelete({ ids }).then(() => {
                    feedback.msgSuccess('删除成功')
                    fetchOrganizationList()
                })
            } else if (value == 'cancel') {
            }
        }
    })
}
defineExpose({
    fetchOrganizationList
})
</script>

<style scoped lang="scss"></style>
