<script setup lang="ts">
import { ref, useSlots } from "vue"
import PsTree, { convertTreeData, ENiuTreeStatus, INiuTreeData } from "@princess-ui/components/tree"
import "@princess-ui/theme-chalk/dist/ps-tree.css"

const list = ref(convertTreeData([
    {
        key: 1,
        title: "aaa",
        children: [
            {
                key: 5,
                title: "5文件夹",
                children: []
            },
        ]
    },
    {
        key: 2,
        title: "ccc"
    },
    {
        key: 3,
        title: "bbb"
    },
]))
function onExpand(node: INiuTreeData) {
    console.log(node);

}
const dropFn = (status: ENiuTreeStatus, data: INiuTreeData<any>, targetData: INiuTreeData<any>): Promise<boolean> => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true)
        }, 2000);
    })
}
</script>

<template>
    <Panel name="Tree" desc="普通的树形结构">
        <ps-tree :list="list">
            <template #default="{ data, deep }">
                <div :style="{
                    marginLeft: deep * 10 + 'px',
                    'position': 'relative',
                    zIndex: 10
                }">
                    {{ data.isFolder }}-{{ data.title }} 11-22 {{ deep * 10 + 'px' }}
                </div>
            </template>
        </ps-tree>
    </Panel>
    <Panel name="Tree" desc="延迟2000ms执行操作">
        <ps-tree sort @expand="onExpand" :dropFn="dropFn" :list="list" auto-expand>
            <template #default="{ data, deep }">
                <div :style="{
                    marginLeft: deep * 10 + 'px',
                    'position': 'relative',
                    zIndex: 10
                }">
                    {{ data.isFolder }}-{{ data.title }} 11-22 {{ deep * 10 + 'px' }}
                </div>
            </template>
        </ps-tree>
    </Panel>
</template>