<template>
	<section>
		<el-col :span="24" class="tags-center" v-if="dynamicTags.length>0">
			<i class="fa fa-backward pl10 pr10 tab-text zx1 bgwh" aria-hidden="true" @click="leftmove"/>
			<div class="dis-flex ac calcw" style="overflow-x:auto">
				<div class="dis-flex" :style="{width: dynamicTags.length * 120 + 'px','margin-left': xxx * 110 + 'px',flex:'none'}">
					<div :class="tag.type?'tab-text':'tab-text g30'" v-for="tag in dynamicTags" :key="tag.name" @click="changePage(tag)">{{tag.name}}<i class="el-icon-close pl2" @click.stop="handleCloseTag(tag)"/></div>
				</div>
			</div>
			<div style="width:196px">
				<i class="fa fa-forward tab-text border-l" aria-hidden="true" @click="rightmove"/>
				<el-dropdown trigger="hover" class="tab-text f12">
					<span class="el-dropdown-link userinfo-inner">
						<span>页面标签</span>
						<i class="el-icon-caret-bottom el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
							<el-dropdown-item @click.native="closeAllTag"><i class="el-icon-circle-close"/>关闭全部标签</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<span class="p10 tag-color" @click="refresh">刷新<i class="el-icon-refresh pl5"/></span>
			</div>
		</el-col>
		<div class="cl">
		</div>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				activeMenu:'',
				getCurSide:[],
				path:'',
				xxx:0
			}
		},
		inject: ['reload'],
		computed:{
			dynamicTags(){
				return this.$store.state.global.dynamicTags
			}
		},
		methods: {
			leftmove() {
					if (this.xxx < 0) {
							this.xxx += 1;
					}
			},
			rightmove() {
					if (this.xxx > -(this.dynamicTags.length + this.xxx)) {
							this.xxx -= 1;
					}
			},
			refresh () {
				this.reload()
			},
			changePage(tag){
				this.dynamicTags.map((v)=>{
					this.$set(v,'type','info')
					if(tag.name===v.name){
						this.$set(v,'type','')
					}
				})
				this.$router.push(tag.path)
			},
			handleCloseTag(tag) {
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},
			closeAllTag(){
				this.$store.commit('getTopMenu', []);
				this.$store.commit('getTopMenu', [{name: '首页',path: '/index/index',type:''}]);
				this.$router.push({name:'index'})
			}
		}
	}
</script>
<style scoped lang="less">
	.tags-center{
		min-width: 1200px;
		text-align: center;
		cursor: pointer;
		height:32px;
		background:rgba(255,255,255,1);
		// box-shadow:0px 1px 4px 0px rgba(0,21,41,0.12);
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding-left: 15px;
		.el-tag + .el-tag {
			margin-left: 10px;
			cursor: pointer;
		}
		.border-l{
			border-left: 1px solid #E5E5E5;
		}
	}
	.tab-text{
		border-right: 1px solid #E5E5E5;
		height: 30px;
		line-height: 32px;
		padding: 0 10px;
		color: #909399
	}
	.calcw{
		// width:calc(100%-193px)
		width: calc(100% - 223px);
	}
	.pl2{padding-left: 2px}
</style>