<template>
    <div id="contextmenu" class="contextmenu" v-show="visible" :style="{
        'z-index': zIndex
    }">

        <div class="contextmenu__item" @click="handleMenu('open')" v-show="checkList.length <= 1">
            <i class="icon el-icon-right icon_open" />
            <span>{{ $t('trials:trials-workbench:auditDocument:menu:open') }}</span>
        </div>
        <div class="contextmenu__item" @click="handleMenu('downLoad')">
            <i class="icon  icon_download" />
            <span>{{ $t('trials:trials-workbench:auditDocument:menu:download') }}</span>
        </div>
        <template v-if="['file', 'files', 'folder'].includes(type)">
            <div class="line"></div>
            <div class="contextmenu__item" @click="handleMenu('copy')">
                <i class="icon  icon_copy" />
                <span>{{ $t('trials:trials-workbench:auditDocument:menu:copy') }}
                    <span class="shortcut">{{ $t('trials:trials-workbench:auditDocument:shortcut:copy') }}</span>
                </span>
            </div>
            <div class="contextmenu__item" @click="handleMenu('shear')">
                <i class="icon  icon_shear" />
                <span>{{ $t('trials:trials-workbench:auditDocument:menu:shear') }}
                    <span class="shortcut">{{ $t('trials:trials-workbench:auditDocument:shortcut:shear') }}</span>
                </span>
            </div>
            <div class="contextmenu__item" @click="handleMenu('stickup')" v-if="checkList.length <= 1 && isCopy">
                <i class="icon  icon_stickup" />
                <span>{{ $t('trials:trials-workbench:auditDocument:menu:stickup') }}
                    <span class="shortcut">{{ $t('trials:trials-workbench:auditDocument:shortcut:stickup') }}</span>
                </span>
            </div>
            <div class="contextmenu__item" @click="handleMenu('rename')" v-show="checkList.length <= 1">
                <i class="icon  icon_rename" />
                <span>{{ $t('trials:trials-workbench:auditDocument:menu:rename') }}</span>
            </div>
            <div class="contextmenu__item" @click="handleMenu('del')">
                <i class="icon  icon_del" />
                <span>{{ $t('trials:trials-workbench:auditDocument:menu:del') }}</span>
            </div>
        </template>
        <template v-if="checkList.length <= 1 && type === 'file'">
            <div class="line"></div>
            <div class="contextmenu__item" @click="handleMenu('version')">
                <i class="icon el-icon-warning-outline  icon_Stats" />
                <span>{{ $t('trials:trials-workbench:auditDocument:menu:version') }}</span>
            </div>
        </template>
        <template v-if="type === 'version' || type === 'c_version'">
            <div class="line"></div>
            <div class="contextmenu__item" @click="handleMenu('setVersion')" v-if="type === 'version'">
                <i class="icon el-icon-document-checked  icon_Stats" />
                <span>{{ $t('trials:trials-workbench:auditDocument:menu:setVersion') }}</span>
            </div>
            <div class="contextmenu__item" @click="handleMenu('delVersion')" v-if="type === 'version'">
                <i class="icon el-icon-delete   icon_Stats" />
                <span>{{ $t('trials:trials-workbench:auditDocument:menu:delVersion') }}</span>
            </div>
            <div class="contextmenu__item" @click="handleMenu('delAllVersion')">
                <i class="icon el-icon-delete-solid  icon_Stats" />
                <span>{{ $t('trials:trials-workbench:auditDocument:menu:delAllVersion') }}</span>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    name: "index",
    props: {
        checkList: {
            type: Array,
            default: () => {
                return []
            }
        },
        isCopy: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            visible: false,
            type: 'file',
            zIndex: 9,
            rowData: {}
        };
    },
    methods: {
        init(event, row, type, zIndex = 9) {
            this.rowData = row
            this.type = type
            this.zIndex = zIndex
            // 设置菜单出现的位置
            // 具体显示位置根据自己需求进行调节
            this.visible = true
            let menu = document.querySelector("#contextmenu");
            let chaY = document.body.clientHeight - event.clientY;
            let chaX = document.body.clientWidth - event.clientX;
            // 防止菜单太靠底，根据可视高度调整菜单出现位置
            if (chaY < 150) {
                menu.style.top = event.clientY - 220 + "px";
            } else {
                menu.style.top = event.clientY + "px";
            }
            if (chaX < 150) {
                menu.style.left = event.clientX - 200 + "px";
            } else {
                menu.style.left = event.clientX + 15 + "px";
            }

            document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
        },
        foo() {
            this.visible = false
            this.$emit("foo");
        },
        handleMenu(item) {
            this.$emit("handleMenu", { key: item, row: this.rowData });
        },
    },
};
</script>

<style lang="scss" scoped>
.contextmenu__item {
    display: block;
    cursor: pointer;
    white-space: nowrap;
    clear: both;
    border-radius: 4px;
    line-height: 30px;
    height: 30px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    color: #444;
    transition: background-color .15s;
    padding: 0px 15px 0 15px;

}

.contextmenu {
    min-width: 180px;
    max-width: 250px;
    font-size: 14px;
    display: inline-block;
    background: #fff;
    border-radius: 4px;
    position: fixed;
    padding: 10px 6px;
    list-style-type: none;
    max-height: 80vh;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    background-image: url(@/assets/color-bg.png);
    background-size: 100% auto;
    background-position: top 0 right 0;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 .5px #88888830, 0 10px 40px 0 #88888840;
}

.contextmenu__item:hover {
    cursor: pointer;
    background: #99999920;
    color: #444;
}

.line {
    border-bottom: 1px solid #66666630;
    height: 2px;
    line-height: 0;
    margin: 2px 0 4px;
    margin-left: 16px;
    margin-right: -5px;
    cursor: default;
    padding: 0px 15px 0 15px;
    color: #444;
    display: block;
    white-space: nowrap;
    clear: both;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon {
    font-style: normal;
    vertical-align: middle;
    text-align: center;
    color: #aaa;
    font-size: 17px;
    margin-top: -2px;
    width: 16px;
    line-height: 16px;
    display: inline-block;
    height: 16px;
    margin-right: 8px;
}

.shortcut {
    display: inline-block;
    font-size: 12px;
    zoom: .95;
    font-weight: 200;
    color: #888;
    padding-left: 10px;
    position: absolute;
    right: 10px;
    width: 65px;
    min-width: 50px;
    text-align: right;
    overflow: hidden;
}

/*打开*/
.icon_open {
    color: #1890ff;
}

/*下载*/
.icon_download {
    display: inline-block;
    background-image: url(@/assets/menu_icon.png);
    background-position: -16px -48px;
    background-size: auto !important;
    background-repeat: no-repeat;
    height: 16px;
    margin-right: 8px;
}

/**剪切*/
.icon_shear {
    background-size: cover !important;
    background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zycgd2lkdGg9JzIwMCcgaGVpZ2h0PScyMDAnPjxwYXRoIGQ9J001NjkuNyAzODguM0w3NDMuMiAxNDNjMTYtMjcuNyA2LjUtNjMtMjEuMi03OUw1MTIgMzE4LjMgMzAyIDY0Yy0yNy44IDE2LTM3LjMgNTEuMy0yMS4yIDc5bDE3My41IDI0NS4zTDI3MyA2MDcuOWw5NS45IDYwLjEgNjEuNS04Mi43TDUxMiA0NjkuOWw4MS42IDExNS40IDYxLjUgODIuNyA5NS45LTYwLjEtMTgxLjMtMjE5LjZ6JyBmaWxsPScjN0Y4MDgwJz48L3BhdGg+PHBhdGggZD0nTTI3MyA2MDZjLTk3LjYgMC0xNzcgNzkuNC0xNzcgMTc3czc5LjQgMTc3IDE3NyAxNzcgMTc3LTc5LjQgMTc3LTE3Ny03OS40LTE3Ny0xNzctMTc3eiBtMSAyOTBjLTYyLjMgMC0xMTMtNTAuNy0xMTMtMTEzczUwLjctMTEzIDExMy0xMTMgMTEzIDUwLjcgMTEzIDExMy01MC43IDExMy0xMTMgMTEzek03NTEgNjA2Yy05Ny42IDAtMTc3IDc5LjQtMTc3IDE3N3M3OS40IDE3NyAxNzcgMTc3IDE3Ny03OS40IDE3Ny0xNzctNzkuNC0xNzctMTc3LTE3N3ogbTAgMjkwYy02Mi4zIDAtMTEzLTUwLjctMTEzLTExM3M1MC43LTExMyAxMTMtMTEzIDExMyA1MC43IDExMyAxMTMtNTAuNyAxMTMtMTEzIDExM3onIGZpbGw9JyM0OTdDQUQnPjwvcGF0aD48L3N2Zz4=);
}

/**复制*/
.icon_copy {
    background-size: cover !important;
    background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcwNCAyNTZoNjguMDk2bDE0Ny4zOTIgMTU5LjA0YTMyIDMyIDAgMCAxIDguNTEyIDIxLjc2Vjg5NmEzMiAzMiAwIDAgMS0zMiAzMkgzNTJhMzIgMzIgMCAwIDEtMzItMzJ2LTEyOEgxMjhhMzIgMzIgMCAwIDEtMzItMzJWMTI4YTMyIDMyIDAgMCAxIDMyLTMyaDU0NGEzMiAzMiAwIDAgMSAzMiAzMnYxMjh6JyBmaWxsPScjRkZGRkZGJz48L3BhdGg+PHBhdGggZD0nTTI1NiA3MzZ2MzJIMTI4YTMyIDMyIDAgMCAxLTMyLTMyVjEyOGEzMiAzMiAwIDAgMSAzMi0zMmg1NDRhMzIgMzIgMCAwIDEgMzIgMzJ2NjRoLTMyVjEyOEgxMjh2NjA4aDEyOHonIGZpbGw9JyM1RDZEN0UnPjwvcGF0aD48cGF0aCBkPSdNNzY4IDI1Ny4xODRsMC4zMi0wLjMyIDE2MC41NDQgMTU3LjYtMS41MDQgMS41MzZIOTI4djQ4MGEzMiAzMiAwIDAgMS0zMiAzMkgzNTJhMzIgMzIgMCAwIDEtMzItMzJWMjg4YTMyIDMyIDAgMCAxIDMyLTMyaDQxNnYxLjE4NHogbTAgNDQuMjI0VjQxNmgxMTYuNzM2TDc2OCAzMDEuNDR6TTczNiAyODhIMzUydjYwOGg1NDRWNDQ4aC0xNjBWMjg4eicgZmlsbD0nIzUwODRiZSc+PC9wYXRoPjxwYXRoIGQ9J000NDggNDE2aDE5MnYzMmgtMTkydi0zMnogbTAgMTYwaDM1MnYzMkg0NDh2LTMyeiBtMCAxNjBoMzUydjMySDQ0OHYtMzJ6JyBmaWxsPScjQUNCNEMwJz48L3BhdGg+PC9zdmc+);
}

/*重命名*/
.icon_rename {
    display: inline-block;
    background-image: url(@/assets/menu_icon.png);
    background-position: 0 -64px;
    background-size: auto !important;
    background-repeat: no-repeat;
    height: 16px;
    margin-right: 8px;
    width: 16px;
}

/*删除*/
.icon_del {
    color: #1890ff;
    display: inline-block;
    background-image: url(@/assets/menu_icon.png);
    background-position: 0 -80px;
    background-size: auto !important;
    background-repeat: no-repeat;
    height: 16px;
    margin-right: 8px;
}

/*属性*/
.icon_Stats {
    color: #1890ff;
}

/*粘贴*/
.icon_stickup {
    color: #1890ff;
    display: inline-block;
    background-image: url(@/assets/stickup.png);
    background-position: 0 0;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    height: 16px;
    margin-right: 8px;
}
</style>