useCenterHook

import { ref, reactive, computed } from ‘vue’;
import { useMenuStore } from ‘@/store/menu.js’;
import { useCenterStore } from ‘@/store/center.js’;
import { useFrameStore } from ‘@/store/frame.js’;
import { useRightNavStore } from ‘@/store/pinias.js’;
import uuid from ‘uuid/v1’;
export function useCenterHook() {
const state = reactive({
pageData: [], //云组态组件所有数据
compsList: [], // 当前页面渲染的组件
bodyVueMap: new Map(), //就是compsList中所有组件，包含容器中组件，方便查找
nowPage: null, //当前页面
echartMap: new Map(),
});
const setPageData = data => {
if (!data) return;
state.pageData = data;
};
const editPageData = (type, args) => {
switch (type) {
case ‘ADD’:
addPageSuccess(args);
break;
case ‘EDIT’: //不在需要
break;
case ‘DEL’:
delPageSuccess(args);
break;
case ‘GROUP’:
groupPageData();
break;
}
};
const addPageSuccess = args => {
const { id, type, comptsData } = args;
let pageObjt;
if (comptsData) {
pageObjt = comptsData;
} else {
pageObjt = {
id,
type,
pageCompts: [], //单页：存储组件列表，多页：存储每一个Tab页及其组件列表
};
// 当前页面类下
const menu = useMenuStore();
const temp = menu.pageList.find(item => item.id == id);
const { isShowMenuPage, themeProDialog } = temp;

		if (type === 'opage') {
			pageObjt = Object.assign({}, pageObjt, {
				bgUrl: {},
				table: [],
				logicGroup: [],
				isWinPage: isShowMenuPage,
				themePro: themeProDialog,
			});
		} else {
			//有一个默认页
			pageObjt.pageCompts.push({
				id: uuid().replace(/-/g, ''),
				name: '默认页面',
				bgUrl: {},
				table: [],
				logicGroup: [],
				components: [],
			});
		}
	}
	state.pageData.push(pageObjt);
};
const delPageSuccess = id => {
	const index = state.pageData.findIndex(item => item.id == id);
	if (index != -1) {
		state.pageData.splice(index, 1);
	}
	const menu = useMenuStore();
	// 删除的是当前页
	if (menu.pageId == id) {
		//清空选中id
		menu.setCurrentPageListItem(null);
	}
};
const groupPageData = () => {
	if (!state.nowPage) return;
	const { type } = state.nowPage;
	if (type == 'mpage') {
		const center = useCenterStore();
		const tempIndex = state.nowPage.pageCompts.findIndex(item => item.id == center.nowTabId);
		if (tempIndex == -1) return;
		state.nowPage.pageCompts[tempIndex].components = state.compsList;
	} else if (type == 'opage') {
		state.nowPage.pageCompts = state.compsList;
	}
};
//参数页面id和分页的tabId
const setCompsList = (pageId, nowTabId) => {
	const tempI = state.pageData.findIndex(e => e.id == pageId);
	if (tempI == -1) return;
	const page = state.pageData[tempI];
	if (!page) return;
	if (page && page.pageCompts && page.pageCompts[0] && page.pageCompts[0].components) {
		//  多页面
		const tempIndex = page.pageCompts.findIndex(item => item.id == nowTabId);
		if (tempIndex != -1) {
			state.compsList = page.pageCompts[tempIndex].components;
		}
	} else {
		//  单页面
		state.compsList = page.pageCompts || [];
	}
	// 排序compsList
	sortZindex(state.compsList);
	setBodyVueMap(state.compsList);
};

// 区间zindex重置
const intervalZindex = (data,startIndex,endIndex) => {
	

}
// 遍历重置zindex
const resetZindex = (data, startIndex) => {
	data.forEach(item => {
		startIndex--;
		item.vueData[`${item.model}_${item.type}`].gZindex = startIndex;
		if (item.type == 'group') {
			item.vueData[`${item.model}_${item.type}`].children.forEach(e => {
				startIndex--;
				e.vueData[`${e.model}_${e.type}`].gZindex = startIndex;
			});
		}
	});
};
// 排序
const sortZindex = data => {
	console.log('初始组件', data);
	data.sort((o1, o2) => {
		let z1 = o1.vueData[`${o1.model}_${o1.type}`].gZindex;
		let z2 = o2.vueData[`${o2.model}_${o2.type}`].gZindex;
		console.log('排序', o1, o2);
		return z2 - z1;
	});
};
//置顶,置底
const polesPositions = type => {
	const rightNav = useRightNavStore();
	const centerHook = useCenter();
	const { state } = useCenter();
	let i = type == 'zhiding' ? 1 : -1;
	let l = type == 'zhiding' ? 0 : state.compsList.length - 1;
	const tempEle = state.compsList[l];
	const maxGZindx = state.compsList[l].vueData[`${tempEle.model}_${tempEle.type}`].gZindex;
	const GZindxResult = maxGZindx > 0 ? maxGZindx + i : 0;
	const tempItem = rightNav.layerCurrentItem;
	rightNav.layerCurrentItem.vueData[`${tempItem.model}_${tempItem.type}`].gZindex = GZindxResult;
	console.log(555, GZindxResult);
	if (type == 'zhiding') {
		centerHook.zindexBottomHandler(state.compsList, rightNav.layerChecked);
	}
	if (type == 'zhidi') {
		centerHook.zindexTopHandler(state.compsList, rightNav.layerChecked);
	}
};
// 置底逻辑
const zindexBottomHandler = (data, id) => {
	const tempI = data.findIndex(item => item.id == id);
	if (tempI == -1) return;
	zIndexBottom(data, tempI, data.length);
};
// 置顶逻辑
const zindexTopHandler = (data, id) => {
	const tempI = data.findIndex(item => item.id == id);
	if (tempI == -1) return;
	zIndexTop(data, tempI, data.length);
};
// 置底
const zIndexBottom = (arr, index, length) => {
	if (index != 0) {
		//首先判断当前元素需要上移几个位置,置底移动到数组的第一位
		let moveNum = index - 0;
		//循环出需要一个一个上移的次数
		for (var i = 0; i < moveNum; i++) {
			swapArray(arr, index, index - 1);
			index--;
		}
	}
};
//置顶
const zIndexTop = (arr, index, length) => {
	if (index + 1 != length) {
		//首先判断当前元素需要上移几个位置,置底移动到数组的第一位
		let moveNum = length - 1 - index;
		//循环出需要一个一个上移的次数
		for (var i = 0; i < moveNum; i++) {
			swapArray(arr, index, index + 1);
			index++;
		}
	}
};
const swapArray = (arr, index1, index2) => {
	arr[index1] = arr.splice(index2, 1, arr[index1])[0];
	return arr;
};
// 向画布添加组件
// item当前组件 type为了判断是否是容器， id是容器id
const addCompsList = (item, hitCtn) => {
	if (!item) return;
	if (hitCtn && hitCtn.type == 'ctner') {
		//容器
		addCtnrComps(hitCtn.id, item, hitCtn);
	} else {
		// state.compsList.push(item);
		state.compsList.unshift(item);
	}
};
//往容器内部添加组件容器
const addCtnrComps = (id, data, hitCtn) => {
	const tempI = state.compsList.findIndex(item => item.id == id);
	if (tempI == -1 && state.compsList[tempI].ctnerId == 'ctner') return;
	const compItem = state.compsList[tempI];
	if (compItem.tabList) {
		// 有tabList
		compItem.tabList.forEach((item, index) => {
			if (item.id == data.tabID) {
				item.components.push(data);
			}
		});
	} else {
		const { vueData, type, model } = hitCtn;
		const { id, label } = vueData[`${model}_${type}`].nowTab;
		const obj = {
			components: [data],
			id,
			label,
		};
		compItem.tabList = [obj];
	}
};
// 删除组件
const delCompsList = (item, type, i) => {
	if (Object.prototype.toString.call(item) != '[object object]') {
		let index = state.compsList.findIndex(items => items.id === item);
		if (index == -1) return;
		state.compsList.splice(index, 1);
	} else {
		if (type == 'ctner') {
			// 容器
			let index = state.compsList.findIndex(items => items.id === item.depenID);
			let tab = state.compsList[index].tabList.find(tab => tab.id === item.tabID);
			tab.components.splice(i, 1);
		} else {
			let index = state.compsList.findIndex(items => items.id === item.id);
			if (index == -1) return;
			state.compsList.splice(index, 1);
		}
	}
};
const setBodyVueMap = data => {
	if (Array.isArray(data)) {
		//数组(初始化的时候)
		state.bodyVueMap.clear();
		data.forEach(item => {
			const { id, model, tabList, type, vueData } = item;
			const prop = `${model}_${type}`;
			state.bodyVueMap.set(id, item);
			if (tabList && tabList.length) {
				// 容器
				vueData[prop].tabList = tabList;
				vueData[prop].nowTab = tabList[0];
				tabList.forEach(e => {
					e.components.forEach(a => {
						a.depenID = item.id; // 容器id
						a.tabID = e.id; //容器tabId
						state.bodyVueMap.set(a.id, a);
					});
				});
			}
		});
	}
	if (Object.prototype.toString.call(data) == '[object Object]') {
		//对象(手动添加的时候)
		// 防止重复 map也不会重复
		if (state.bodyVueMap.get(data.id)) return;
		state.bodyVueMap.set(data.id, data);
	}
};
//所有页面组件数据的,就是pageData的map格式
const allCompsMap = computed(() => {
	const result = new Map();
	state.pageData.forEach(item => {
		result.set(item.id, item);
	});
	return result;
});

const setNowPage = data => {
	state.nowPage = data;
};
const addComNowPage = data => {
	state.nowPage.pageCompts.push({ ...data });
};
//初始化tabMenu数据
const initTabs = type => {
	const menu = useMenuStore();
	const center = useCenterStore();
	const pageId = menu.pageId;
	const dataItem = allCompsMap.value.get(pageId); //当前项

	if (type == 'mpage') {
		//多页面
		const tabId = dataItem.pageCompts[0].id;
		center.nowTabId = dataItem.pageCompts[0].id;
		center.setPageTabs(dataItem.pageCompts);
		setCompsList(pageId, tabId);
	} else {
		center.nowTabId = null;
		center.setPageTabs([]);
		setCompsList(pageId);
	}
};
// 切换页面逻辑
const changePage = newPage => {
	if (!newPage || !newPage.id) return;
	const menu = useMenuStore();
	const id = newPage.id;
	editPageData('GROUP');
	initTabs(newPage.type);
	setNowPage(allCompsMap.value.get(id)); // 当前页面数据
};

//初始化页面的时候
const initPage = () => {
	const menu = useMenuStore();
	const pageId = menu.pageId;
	const dataItem = allCompsMap.value.get(pageId); //当前项
	setNowPage(dataItem);
	initTabs(dataItem.type);
	initPageData();
};
//初始化页面时候的一些数据
const initPageData = () => {
	console.log('initPageData');
};
// 向页面中添加组件(包含组件) hitCtn容器数据
const addPageCompt = (compt, hitCtn) => {
	addCompsList(compt, hitCtn); //内部完成bodyVueMap逻辑
};
return {
	state,
	setPageData,
	setCompsList,
	setBodyVueMap,
	allCompsMap,
	setNowPage,
	addComNowPage,
	changePage,
	initPage,
	editPageData,
	delCompsList,
	addCompsList,
	addPageCompt,
	sortZindex,
	zindexBottomHandler,
	zindexTopHandler,
	zIndexBottom,
	polesPositions,
	resetZindex,
};

}

export const useCenter = (() => {
let centerHook;
return () => {
if (!centerHook) {
centerHook = useCenterHook();
return centerHook;
} else {
return centerHook;
}
};
})();