<script setup>
//目录,图表操作栏
import {ref,watch} from 'vue'
import {useUserInfo} from '@/hooks/common'
const props = defineProps({
    showPopup:{//是否展示操作栏
        type:Boolean,
        default:false
    },
    optArr:{
        type:Array,
        default:[]
    },
    node:{
        type:Object,
        default:{}
    },
    showFileOptClick:Function
})

const showPop = ref(false)
watch(()=>props.showPopup,()=>{
    showPop.value = props.showPopup
})
const emits=defineEmits(['close'])
watch(showPop,()=>{
    if(!showPop.value){
        emits('close')
    }
})
function fileOptClick(opt){
    showPop.value = false
    props.showFileOptClick({node:props.node,opt})
}
//判断是否展示该项
function showOpt(opt){
    const {authRole} = opt
    const UserInfo = useUserInfo()||{}
    const {AdminId,RoleTypeCode} = UserInfo.value
    const roleType = ['rai_admin', 'ficc_admin','admin'].includes(RoleTypeCode)?'admin':RoleTypeCode
    if(opt.id==='moveTo'||opt.id==='moveChart'){
        return props.node.SysUserId===AdminId||roleType==='admin'
    }
    if(authRole){
        return authRole===roleType
    }
    return true
}

</script>

<template>
    <van-popup v-model:show="showPop" round position="bottom" >
        <div class="catalog-file-opt-box">
            <template v-for="opt in optArr" :key="opt.label">
                <div class="opt-item" @click="fileOptClick(opt)" v-if="showOpt(opt)">
                    <span>{{opt.label}}</span>
                </div>
            </template>
            
            <div class="opt-item last" @click="fileOptClick({id:'cancel'})">
                <span>取消</span>
            </div>
        </div>
    </van-popup>
</template>

<style lang="scss">
.catalog-file-opt-box{
    background-color: #F6F6F6;
    .opt-item{
        display: flex;
        padding:32px;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid $border-color;
        background-color: #FFFFFF;
        img{
            width:44px;
        }
        span{
            white-space: nowrap;
        }
        &.last{
            border-bottom: none;
            margin-top:16px;
        }
        @media screen and (min-width:$media-width){
            padding:16px;
            img{
                width:32px;
            }
            &.last{
                margin-top: 8px;
            }
        }
    }
}
</style>
<style scoped lang="scss">

</style>
