<template>
    <div>
        <ul v-if="menutype === 'filemenu'" class="file-menu" :style="{top:menuposition.top,left:menuposition.left}">
            <li>
                <div @click="open_file">
                    打开
                </div>
            </li>
            <li>
                <div>
                    复制
                </div>
            </li>
            <li>
                <div>
                    粘贴
                </div>
            </li>
            <li>
                <div>
                    重命名
                </div>
            </li>
            <li>
                <div>
                    删除
                </div>
            </li>
        </ul>
        <ul v-else class="context-menu" :style="{top:menuposition.top,left:menuposition.left}">
        <li>
            <div>
                新建
            </div>
        </li>
        <li>
            <div>
                刷新
            </div>
        </li>
        <li>
            <div>
                粘贴
            </div>
        </li>
    </ul>
    </div>
</template>


<script>

// import { computed } from 'vue';

export default {
    name:"RightMenu",
    props:{
        menuposition:{
            type:Object,
            required:true,
        },
        menutype:{
            type:String,
            required:true,
        }
    },
    setup(props,context){
        const open_file = () => {
            context.emit('open_file');
        }
        return {
            open_file,
        }
    }
}
</script>

<style scoped>
.file-menu {  
  /* 菜单样式 */    
  background-color: pink;  
  border: 1px solid #ccc;  
  position: fixed;
  padding: 0; /* 移除默认的内边距 */  
    margin: 0;
    list-style: none; 
  /* 其他样式 */  
} 

.file-menu > li {
    padding: 10px; /* 添加内边距以确保内容不紧贴边框 */  
    text-align: left; /* 内容左对齐 */  
    width: 100%; /* 列表项占据父容器的全部宽度 */  
    box-sizing: border-box; /* 包含内边距和边框在内计算元素的总宽度 */  
    background-color: #f9f9f9; /* 可选：为列表项添加背景色 */  
    border-bottom: 1px solid #ddd; /* 可选：为列表项添加底部边框 */
    cursor:pointer;
}

.context-menu {  
  /* 菜单样式 */    
  background-color: pink;  
  border: 1px solid #ccc;  
  position: fixed;
  padding: 0; /* 移除默认的内边距 */  
    margin: 0;
    list-style: none; 
  /* 其他样式 */  
} 

.context-menu > li {
    padding: 10px; /* 添加内边距以确保内容不紧贴边框 */  
    text-align: left; /* 内容左对齐 */  
    width: 100%; /* 列表项占据父容器的全部宽度 */  
    box-sizing: border-box; /* 包含内边距和边框在内计算元素的总宽度 */  
    background-color: #f9f9f9; /* 可选：为列表项添加背景色 */  
    border-bottom: 1px solid #ddd; /* 可选：为列表项添加底部边框 */
    cursor:pointer;
}
</style>
