<template>
    <!-- 鼠标右键弹出的盒子 -->
    <!-- 【向下展开动画，坐标平移动画】二者只可得其一 -->
    <div class="right-box" :style="state.rightStyle" v-show="state.rightShow" tabindex="-1" @blur="right_closeMenu2()">
        <div class="right-box-2">
            <div @click="right_closeMenu(); right_f5()"><el-icon><el-icon-RefreshRight /></el-icon>刷新</div>
            <div @click="right_closeMenu(); right_close()"><el-icon><el-icon-Close /></el-icon>关闭</div>
            <div @click="right_closeMenu(); right_close_other()"><el-icon><el-icon-Close /></el-icon>关闭其它</div>
            <div @click="right_closeMenu(); right_close_all()"><el-icon><el-icon-Close /></el-icon>关闭所有</div>
            <div @click="right_closeMenu(); right_window_open()" v-if="state.rightTab && state.rightTab.url"><el-icon><el-icon-Plus /></el-icon>新窗口打开</div>
            <div @click="right_closeMenu2();"><el-icon><el-icon-Minus /></el-icon>取消</div>
        </div>
    </div>
</template>

<script setup name="com-right-menu">

import {ref, nextTick, reactive} from "vue";
import {useAppStore} from "../../store/app";
import {ElMessage} from "element-plus";
import mitt from "@/mitt";
const appStore = useAppStore();

// --------------- 所有状态
const state = reactive({
    rightShow: false, // 右键菜单是否正在显示
    rightTab: null, // 右键菜单正在操作的 tab
    rightStyle: {		// 右键菜单的 style 样式
        left: '0px',		// 坐标x
        top: '0px',			// 坐标y
        maxHeight: '0px'	// 右键菜单的最高高度 (控制是否展开)
    },
})


// --------------- 所有方法
// 展开右键菜单
const right_showMenu = function(tab, event) {
    state.rightTab = tab;	// 绑定操作tab
    const e = event || window.event;
    state.rightStyle.left = (e.clientX + 1) + 'px';	// 设置给坐标x
    state.rightStyle.top = e.clientY + 'px';		// 设置给坐标y
    state.rightShow = true;	// 显示右键菜单
    nextTick(function() {
        const foxHeight = document.querySelector('.right-box-2').offsetHeight;	// 应该展开多高
        state.rightStyle.maxHeight = foxHeight + 'px';	// 展开
        document.querySelector('.right-box').focus();		// 获得焦点,以被捕获失去焦点事件
    });
};

// 关闭右键菜单 - 立即关闭
const right_closeMenu = function() {
    state.rightStyle.maxHeight = '0px';
    state.rightShow = false;
};

// 关闭右键菜单 - 带动画折叠关闭 (失去焦点和点击取消时调用, 为什么不全部调用这个? 因为其它时候调用这个都太卡了)
const right_closeMenu2 = function() {
    state.rightStyle.maxHeight = '0px';
    // this.rightShow = false;
};

// 右键 - 刷新
const right_f5 = function() {
    appStore.f5Tab(state.rightTab);
};

// 右键 - 新窗口打开
const right_window_open = function() {
    appStore.newWinTab(state.rightTab);
};

// 右键 - 关闭
const right_close = function() {
    if(state.rightTab === appStore.homeTab){
        return ElMessage({
            dangerouslyUseHTMLString: true,
            message: '<b>这个不能关闭哦</b>',
            type: 'warning',
            showClose: true,
        });
    }
    appStore.closeTab(state.rightTab);
};

// 右键 - 关闭其它
const right_close_other = function() {
    // 先滑到最左边
    mitt.emit('setScroll', 0);
    // 递归删除
    let i = 0;
    const deleteFn = function() {
        // 如果已经遍历全部
        if(i >= appStore.tabList.length) {
            return;
        }
        // 如果在白名单,i++继续遍历, 如果不是,递归删除
        const tab = appStore.tabList[i];
        if(tab === appStore.homeTab || tab === state.rightTab){
            i++;
            deleteFn();
        } else {
            appStore.closeTab(tab, function() {
                deleteFn();
            });
        }
    }.bind(this);
    deleteFn();
};

// 右键 - 关闭所有
const right_close_all = function() {
    // 先滑到最左边
    mitt.emit('setScroll', 0);
    // 递归删除
    let i = 0;
    const deleteFn = function() {
    // 如果已经遍历全部
        if(i >= appStore.tabList.length) {
            return;
        }
        // 如果在白名单,i++继续遍历, 如果不是,递归删除
        const tab = appStore.tabList[i];
        if(tab === appStore.homeTab){
            i++;
            deleteFn();
        } else {
            appStore.closeTab(tab, function() {
                deleteFn();
            });
        }
    };
    deleteFn();
};

// 所有开放属性、方法
defineExpose({right_showMenu});

</script>

<style scoped>
	
	/* 右键菜单 样式 */
	.right-box {
		position: fixed;
		z-index: 2147483647;
		transition: max-height 0.2s;
		outline:none;
		max-height: 0px;
		overflow: hidden;
		box-shadow: 1px 1px 2px #000;
	}
	.right-box-2{font-size: 0.8em; padding: 0.5em 0; border: 1px #aaa solid; border-radius: 1px; background-color: #FFF;}
	.right-box-2>div {line-height: 2.2em; padding-left: 0.8em; padding-right: 1.4em; cursor: pointer; white-space: nowrap;}
	.right-box-2>div:hover {background-color: #ddd;color: #2D8CF0;}
	.right-box-2>div i{ margin-right: 5px; transform: translate(0, 1px)}
</style>
