<template>
    <div class="ps-tree component">
        <template v-for="(item, index) in list" :key="item.key">
            <node @onDragstart="onDragstart" @onDragEnd="onDragEnd" @onDrop="onDrop" :data-source-key="dataSourceKey"
                :data="item" :list="list" :level="level" @click="(item) => clickNode(item)">
                <template
                    #default="{ data, deep, dataSourceKey, status }: { data: INiuTreeData, deep: number, dataSourceKey: INiuTreeKey, status: ENiuTreeStatus }">
                    <slot :data="data" :deep="deep" :dataSourceKey="dataSourceKey" :status="status"></slot>
                </template>
            </node>
        </template>
    </div>
</template>
<script lang="ts" setup>
import { provide, ref, renderSlot, useSlots, getCurrentInstance } from "vue"
import node from './node.vue'
import type { INiuTreeData, INiuTreeKey } from './type'
import { ENiuTreeStatus } from './type'
import {
    findByKey,
    forEachTree,
    insertAfterByKey,
    insertBeforeByKey,
    isChildOf,
    removeByKey,
} from './util'

const props = withDefaults(
    defineProps<{
        list: INiuTreeData[]
        justOpen?: boolean
        autoExpand?: boolean
        justOpenOne?: boolean
        level?: number
        dropFn?(status: ENiuTreeStatus, data: INiuTreeData, targetData: INiuTreeData): boolean | Promise<boolean>
    }>(),
    {
        justOpenOne: false,
        justOpen: false,
        autoExpand: false,
        level: 0,
    }
)
const slot = useSlots()

provide("tree:opts", props)

function clickNode(item: INiuTreeData) {
    if (props.justOpenOne) {
        forEachTree(props.list, (node: INiuTreeData) => {
            node.isExpand = false
        })
    }
    if (item.isFolder) {
        item.isExpand = !item.isExpand
        emit("change")
    }

}

const emit = defineEmits<{
    (e: 'change'): void
    (e: 'itemDragstart'): void
}>()

const dataSourceKey = ref()
function onDragstart(key: INiuTreeKey) {
    dataSourceKey.value = key
    emit("itemDragstart")
}
function onDragEnd(key: INiuTreeKey) {
    dataSourceKey.value = undefined
}
async function onDrop(key: INiuTreeKey, status?: ENiuTreeStatus) {
    if (!dataSourceKey.value) return
    if (!key) return
    let data = findByKey(dataSourceKey.value, props.list)
    let targetData = findByKey(key, props.list)
    const sourceKey = dataSourceKey.value;
    dataSourceKey.value = undefined
    const isSuccess = (await props.dropFn?.(status, data, targetData))
    if (isSuccess == undefined || isSuccess) {
        switch (status) {
            case ENiuTreeStatus.DragIn:
                if (
                    data &&
                    targetData &&
                    sourceKey != key &&
                    !isChildOf(key, sourceKey, props.list) &&
                    targetData.children
                ) {
                    removeByKey(sourceKey, props.list)
                    targetData.children.push(data)
                    if (props.autoExpand) {
                        targetData.isExpand = true
                    }
                    emit("change")
                }
                break
            case ENiuTreeStatus.DragDown:
                // 按索引往列表添加节点
                if (
                    data &&
                    targetData &&
                    sourceKey != key &&
                    !isChildOf(key, sourceKey, props.list)
                ) {
                    removeByKey(sourceKey, props.list)
                    insertAfterByKey(key, data, props.list)
                    emit("change")
                }
                break
            case ENiuTreeStatus.DragUp:
                // 按索引往列表添加节点
                if (
                    data &&
                    targetData &&
                    sourceKey != key &&
                    !isChildOf(key, sourceKey, props.list)
                ) {
                    removeByKey(sourceKey, props.list)
                    insertBeforeByKey(key, data, props.list)
                    emit("change")
                }
                break
        }
    }
}
</script>

