<template>
    <div class="left-tree">
        <el-tree
            :data="treeData.data"
            node-key="id"
            :props="defaultProps"
            :default-expanded-keys="[0]"
            :default-checked-keys="[0]"
            @node-click="nodeclick"
        >
            <template #default="scope">
                <div class="custom-node">
                    <i
                        class="tree-icon"
                        :class="{
                            'el-icon-caret-right': !scope.node.expanded,
                            'el-icon-caret-bottom': scope.node.expanded,
                            'el-icon-wlj-yuandian': scope.data.is_leaf === 1
                        }"
                        :style="{ color: scope.data.is_leaf === 1 ? 'rgb(54,229,150)' : '#409eff' }"
                    />
                    <span>{{ scope.node.label }}</span>
                </div>
            </template>
        </el-tree>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { getDept } from "@/api/asset"
// 定義派發(fā)事件
const emit = defineEmits(['tree-node-click'])
const nodeclick = (data, node, component) => {
    // console.log('子組件category的節(jié)點被點擊', data, node, component)
    // 向父組件發(fā)送事件；
    emit('tree-node-click', data, node, component)
}
let defaultProps = reactive({
    children: 'children',
    label: 'name',
})
let treeData: any = reactive({ data: [] })
async function getDeptTree() {
    const data: any = await getDept({ POST_TYPE: 1 })
    treeData.data = data.lists
    console.log(treeData)
}
onMounted(async () => {
    getDeptTree()
})
</script>

<style lang="scss" scoped>
//tree
.el-tree-node__content:hover {
    background-color: rgb(255, 207, 131);
}
.el-tree-node:focus > .el-tree-node__content {
    background-color: rgb(255, 207, 131);
}
.el-tree-node__label {
    font-size: 1.5vh;
}
.el-tree-node__expand-icon {
    color: transparent;
    cursor: default;
}

//tree
.left-tree {
    height: 73vh;
    overflow: auto;
}
/*修改滾動條樣式*/
.left-tree::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    /**/
}
.left-tree::-webkit-scrollbar-track {
    background: rgb(104, 108, 143);
    border-radius: 10px;
}
.left-tree::-webkit-scrollbar-thumb {
    background: rgb(54, 229, 150);
    border-radius: 10px;
}
// .left-tree::-webkit-scrollbar-thumb:hover{
//   background: #333;
// }
// .left-tree::-webkit-scrollbar-corner{
//   background: #179a16;
// }
.tree-icon {
    margin-right: 1vh;
    margin-left: -2vh;
}
.el-tree {
    background: none;
    color: #fff;
}
</style>

<dept-tree  @tree-node-click="treenodeclick"/>
const treenodeclick  = (data, node, component) => {
	  console.log(data);
}