<script setup>
import {ref} from 'vue'
import {useCatalogList} from '../hooks/useCatalogList'
import CatalogItem from './CatalogItem.vue';
const props = defineProps({
    catalogNodes:{
        type:Array,
        default:[]
    },
    activeId:{
        type:Number,
        default:0
    },
    showFileOpt:Function
})
const emits=defineEmits(['handleCatalogItemClick'])
//展开的目录
const activeCatalogs = ref([])
//目录操作栏
const {optArrNode,optArrItem,authOptArr} = useCatalogList()
//点击目录
function handleCatalogItemClick(item,type,node){
    emits('handleCatalogItemClick',{item,type,parent:node})
}
</script>

<template>
    <div class="catalog-tree-wrap">
        <van-collapse v-model="activeCatalogs" :border="false">
            <van-collapse-item 
                v-for="node in catalogNodes"
                :key="node.UniqueCode"
                :name="node.UniqueCode"
                :is-link="true"
                @click.stop="handleCatalogItemClick(node)"
            >
            <template #title>
                <CatalogItem 
                    :node="node" 
                    :optArr="optArrNode"
                    :authOptArr="authOptArr"
                    @showPopup="showFileOpt"/>
            </template>
            <div 
                class="list-item"
                v-for="item in node.Children" 
                :key="item.UniqueCode"
                @click.stop="handleCatalogItemClick(item,'item',node)"
            >
                <CatalogItem 
                    :node="item" 
                    :showFileImg="false" 
                    :optArr="optArrItem"
                    :activeId="activeId"
                    :authOptArr="authOptArr"
                    @showPopup="showFileOpt"/>
            </div>
            </van-collapse-item>
        </van-collapse>
    </div>
</template>

<style lang="scss">
.catalog-tree-wrap{
    .van-collapse{
        .van-collapse-item{
            >.van-cell{
                flex-direction: row-reverse;
                .van-cell__title{
                    overflow: hidden;
                }
            }
            .van-collapse-item__wrapper{
                .van-collapse-item__content{
                    padding-top: 0;
                    padding-bottom: 0;
                }
            }
        }
    }
}
</style>
