<script setup>
import {ref} from 'vue'
import { useNoAuth } from '@/hooks/useNoAuth'
const props = defineProps({
    showFileImg:{
        type:Boolean,
        default:true
    },
    node:{
        type:Object,
        default:{}
    },
    activeId:{
        type:Number,
        default:0
    }
})
console.log(props.node);


const emits=defineEmits(['showFileOptClick','showPopup'])
function showPopup(){
    emits('showPopup',{node:props.node,optArr:props.optArr})
}
</script>

<template>
    <div class="catalog-item" :class="{'leaf-padding':!showFileImg}">
        <img :src="useNoAuth().noAuthIco" width="18" height="18" v-if="!props.node.HaveOperaAuth">
        <span class="van-ellipsis" :class="{'leaf-padding':!showFileImg,'choosed':activeId===node.ExcelClassifyId}">{{node.ExcelClassifyName||''}}</span>
        <!-- <div @click.stop="showPopup">
            <div class="menu-icon"  v-if="node.HaveOperaAuth">
                <img class="icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
            </div>
        </div> -->
    </div>
</template>

<style scoped lang="scss">
.catalog-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    &.leaf-padding{
        padding: var(--van-cell-vertical-padding) 0;
    }
    span{
        flex: 1;
        text-align: left;
        box-sizing: border-box;
        padding: 0 15px;
        font-size: 30px;
        &.leaf-padding{
            padding:0 60px;
            //color:#969799;
            color: #323233;
        }
        &.choosed{
            color:#969799;
        }
    }
    img{
        display: inline-block;
        width: 48px;
        height: auto;
        &.icon{
            width: 6px;
            margin-right: 0;
        }
    }
    .menu-icon{
        width: 30px;
        text-align: center;
        img{
            transform: rotate(90deg);
            transform-origin: left;
        }
        
    }
    @media screen and (min-width:$media-width){
        span{
            font-size: 16px;
            &.leaf-padding{
                padding:0 60px;
            }
        }
        img{
            width: 32px;
            &.icon{
                width:4px;
            }
        }
    }
}
</style>
