import { computed, getCurrentInstance, type StyleValue } from "vue";
import { parseRpx } from "/@/cool/utils";
import { fromPairs } from "lodash-es";

const styles = [
	{
		key: "padding",
		rpx: true,
	},
	{
		key: "margin",
		rpx: true,
	},
	{
		key: "height",
		rpx: true,
	},
	{
		key: "width",
		rpx: true,
	},
	{
		key: "font-size",
		rpx: true,
	},
	{
		key: "border-radius",
		alias: ["radius"],
		rpx: true,
	},
	{
		key: "background-color",
	},
	{
		key: "background",
	},
	{
		key: "custom-style",
	},
];

export function useStyle(data: StyleValue = {}) {
	// 当前组件实例
	const instance = getCurrentInstance();

	// 基础样式
	const baseStyle = computed(() => {
		return fromPairs(
			styles
				.map((e) => {
					// keys
					const keys = [e.key, ...(e.alias || [])];

					// val
					const val = keys
						.map((k) => {
							// 标签值
							const a = instance?.proxy?.$attrs[k];

							// 默认值
							const b = (data as any)[k];

							// 判定值
							return a !== undefined ? a : b;
						})
						.find((e) => e !== undefined);

					// 是否需要 rpx 解析
					return [e.key, e.rpx ? parseRpx(val) : val];
				})
				// 过滤空值
				.filter((e) => e[1] !== undefined),
		);
	});

	return {
		baseStyle,
		parseRpx,
	};
}