import router from '@/router';
const state = {
	tags: [
		// 默认打开路由标签
		{
			path: '/index',
			fullPath: '/index',
			name: 'Index',
			meta: { title: '首页' },
			query: {},
		},
	], // 标签
	keepAliveIncludes: ['Index'],
};

const mutations = {
	// 新增标签
	ADD_NAV_TAG: (state, route) => {
		state.tags.push(route);
		if (state.keepAliveIncludes) {
			if (!state.keepAliveIncludes.some((it) => it == route.name)) {
				state.keepAliveIncludes.push(route.name);
			}
		}
	},

	// 修改标签名
	EDIT_META_TITLE: (state, obj) => {
		state.tags[obj.ind] = obj.cont;
	},

	// 替换标签
	REPLACE_NAV_TAG: (state, route) => {
		const index = state.tags.findIndex(
			(it) => it.fullPath === route.fullPath
		);
		// 标签应用修改后的
		route.meta.title = state.tags[index].meta.title;
		state.tags.splice(index, 1, route);
	},

	// 删除标签
	RM_NAV_TAG: (state, index) => {
		const route = state.tags[index];
		if (
			route &&
			state.tags.filter((it) => it.name == route.name).length <= 1
		) {
			state.keepAliveIncludes = state.keepAliveIncludes.filter(
				(it, i) => {
					return it != route.name;
				}
			);
		}
		state.tags = state.tags.filter((it, i) => {
			return i !== index || it.name === 'Index';
		});
	},

	// 删除所有标签
	RM_NAV_ALLTAG: (state, index) => {
		state.tags = [
			{
				path: '/index',
				fullPath: '/index',
				name: 'Index',
				meta: { title: '首页' },
				query: {},
			},
		];
		state.keepAliveIncludes = ['Index'];
	},

	// 重命名标签名称
	RENAME_NAV_TAG: (state, [index, title]) => {
		state.tags[index].meta.title = title;
	},
};

// 不需要加载数据的路由
let unneedLoadDataRoutes = [];

const actions = {
	// 新增标签
	addNavTag: (context, route) => {
		// 跳转至新打开页面
		if (route.name == '404') {
			return false;
		}
		const tag = {
			path: route.path,
			fullPath: route.fullPath,
			name: route.name,
			meta: route.meta,
			query: route.query,
		};
		if (!context.state.tags.some((it) => it.fullPath === route.fullPath)) {
			// 标签栏没有，新增页面标签
			context.commit('ADD_NAV_TAG', tag);
		} else {
			// 标签栏有，替换标签
			context.commit('REPLACE_NAV_TAG', tag);
		}
		// console.log(route.matched, '====route.matched===');
		// 为组件增加执行钩子，所有数据请求在该钩子函数下调用 （推荐方案）
		// 解决keepalive多页签情况下，同组件不同参数中数据请求回调
		Object.defineProperty(
			route.matched[route.matched.length - 1].instances,
			'default',
			{
				configurable: true,
				set(target) {
					if (target) {
						if (
							!unneedLoadDataRoutes.some(
								(it) => it == route.fullPath
							)
						) {
							typeof target.$options.routeMounted == 'function' &&
								target.$options.routeMounted.call(
									target,
									route
								);
							unneedLoadDataRoutes.push(route.fullPath);
						}
					}
				},
			}
		);
	},

	// 修改标签
	editMetaTitle(context, obj) {
		context.commit('EDIT_META_TITLE', obj);
	},

	// 删除标签
	removeNavTag: (context, index) => {
		let nextIndex = index - 1;
		if (context.state.tags.length - 1 > index) {
			nextIndex = index + 1;
		}
		// 最后一个页面标签不允许删除
		if (nextIndex === -1) return false;
		unneedLoadDataRoutes = unneedLoadDataRoutes.filter(
			(it) => it != context.state.tags[index].fullPath
		);
		router.push(context.state.tags[nextIndex]);
		context.commit('RM_NAV_TAG', index);
	},

	// 删除所有标签
	removeAllNavTag: (context, index) => {
		router.push(context.state.tags[0]);
		context.commit('RM_NAV_ALLTAG');
	},

	// 重名称标签
	rename: (context, title) => {
		let _idx = context.state.tags.findIndex(
			(it) => it.fullPath == router.currentRoute._value.fullPath
		);
		if (_idx >= 0) {
			context.commit('RENAME_NAV_TAG', [_idx, title]);
		}
	},

	// 关闭标签页
	close: (context) => {
		let _idx = context.state.tags.findIndex(
			(it) => it.fullPath == router.currentRoute._value.fullPath
		);
		if (_idx >= 0) {
			context.dispatch('removeNavTag', _idx);
		}
	},
};

export default {
	namespaced: true,
	state,
	mutations,
	actions,
};
