<template>
	<div>
		<el-tabs 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>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				// close:true,
			}
		},
		mounted() {

			
		},
		methods: {
	 handleTabsEdit(targetName, action) {
	 	if (action == 'add') { 
	 	this.$store.commit('setOpenedPageList', [{
	 		name: "主页",
	 		path: "/home/main"
	 	}])
	 	this.$router.push('/home/main');
	 } 
	 },
			tabClick(tab) {
				this.$router.push(tab.name);
			},
			removeTab(path) {
				// 				console.log(this.activePage.path)
			 		//	console.log(path)
				if (path === '/home/main') {
					return
				}
				let tabs = this.openedPageList;
				if (this.activePage.path === path) {
					//console.log(1111)
					tabs.forEach((tab, index) => {
						if (tab.path === path) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if (nextTab) {
								//console.log('nextTab.path'+nextTab.path)
								this.$router.push(nextTab.path)

							}
						}
					});
				}
				// console.log(this.openedPageList)
				this.$store.commit('removeTab', path)
			}

		},
		computed: {
			...mapState({
				openedPageList: state => state.tabsbar.openedPageList,
				activePage: state => state.tabsbar.activePage
			})
		}


	}
</script>
<style>
.el-tabs{
	background: white;
}
</style>
