<template>
	<div>
		<div class="tags-container" ref="tagsContainer">
			<a
				@click="handleLeftView"
				class="tags-operate left"
				href="javascript:void(0);"
				title="左翻"
			>
				<i class="iconfont icon-zuo-zhankaigengduo"></i>
			</a>
			<div class="tags-wrap" ref="tagsWrap">
				<ul class="tags" ref="tags">
					<li
						:class="{ actived: tag.fullPath == path }"
						:key="idx"
						@click.stop="handleChooseTag(tag)"
						v-for="(tag, idx) in tags"
					>
						<span>{{ tag.meta.title }}</span>
						<span
							@click.stop="handleCloseTag(idx)"
							class="tag-close"
						>
							<i
								class="iconfont icon-guanbi"
								v-if="idx !== 0"
							></i>
						</span>
					</li>
				</ul>
			</div>
			<a
				@click="handleRightView"
				class="tags-operate right"
				href="javascript:void(0);"
				title="右翻"
			>
				<i class="iconfont icon-you-zhankaigengduo"></i>
			</a>
			<a
				@click="mytest"
				class="tags-btn"
				href="javascript:void(0);"
				title="关闭所有页签"
			>
				<i class="iconfont icon-guanbi1 closebtn"></i>
			</a>
			<a
				@click="synchroData"
				class="tags-sync"
				href="javascript:void(0);"
				title="数据同步"
			>
				<i class="iconfont icon-shuaxin syncDataBtn"></i>
			</a>
		</div>
	</div>
</template>
<style lang="scss">
.tags-container {
	width: 100%;
	height: 30px;
	padding-left: 6px;
	background: #fff;
	box-sizing: border-box;
}

.tags-container .tags-operate {
	display: inline-block;
	vertical-align: middle;
	font-size: 11px;
	color: #606266;
	width: 34px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	margin-left: 2px;
}

.tags-container .tags-operate .icon-you-zhankaigengduo::before,
.tags-container .tags-operate .icon-zuo-zhankaigengduo::before {
	font-size: 18px !important;
}

.tags-container .tags-wrap {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: calc(100% - 140px);
	height: 30px;
	line-height: 30px;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
}

.tags-container .tags {
	position: absolute;
	top: 0;
	left: 0;
	list-style: none;
	padding: 0;
	margin: 0;
}

.tags-container .tags li:hover .tag-close {
	display: block;
	right: 7%;
	top: 45%;
}

.tags-container .tags li {
	position: relative;
	display: inline-block;
	height: 100%;
	font-size: 12px;
	color: #606266;
	padding: 0 34px 0 16px;
	cursor: pointer;
}

.tags-container .tags li .tag-close {
	display: none;
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
}

.tags-container .tags li.actived {
	background-color: #eaeef1;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.tags-container .tags li.actived .tag-close {
	display: block;
	top: 50%;
	right: 8px;
}

.tags-container .tags li:not(:last-child)::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	height: 18px;
	border-left: 1px solid #cbcfd3;
}

.actived span:nth-child(1) {
	padding-right: 8px;
}

.tags-container .tags-btn {
	position: absolute;
	right: 42px;
	top: 42px;
	padding: 2px 6px !important;
}

.tags-container .tags-sync {
	position: absolute;
	right: 15px;
	top: 42px;
	padding: 2px 6px !important;
}

.closebtn,
.syncDataBtn {
	font-size: 18px !important;
	display: block;
	margin-top: 3px;
	color: gray;
}
</style>
<script>
import { mapActions, mapState } from 'vuex';
export default {
	inject: ['reload'],
	name: 'Labels',
	data() {
		return {
			currentTagIndex: 0,
			leftWithTags: 0, // 标签栏left值
			positionLeftLogs: [],
			path: this.$route.fullPath,
		};
	},
	computed: {
		...mapState({
			tags: (state) =>
				JSON.stringify(state) !== '{}' ? state.topNavTag.tags : null,
		}),
	},
	watch: {
		// 监听路由变化
		$route(to, from) {
			// console.log('to.fullPath',to.fullPath)
			this.path = to.fullPath;
			// 计算标签栏的初始left
			this.initTagsLeftPos();
		},
	},
	mounted() {
		this.currentTagIndex = this.tags.length - 1;
		// 计算标签栏的初始left
		this.initTagsLeftPos();
		// console.log('mounted init')
	},
	methods: {
		...mapActions({
			// 关闭标签及页面
			handleCloseTag: 'topNavTag/removeNavTag',
			// 关闭所有标签及页面
			handleCloseAllTag: 'topNavTag/removeAllNavTag',
			deleteUnit: 'storeData/deleteUnit',
			deleteRecondtion: 'storeData/deleteRecondtion',
			deleteSettletype: 'storeData/deleteSettletype',
			deleteDcurrency: 'storeData/deleteDcurrency',
			deleteRateType: 'storeData/deleteRateType',
			deleteTaxRate: 'storeData/deleteTaxRate',
			deleteCustomer: 'storeData/deleteCustomer',
			deletePaymentTerm: 'storeData/deletePaymentTerm',
			deleteSupplierSelect: 'storeData/deleteSupplierSelect',
			deleteWarehouseAll: 'storeData/deleteWarehouseAll',
			deleteEnumType: 'storeData/deleteEnumType',
			deleteStatusType: 'storeData/deleteStatusType',
			deleteStatusGetType: 'storeData/deleteStatusGetType',
			deleteInStockType: 'storeData/deleteInStockType',
			deleteReturnMatType: 'storeData/deleteReturnMatType',
			deleteStktranStatus: 'storeData/deleteStktranStatus',
			deleteStktransInst: 'storeData/deleteStktransInst',
			deleteStkdirecttrStatus: 'storeData/deleteStkdirecttrStatus',
			deleteBomMaterilasObj: 'storeData/deleteBomMaterilasObj',
			deleteListGetStatus: 'storeData/deleteListGetStatus',
			deleteDicSale: 'storeData/deleteDicSale',
			deleteDicRetrunOrder: 'storeData/deleteDicRetrunOrder',
			deletePurOrderStatus: 'storeData/deletePurOrderStatus',
			deleteDicPurOrder: 'storeData/deleteDicPurOrder',
			deleteDicOrgani: 'storeData/deleteDicOrgani',
			deleteDicPurInstock: 'storeData/deleteDicPurInstock',
			deleteDicPurReturn: 'storeData/deleteDicPurReturn',
			deleteDicStktrOut: 'storeData/deleteDicStktrOut',
			deleteDicStktrInst: 'storeData/deleteDicStktrInst',
			deleteDicStkdirFers: 'storeData/deleteDicStkdirFers',
			deleteGetAllUserList: 'storeData/deleteGetAllUserList',
			deleteAll: 'examine/deleteAll',
			//deleteExamine: 'storeData/deleteExamine',
			deleteStaffAllList: 'examine/deleteStaffAllList',
			setAllUnit: 'storeData/setAllUnit',
			setTaxRate: 'storeData/setTaxRate',
		}),

		mytest() {
			this.handleCloseAllTag();
			this.$refs.tags.style.left = 0;
		},
		// ljmstroe清空
		clearnstore() {
			if (this.$store.state && this.$store.state.storeData) {
				this.$store.state.storeData.infoStatus = {}; //生产基础信息数据
				this.$store.state.storeData.infoStatusww = {}; // 委外基础信息数据
				this.$store.state.storeData.infoStatusck = {}; // 销售出库基础信息数据
				this.$store.state.storeData.infoNoticeStatus = {}; // 通知基础信息数据
				this.$store.state.storeData.infockStatus = {}; // 通知基础信息数据
				this.$store.state.storeData.customerlist = []; // 客户数据
			}
		},
		// Calibration() {
		// 	console.log(
		// 		this.$store.state.org.orgId,
		// 		'=============this.$store.state.storeData==========='
		// 	);
		// 	this.$http
		// 		.post('Public/Calibration', {
		// 			orgId: this.$store.state.org.orgId,
		// 			materialId: null,
		// 		})
		// 		.then((res) => {
		// 			console.log(res);
		// 		});
		// },
		synchroData() {
			this.$http.get('SysConfig/CacheClear').then((res) => {
				if (res.status == 200) {
					this.$message.success({
						message: '数据同步成功!',
						showClose: true,
					});
					this.deleteUnit();
					this.deleteRecondtion();
					this.deleteSettletype();
					this.deleteDcurrency();
					this.deleteRateType();
					this.deleteTaxRate();
					this.deleteCustomer();
					this.deletePaymentTerm();
					this.deleteSupplierSelect();
					this.deleteWarehouseAll();
					this.deleteEnumType();
					this.deleteStatusType();
					this.deleteStatusGetType();
					this.deleteInStockType();
					this.deleteReturnMatType();
					this.deleteStktranStatus();
					this.deleteStktransInst();
					this.deleteStkdirecttrStatus();
					this.deleteBomMaterilasObj();
					this.deleteListGetStatus();
					this.deleteDicSale();
					this.deleteDicRetrunOrder();
					this.deletePurOrderStatus();
					this.deleteDicPurOrder();
					this.deleteDicOrgani();
					this.deleteDicPurInstock();
					this.deleteDicPurReturn();
					this.deleteDicStktrOut();
					this.deleteDicStktrInst();
					this.deleteDicStkdirFers();
					this.deleteGetAllUserList();
					this.deleteAll();
					// this.deleteExamine();
					this.deleteStaffAllList();
					// this.Calibration();
					this.clearnstore();
					this.reload();
				} else {
					this.$message.error({
						message: '数据同步失败!',
						showClose: true,
					});
				}
			});
		},
		// 初始化顶部标签栏left值
		initTagsLeftPos() {
			const leftWithTags =
				this.$refs.tags.offsetWidth - this.$refs.tagsWrap.offsetWidth;
			if (leftWithTags > 0) {
				this.positionLeftLogs.push(-leftWithTags);
				this.$refs.tags.style.left = -leftWithTags + 'px';
			}
		},
		// 标签左翻
		handleLeftView(event) {
			let positionLeft = 0;
			const tagsPositionLeft = Math.abs(
				this.$refs.tags.getBoundingClientRect().left
			); // 标签栏的left
			const parentPaddingLeft = parseInt(
				window
					.getComputedStyle(this.$refs.tagsContainer)
					.paddingLeft.replace('px', '')
			); // 标签栏父级padding left
			const leftBtnWidth = event.currentTarget.offsetWidth; // 左翻按钮宽度
			const scrollLeft =
				tagsPositionLeft - (parentPaddingLeft + leftBtnWidth);
			for (let i = 0; i <= this.$refs.tags.children.length; i++) {
				const itemWidth = this.$refs.tags.children[i].offsetWidth;
				positionLeft += itemWidth;
				if (scrollLeft <= positionLeft) {
					positionLeft -= itemWidth;
					positionLeft = -positionLeft;
					break;
				}
			}
			if (this.positionLeftLogs[this.positionLeftLogs.length - 1] != 0) {
				this.positionLeftLogs.push(positionLeft);
			}
			this.$refs.tags.style.left = positionLeft + 'px';
		},
		// 标签右翻
		handleRightView() {
			if (this.positionLeftLogs.length > 1) {
				this.positionLeftLogs.pop();
			}
			const positionLeft = this.positionLeftLogs.pop();
			if (this.positionLeftLogs.length == 0) {
				this.positionLeftLogs.push(positionLeft);
			}
			this.$refs.tags.style.left = positionLeft + 'px';
		},

		// 页面标签点击事件
		handleChooseTag(tag) {
			this.$router.push(tag);
		},
	},
};
</script>
