<template>
  <div>
    <!-- 右键菜单栏 -->
    <div v-show="menuVisible" id="menu" :style="'left:'+coordinate.menuX+';top:'+coordinate.menuY">
        <ul class="menu">
            <li class="menu_item padding_35" @click="clickFile">打开</li>
            <li class="menu_item padding_35">下载</li>
            <li class="menu_item padding_35" v-show="menuMode==='myFavor'">取消收藏</li>
            <li class="menu_item padding_35" v-show="menuMode==='myShare'">取消分享</li>
            <li class="menu_item padding_35" v-show="menuMode==='myShare'" @click="shareVisible = true">分享名单</li>
            <li class="menu_item padding_35" v-show="menuMode==='myShare'" @click="deleteVisible = true">删除文档</li>
            <li class="menu_item padding_35" v-show="menuMode==='shareMe'" @click="deleteVisible = true">删除</li>
        </ul>
    </div>

    <!-- 删除文件窗口 -->
    <el-dialog title="删除确认" :visible.sync="deleteVisible" width="500px">
        <h3>删除后不可恢复，确定删除吗？</h3>
        <div slot="footer" class="dialog-footer">
            <el-button @click="deleteVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteVisible = false">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 分享窗口 -->
    <el-dialog class='share-ctn' title="分享" :visible.sync="shareVisible" width="500px">
        <div class="header-ctn">
            <span>分享给：</span>
            <el-button class="person-btn" icon="el-icon-plus">选择教师</el-button>
            <span class="person-count">已选择 <span style="color:blue">6</span> 人</span>
        </div>
        <div class="tag-ctn">
            <el-tag
                v-for="(tag, index) in tags"
                :key="index"
                effect="dark"
                type="info"
                color="#F2F2F2"
                size="medium"
                closable>
                {{tag.name}}
            </el-tag>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="shareVisible = false">取 消</el-button>
            <el-button type="primary" @click="shareVisible = false">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: 'ContextMenu',
    props: {
        menuVisible: { // 右键菜单栏显示
            type: Boolean,
            default: false
        },
        rightMenuData: { // 右键文件的数据
            type: Object,
            default: () => {
                return {}
            }
        },
        rightMenuFolder: { // 右键空白所在层的文件夹数据
            type: Array,
            default: () => {
                return []
            }
        },
        coordinate: { // 右键菜单栏坐标
            type: Object,
            default: () => {
                return {}
            }
        },
        menuMode: { // 右键的文件属于那种类型（myFavor: 我收藏的，myShare: 我分享的, shareMe: 分享给我的 ）
            type: String,
            default: ''
        }
    },
    data () {
        return {
            deleteVisible: false,
            shareVisible: false,
            tags: [
                { name: '标某某' },
                { name: '某某某' },
                { name: '某某某' },
                { name: '某某某' },
                { name: '某某某' },
                { name: '某某某' }
            ]
        }
    },
    methods: {
        showUploadMenu (event) {
            // event.stopPropagation()
            this.$emit('showUploadMenu')
        },
        clickFile () {
            let file = this.rightMenuData
            this.$emit('menuOpenFile', file)
        }
    }
}
</script>

<style lang="less" scoped>
#menu {
    position: absolute;
    z-index: 999;
    border-radius: 3px;
    background-color: white;
    border: 1px solid rgb(235, 235, 235);
    width: 120px;

    .menu {

        .menu_item {
            line-height: 35px;
            border-bottom: 1px solid rgb(235, 235, 235);
            font-size:13px;
            cursor: pointer;
            &:hover {
                background-color: #1790ff;
                color: white;
            }

            .upload_line {
                padding: 0 6px 0 10px;
                .upload-icon {
                    font-size: 22px;
                    vertical-align: middle;
                }
            }
        }

        .padding_35 {
            padding-left: 40px;
        }
    }
}

#upload_menu {
    position: absolute;
    z-index: 999;
    border-radius: 3px;
    background-color: white;
    border: 1px solid rgb(235, 235, 235);
    width: 200px;

    .upload_title {
        line-height: 35px;
        padding-left: 10px;
        color: #AAAAAA;
    }

    .upload_menu {
        .menu_item {
            line-height: 45px;
            font-size:13px;
            cursor: pointer;
            &:hover {
                background-color: #1790ff;
                color: white;
            }

            .upload_line {
                padding: 0 6px 0 10px;
                .document-icon {
                    font-size: 22px;
                    vertical-align: middle;
                }
            }
        }

        .padding_35 {
            padding-left: 40px;
        }
    }
}

/deep/ .dialog-footer {
    text-align: center;
    .el-button {
        width: 100px;
        height: 35px;
    }
}

.share-ctn{
    .header-ctn {
        .person-btn {
            font-size: 14px;
        }

        .person-count {
            margin-left: 5px;
        }
    }
    /deep/ .tag-ctn {
        margin-left: 55px;
        .el-tag {
            border: none;
            margin: 5px;
            color: rgb(46, 46, 46);
            font-size: 14px;
            vertical-align: middle;
            line-height: 32px;

            .el-tag__close {
                font-size: 18px;
                color: rgb(168, 168, 168);
            }
        }
    }
}

</style>
