<template>
	<div style="background-color: #FFFFFF;">
		<el-tabs v-if="navType == 'tab'" v-model="activePage.path" type="card" @tab-click="tabClick"
			@tab-remove="removeTab" addable @edit="handleTabsEdit">
			<el-tab-pane v-for="item in openedPageList" :closable="true" :key="item.id" :label="item.name"
				:name="item.path">
			</el-tab-pane>
		</el-tabs>
		<div v-else class="menu-tabbar">
			<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container"
				@wheel.native.prevent="handleScroll"> 
				<span v-for="item in openedPageList" :key="item.id" class="menu-tags">
					<el-tag v-if="item.path == activePage.path" effect="dark" closable @close="handleClose(item)"
						@click="handleClick(item)" @contextmenu.prevent.native="openMenu(item,$event)">
						{{item.name}}
					</el-tag>
					<el-tag v-else effect="plain" closable @close="handleClose(item)" @click="handleClick(item)"
						@contextmenu.prevent.native="openMenu(item,$event)">
						{{item.name}}
					</el-tag>
				</span>
				<!-- <el-tag class="menu-tags-close"  type="danger" @click="handleCloseAll(item)">关闭全部</el-tag> -->
			</el-scrollbar>
			<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
				<!--   <li @click="refreshSelectedTag(selectedTag)">Refresh</li>
			  <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li> -->
				<li @click="closeTag"><el-icon><Close /></el-icon> 关闭标签</li>
				<li @click="closeLeftTags"><el-icon><ArrowLeft /></el-icon> 关闭左侧</li>
				<li @click="closeRightTags"><el-icon><ArrowRight /></el-icon> 关闭右侧</li>
				<li @click="closeOthersTags"><el-icon><Minus /></el-icon> 关闭其他</li>
				<li @click="handleCloseAll"><el-icon><Delete /></el-icon> 关闭所有</li>
			</ul> 
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		onBeforeMount,
		computed,
		watch,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	const instance = getCurrentInstance()
	import {
		useTabsBarStore
	} from "@/stores/tabsbar"
	const tabsBar = useTabsBarStore()


	const openedPageList = computed(() => tabsBar.openedPageList)
	const activePage = computed(() => tabsBar.activePage)
	const navType = computed(() => tabsBar.navType)

 
	const top = ref(0)
	const left = ref(0)
	const visible = ref(false)
	watch(visible, (newValue, oldValue) => {
		if (newValue) {
			document.body.addEventListener('click', closeMenu)
		} else {
			document.body.removeEventListener('click', closeMenu)
		}
	})

	const openMenu = (tag, e) => { 
		const menuMinWidth = 105
		const offsetLeft = proxy.$el.getBoundingClientRect().left // container margin left
		const offsetWidth = proxy.$el.offsetWidth // container width
		const maxLeft = offsetWidth - menuMinWidth // left boundary
		const leftTemp = e.clientX - offsetLeft + 200 // 15: margin right

		if (leftTemp > maxLeft) {
			left.value = maxLeft
		} else {
			left.value = leftTemp
		}

		top.value = e.clientY + 10
		visible.value = true
		selectedTag.value = tag
	}

	const closeMenu = () => {
		visible.value = false
	}

	const scrollContainer = ref(null)
	const scrollWrapper = computed(() => scrollContainer.value.$refs.wrap)
	const handleScroll = (e) => {
		const eventDelta = e.wheelDelta || -e.deltaY * 40
		const $scrollWrapper = scrollWrapper.value
		$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
		visible.value = false
	}

	const selectedTag = ref({})

	const closeTag = () => {
		handleClose(selectedTag.value)
	}
	const handleClose = (item) => {
		console.log(JSON.stringify(item))
		var path = item.path
		if (path === '/home/main' || path === '/main') {
			return
		}
		let tabs = openedPageList.value;
		if (activePage.value.path === path) {
			tabs.forEach((tab, index) => {
				if (tab.path === path) {
					let nextTab = tabs[index - 1] || tabs[index + 1];
					if (nextTab) {
						proxy.$router.push({
							path: nextTab.path
						})
					}
				}
			});
		}
		tabsBar.removeTab(path)
		visible.value = false
	}
	const closeOthersTags = () => {
		tabsBar.setOpenedPageList([{
				name: "主页",
				path: "/main"
			},
			{
				name: selectedTag.value.name,
				path: selectedTag.value.path
			}
		])
		proxy.$router.push({
			path: selectedTag.value.path
		})
		visible.value = false
	}


	const closeLeftTags = () => {
		let tabs =  openedPageList.value;
		var removeTabs = []
		for (var tab of tabs) {
			if (tab.path == '/main' || tab.path == '/main') {
				continue
			}
			if (tab.path == selectedTag.value.path) {
				break
			}
			removeTabs.push(tab)
		}
		for (var tab of removeTabs) {
			tabsBar.removeTab(tab.path)
		}
		proxy.$router.push({
			path: selectedTag.value.path
		})
		visible.value = false

	}
	const closeRightTags = () => {
		let tabs = openedPageList.value;
		var removeTabs = []
		var removeFlag = false
		for (var tab of tabs) {
			if (tab.path == '/main') {
				continue
			}
			if (tab.path == selectedTag.value.path) {
				removeFlag = true
				continue
			}
			if (removeFlag) {
				removeTabs.push(tab)
			}
		}
		for (var tab of removeTabs) {
			tabsBar.removeTab(tab.path)
		}
		proxy.$router.push({
			path: selectedTag.value.path
		})
		visible.value = false
	}



	const handleCloseAll = () => {
		tabsBar.setOpenedPageList([{
			name: "主页",
			path: "/main"
		}])
		proxy.$router.push({
			path: '/main'
		})
		visible.value = false
	}



	const handleClick = (item) => {
		proxy.$router.push({
			path: item.path
		})
	}
 
	const handleTabsEdit = (item) => {
		console.log("item:" + item)
	}
	const tabClick = (tab) => {
		console.log("tab:" + tab)
	}
	const removeTab = (path) => {
		console.log("path:" + path)
	}
 
</script>
<style lang="scss" scoped>
	.menu-tabbar {
		padding: 5px 5px 5px 10px;
		display: flex;
		align-items: center;
	}

	.menu-tags {
		margin: 3px 3px 0px 3px;
	}

	.menu-tags-close {
		margin: 3px 3px 0px 3px;
		margin-left: auto;
	}


	.scroll-container {
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		width: 100%;

	}


	.contextmenu {
		margin: 0;
		background: #fff;
		z-index: 3000;
		position: absolute;
		list-style-type: none;
		padding: 5px 0;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 400;
		color: #333;
		box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);

		li {
			margin: 0;
			padding: 7px 16px;
			cursor: pointer;

			&:hover {
				background: #eee;
			}
		}
	}
</style>