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: [], // All data of cloud configuration component
compsList: [], // The component of the current page rendering
bodyVueMap: new Map(), // Namely compsList All components in , Include components in container , Easy to find
nowPage: null, // Current page
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’: // No need
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: [], // Single page ： List of storage components , Multi page ： Store every Tab A list of pages and their components
};
// Under the current page class
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 {
			// There is a default page 
			pageObjt.pageCompts.push({
				id: uuid().replace(/-/g, ''),
				name: ' Default page ',
				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();
	//  What is deleted is the current page 
	if (menu.pageId == id) {
		// Clear selected 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;
	}
};
// Parameter page id And paginated 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) {
		//   Multi page 
		const tempIndex = page.pageCompts.findIndex(item => item.id == nowTabId);
		if (tempIndex != -1) {
			state.compsList = page.pageCompts[tempIndex].components;
		}
	} else {
		//   Single page 
		state.compsList = page.pageCompts || [];
	}
	//  Sort compsList
	sortZindex(state.compsList);
	setBodyVueMap(state.compsList);
};

//  Section zindex Reset 
const intervalZindex = (data,startIndex,endIndex) => {
	

}
//  Traversal reset 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;
			});
		}
	});
};
//  Sort 
const sortZindex = data => {
	console.log(' Initial components ', 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(' Sort ', o1, o2);
		return z2 - z1;
	});
};
// Roof placement , Bottom setting 
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);
	}
};
//  Bottom logic 
const zindexBottomHandler = (data, id) => {
	const tempI = data.findIndex(item => item.id == id);
	if (tempI == -1) return;
	zIndexBottom(data, tempI, data.length);
};
//  Top logic 
const zindexTopHandler = (data, id) => {
	const tempI = data.findIndex(item => item.id == id);
	if (tempI == -1) return;
	zIndexTop(data, tempI, data.length);
};
//  Bottom setting 
const zIndexBottom = (arr, index, length) => {
	if (index != 0) {
		// First, judge how many positions the current element needs to move up , Move the bottom to the first position of the array 
		let moveNum = index - 0;
		// The number of times the loop needs to be moved up one by one 
		for (var i = 0; i < moveNum; i++) {
			swapArray(arr, index, index - 1);
			index--;
		}
	}
};
// Roof placement 
const zIndexTop = (arr, index, length) => {
	if (index + 1 != length) {
		// First, judge how many positions the current element needs to move up , Move the bottom to the first position of the array 
		let moveNum = length - 1 - index;
		// The number of times the loop needs to be moved up one by one 
		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;
};
//  Add components to the canvas 
// item Current component  type In order to determine whether it is a container , id It's a container id
const addCompsList = (item, hitCtn) => {
	if (!item) return;
	if (hitCtn && hitCtn.type == 'ctner') {
		// Containers 
		addCtnrComps(hitCtn.id, item, hitCtn);
	} else {
		// state.compsList.push(item);
		state.compsList.unshift(item);
	}
};
// Add components to the inside of the container 
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) {
		//  Yes 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];
	}
};
//  Delete component 
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') {
			//  Containers 
			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)) {
		// Array ( When initializing )
		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) {
				//  Containers 
				vueData[prop].tabList = tabList;
				vueData[prop].nowTab = tabList[0];
				tabList.forEach(e => {
					e.components.forEach(a => {
						a.depenID = item.id; //  Containers id
						a.tabID = e.id; // Containers tabId
						state.bodyVueMap.set(a.id, a);
					});
				});
			}
		});
	}
	if (Object.prototype.toString.call(data) == '[object Object]') {
		// object ( When adding manually )
		//  Prevent duplication  map And it won't repeat 
		if (state.bodyVueMap.get(data.id)) return;
		state.bodyVueMap.set(data.id, data);
	}
};
// Of all page component data , Namely pageData Of map Format 
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 });
};
// initialization tabMenu data 
const initTabs = type => {
	const menu = useMenuStore();
	const center = useCenterStore();
	const pageId = menu.pageId;
	const dataItem = allCompsMap.value.get(pageId); // Current item 

	if (type == 'mpage') {
		// Multi page 
		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);
	}
};
//  Switch page logic 
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)); //  Current page data 
};

// When initializing the page 
const initPage = () => {
	const menu = useMenuStore();
	const pageId = menu.pageId;
	const dataItem = allCompsMap.value.get(pageId); // Current item 
	setNowPage(dataItem);
	initTabs(dataItem.type);
	initPageData();
};
// Some data when initializing the page 
const initPageData = () => {
	console.log('initPageData');
};
//  Add components to the page ( Contains the components ) hitCtn Container data 
const addPageCompt = (compt, hitCtn) => {
	addCompsList(compt, hitCtn); // Internal finish bodyVueMap Logic 
};
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;
}
};
})();