<!-- 经典布局 -->
<template>
	<el-container class="layout">
		<el-header>
			<div class="header-lf">
				<div class="logo flx-center">
					<!-- <img src="@/assets/images/logo.svg" alt="logo" /> -->
					<img src="@/assets/images/login/china.png" style="margin: 0 15px" alt="logo" />
					<span>数字化政务监管平台</span>
				</div>
				<ToolBarLeft />
			</div>
			<ToolBarRight />
		</el-header>

		<div class="contain-section">
			<div class="contain-header">
				<div class="header-important" v-for="item in data['important']" :key="item.moduleId">
					<div class="header-item" @click="onChange(item)">
						<img :src="getImageUrl(item.moduleIconChecked)" class="imgItem" alt="logo" />
						<span>{{ item.moduleName }}</span>
					</div>
				</div>
			</div>
			<div class="safe" v-for="i in labelName" :key="i">
				<div class="labelName" v-if="globalStore.accountType !== 4 && globalStore.accountType !== 3">
					<el-icon><ArrowDown /></el-icon>
					<span>{{ i }}</span>
				</div>
				<div class="safe-contain">
					<div class="safe-item" v-for="item in data[i]" :key="item.moduleId">
						<div @click="onChange(item)">
							<img :src="getImageUrl(item.moduleIconChecked)" alt="logo" />
							<p>{{ item.moduleName }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</el-container>
</template>

<script setup lang="ts" name="governMentHome">
import { computed, onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
// import { GlobalStore } from "@/stores";
import { AuthStore } from "@/stores/modules/auth";
import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
import { getHomePage, getModuleList } from "@/api/modules/goverment";
import { getProjectPage } from "@/api/modules/project";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
import { GlobalStore } from "@/stores";
import { ElMessage } from "element-plus";

const router = useRouter();
const authStore = AuthStore();
const globalStore = GlobalStore();
const modulePath = ref("");

const data = ref({ important: [] });
const labelName = ref([]);

function getImageUrl(name: string) {
	return new URL(`../../assets/images/goverHome/${name}` + ".png", import.meta.url).href;
}

const onChange = async (val: string) => {
	// debugger;
	if (!val.modulePath) {
		ElMessage.error("没有添加菜单，请联系管理员");
	} else {
		globalStore.setPath(val.modulePath);

		await initDynamicRouter({ moduleId: val.moduleId });
		// modulePath.value = val.modulePath;
		// router.push(val.modulePath);

		globalStore.moduleId = val.moduleId;
		globalStore.moduleName = val.moduleName;
	}
};

// watch(
// 	() => modulePath.value,
// 	() => {
// 		console.log(11);
// 		router.push(modulePath.value);
// 	}
// );

onMounted(async () => {
	const res1 = await getHomePage();
	data.value = res1.result || {};
	const res = await getModuleList();
	labelName.value = res.result;
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
