<template>
	<div ref="app" :class="classObj">
		<van-config-provider :theme="theme" :theme-vars="themeVars">
			<router-view/>
		</van-config-provider>
	</div>
</template>

<script setup>
	import themeVars from "@/assets/styles/vant-light.module.scss";
	import {
		useWindowSize
	} from "@vueuse/core";
	import {
		toggleTheme,
		camelTo,
		setThemeColor
	} from "@/utils/index";
import { nextTick, provide } from "vue";

	const {
		proxy
	} = getCurrentInstance();
	const store = useStore();
	const route = useRoute();
	const router = useRouter();
	const currentInstance = getCurrentInstance();
	const classObj = computed(() => ({
		mobile: store.state.app.device == "mobile",
		desktop: store.state.app.device == "desktop",
		"theme-dark": store.state.settings.sideTheme == "theme-dark",
		"theme-light": store.state.settings.sideTheme == "theme-light",
	}));
	const theme = computed(() => store.state.settings.sideTheme.split("-")[1]);
	watch(
		() => store.state.data.tabbarActive,
		(newValue, oldValue) => {
			store.state.data.tabbarPageScrollTop[oldValue] = window.scrollY;
			// console.log(store.state.data.tabbarPageScrollTop)
		}
	);

	watch(
		() => router.currentRoute.value,
		(newValue, oldValue) => {
			// console.log(newValue);
			if (store.state.app.device == "mobile") {
				if (newValue.path != "/index" && oldValue.path == "/index") {
					// console.log("离开首页");
					// console.log(window.scrollY);
					store.state.data.tabbarPageScrollTop[store.state.data.tabbarActive] =
						window.scrollY;
					// console.log(store.state.data.tabbarPageScrollTop);
				}
			}
		}
	);

	const {
		width,
		height
	} = useWindowSize();

	const WIDTH = 992; // refer to Bootstrap's responsive design

	watchEffect(() => {
		if (width.value - 1 < WIDTH) {
			store.dispatch("app/toggleDevice", "mobile");
		} else {
			store.dispatch("app/toggleDevice", "desktop");
		}
	});

	toggleTheme(store.state.settings.sideTheme == "theme-dark" ? "dark" : "light");
	// localStorage.setItem("color-setting", JSON.stringify(obj));

	const initialTheme = () => {
		// localStorage.clear();

		const el = document.documentElement;
		let obj = JSON.parse(localStorage.getItem("color-setting"));
		//  console.log(obj);
		if (obj == null) {
			// el.style.setProperty("--el-menu-bg-color", "#304156");
			// el.style.setProperty("--el-menu-text-color", "#bfcbd9");

			// 自定义颜色

			// el.style.setProperty("--el-color-primary", "#F98F8FFF");
			// el.style.setProperty("--mix-color", "#F9DEDEFF");
			// el.style.setProperty("--el-menu-bg-color", "#EDC3C3FF");
			// el.style.setProperty("--el-menu-text-color", "#FFFFFFFF");
			// el.style.setProperty("--background-color", "rgb(245, 215, 215)");
			// el.style.setProperty("--el-bg-color-page", "#EDD7D7FF");
			// el.style.setProperty("--el-bg-color", "#F9CFCFFF");
			// el.style.setProperty("--el-bg-color-overlay", "#F9C7C7FF");
			// el.style.setProperty("--el-fill-color", "#F4E1E1FF");
			// el.style.setProperty("--el-fill-color-light", "#FBDBDBFF");
			// el.style.setProperty("--el-fill-color-lighter", "#FCE1E1FF");
			// el.style.setProperty("--el-fill-color-extra-light", "#F9EEEEFF");
			// el.style.setProperty("--el-fill-color-blank", "#F5C8C8FF");
			// el.style.setProperty("--el-text-color-primary", "#FFFFFFFF");
			// el.style.setProperty("--el-text-color-regular", "#FFFFFFFF");
			// el.style.setProperty("--el-text-color-secondary", "#FFFFFFFF");
			// el.style.setProperty("--el-text-color-placeholder", "#FFFFFFFF");
			// el.style.setProperty("--el-text-color-disabled", "#F4B9B9FF");
			// el.style.setProperty("--el-border-color-darker", "#F8DEDEFF");
			// el.style.setProperty("--el-border-color-dark", "#F8CDCDFF");
			// el.style.setProperty("--el-border-color", "#F1D7D7FF");
			// el.style.setProperty("--el-border-color-light", "#F8E4E4FF");
			// el.style.setProperty("--el-border-color-lighter", "#FCDFDFFF");
			// el.style.setProperty("--el-border-color-extra-light", "#FBC6C6FF");
			// el.style.setProperty("background-color", "rgb(245, 215, 215)");
			// store.dispatch("settings/changeSetting", { key: "theme", value: "#F98F8FFF", });
			// setThemeColor("#F98F8FFF", "#F9DEDEFF");

			// 自定义颜色

			// localStorage.setItem(
			//   "color-setting",
			//   '{"elColorPrimary":"#F40707","mixColor":"#F11010","elMenuBgColor":"#CD0D0D","elMenuTextColor":"#BC0202","backgroundColor":"rgb(214, 24, 24)","elBgColorPage":"#C40303","elBgColor":"#CB1616","elBgColorOverlay":"#DA1616","elFillColorDarker":"#C80A0A","elFillColorDark":"#C90B0B","elFillColor":"#D50D0D","elFillColorLight":"#8F0B0B","elFillColorLighter":"#710808","elFillColorExtraLight":"#C40F0F","elFillColorBlank":"#D60B0B","elMaskColorExtraLight":"#B70909","elTextColorPrimary":"#B10606","elTextColorRegular":"#B81414","elTextColorSecondary":"#D01313","elTextColorPlaceholder":"#AD0C0C","elTextColorDisabled":"#8B0E0E","elBorderColorDarker":"#C22121","elBorderColorDark":"#DA0C0C","elBorderColor":"#BC0202","elBorderColorLight":"#B30A0A","elBorderColorLighter":"#CD0D0D","elBorderColorExtraLight":"#E10909"}'
			// );
			// location.reload();
			return;
		}
		let keys = Object.keys(obj);
		keys.map((item) => {
			let key = camelTo(item, "-");
			let value = obj[item];
			el.style.setProperty("--" + key, value);
		});
		el.style.setProperty("background-color", obj["backgroundColor"]);
		if (obj["elColorPrimary"] != null) {
			store.dispatch("settings/changeSetting", {
				key: "theme",
				value: obj["elColorPrimary"],
			});
			if (obj["mixColor"] != null) {
				setThemeColor(obj["elColorPrimary"], obj["mixColor"]);
			}
		}
	};

	const initialData = () => {
		initialTheme();
		// console.log("APP");
	};
	initialData();
</script>


<style>
</style>