//#region src/components/PisellProcedure/utils/layoutRatio.ts
/**
* 布局比例工具函数
* @description 用于解析和计算内容区与信息区的布局比例
*/
/**
* 解析比例字符串
* @param ratio 比例字符串，如 '7:3'
* @returns [内容区比例, 信息区比例]
* @example
* parseLayoutRatio('7:3') // => [7, 3]
* parseLayoutRatio('6:4') // => [6, 4]
*/
const parseLayoutRatio = (ratio) => {
	if (!ratio || typeof ratio !== "string") return [7, 3];
	const parts = ratio.split(":");
	if (parts.length !== 2) return [7, 3];
	const content = Number(parts[0]);
	const sidebar = Number(parts[1]);
	if (isNaN(content) || isNaN(sidebar) || content <= 0 || sidebar <= 0) return [7, 3];
	return [content, sidebar];
};
/**
* 计算百分比
* @param ratio 比例字符串，如 '7:3'
* @returns { contentPercent, sidebarPercent }
* @example
* calculateRatioPercent('7:3') // => { contentPercent: 70, sidebarPercent: 30 }
*/
const calculateRatioPercent = (ratio) => {
	const [content, sidebar] = parseLayoutRatio(ratio);
	const total = content + sidebar;
	return {
		contentPercent: content / total * 100,
		sidebarPercent: sidebar / total * 100
	};
};
/**
* 生成 flex 比例样式
* @param ratio 比例字符串，如 '7:3'
* @param gap 间距（px）
* @returns { contentStyle, sidebarStyle }
*/
const generateRatioStyles = (ratio, gap = 16) => {
	const { contentPercent, sidebarPercent } = calculateRatioPercent(ratio);
	const sidebarWidth = `calc(${sidebarPercent}% - ${gap / 2}px)`;
	const sidebarFlex = `0 0 ${sidebarWidth}`;
	return {
		contentStyle: {
			flex: `0 0 calc(${contentPercent}% - ${gap / 2}px)`,
			maxWidth: `calc(${contentPercent}% - ${gap / 2}px)`
		},
		sidebarStyle: {
			"--sidebar-ratio-width": sidebarWidth,
			"--sidebar-ratio-max-width": sidebarWidth,
			"--sidebar-ratio-flex": sidebarFlex
		}
	};
};
//#endregion
export { generateRatioStyles };
