<template>
    <div class="flex-1 p-[16px]" v-loading="loading">
        <div class="mb-[10px]">
            <el-input v-model="filterText" placeholder="请输入" :suffix-icon="Search" clearable />
        </div>
        <el-tree
            ref="treeRef"
            :data="data"
            :props="defaultProps"
            node-key="id"
            highlight-current
            :current-node-key="currentNodeKey"
            :default-expanded-keys="[primaryAccountId]"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
        >
            <template #default="{ node, data }">
                <span class="flex-1 flex-row-between-center">
                    <span>{{ node.label }}</span>
                    <el-dropdown placement="bottom" @command="(...args: any[]) => handleCommand(args, data)">
                        <span class="more mr-[12px]" v-if="data.id !== 1">
                            <icon name="el-icon-MoreFilled" :size="16" color="999" />
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="editOrganization">编辑组织信息</el-dropdown-item>
                                <el-dropdown-item command="deleteOrganization">删除组织</el-dropdown-item>
                                <el-dropdown-item command="setGroupLeader" v-if="!data?.children">设置组长</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </span>
            </template>
        </el-tree>
    </div>
</template>

<script setup lang="ts">
import { ORGANIZATION_INJECTION_KEY } from '@/config/symbol'
import { Search } from '@element-plus/icons-vue'
import type { ElTree } from 'element-plus'
import type { PropType } from 'vue'

export interface Tree {
    id: number
    label: string
    children?: Tree[]
    name?: string
}
const props = defineProps({
    data: {
        type: Array as PropType<Tree[]>,
        default: () => []
    },
    loading: {
        type: Boolean,
        default: false
    },
    currentNodeKey: {
        type: [String, Number]
    }
})
const emit = defineEmits(['setGroupLeader', 'handleOrganization', 'handleDelete'])
const defaultProps = {
    children: 'children',
    label: 'name',
    class: 'custom-tree'
}
const parent = inject(ORGANIZATION_INJECTION_KEY)
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
const primaryAccountId = computed(() => (props.data && props.data.length > 0 ? props.data[0]?.id : 0))
const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.name?.includes(value)
}
watch(filterText, val => {
    treeRef.value!.filter(val)
})
// 点击节点
const handleNodeClick = (data: Tree) => {
    parent?.setSelectedNode(data)
}
const setCurrentKey = (val: any) => {
    nextTick(() => {
        treeRef.value?.setCurrentKey(val)
    })
}
const handleCommand = (args: any[], data: Tree) => {
    const command = args[0]
    switch (command) {
        case 'editOrganization':
            emit('handleOrganization', 'edit', data)
            break
        case 'deleteOrganization':
            emit('handleDelete', data)
            break
        case 'setGroupLeader':
            emit('setGroupLeader', data)
            break
    }
}
defineExpose({
    setCurrentKey
})
</script>

<style scoped lang="scss">
:deep(.custom-tree) {
    .el-tree-node__content {
        flex: 1;
        height: 36px;
        &:hover {
            .more {
                display: block;
            }
        }
        .more {
            display: none;
        }
    }
}
</style>
