<template>
	<div class="tabs">
		<el-tabs size="mini" type="border-card" :value="$route.path" @tab-click="tabClick" @tab-remove='tabClose'>
			<el-tab-pane :closable="item.path!='/home'?true:false" v-for="(item, index) in TabsData" :key="item.path"
				:label="item.title" :name="item.path">
				{{item.content}}
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				TabsData: this.$store.state.tabList
			}
		},
		methods: {
			tabClick(e) {//点击当前tabs切换路由
				if (e.name != this.$route.path) {
					this.$router.push(e.name)
				}
			},
			tabClose(e) {
				this.$store.commit('delTab', e)//删除tab
				this.$store.commit('addinclude', e)//删除当前的这个缓存界面
				if(e===this.$route.path){//删除了当前的这个/如果不是当前的tabs,则选择的是当前的abs不变
					this.$router.replace(this.TabsData[this.TabsData.length-1].path)
				}
			},
		},

	}
</script>

<style lang="scss">
	.tabs {
		overflow: hidden;
		user-select: none;
		.el-tabs__content {
			display: none;
		}

		.el-tabs--border-card>.el-tabs__header {
			background-color: #fff;
			border-bottom: none;
			margin: 0;
		}

		.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
			color: #fff;
			background-color: #409EFF;
			border-right-color: none;
			border-left-color: none;
		}
		
		.el-tabs--border-card>.el-tabs__header .el-tabs__item {
			border: 1px solid #DCDFE6;
			margin-right: 10px;
			margin-top: 0;
		}
		.el-tabs--border-card{
			border-top: none;
			border-right: none;
		}
	}
</style>
