<template>
	<el-main class="layout-main"
					 :style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`">
		<el-scrollbar ref="layoutMainScrollbarRef" class="layout-main-scroll layout-backtop-header-fixed"
									wrap-class="layout-main-scroll" view-class="layout-main-scroll">
			<LayoutParentView />
			<LayoutFooter v-if="isFooter" />
		</el-scrollbar>
		<el-backtop :target="setBacktopClass" />
	</el-main>
</template>

<script setup lang="ts" name="layoutMain">
import { defineAsyncComponent, onMounted, computed, ref, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useTagsViewRoutes } from '@/stores/tagsViewRoutes';
import { useThemeConfig } from '@/stores/themeConfig';
import { useUserInfo } from '@/stores/userInfo';
import { NextLoading } from '@/utils/loading';
import mittBus from '@/utils/mitt';
import signalR from '@/utils/signalR';
import { checkSnapshotOrder } from '@/api/login';
import { ElNotification } from 'element-plus';
import { useIntervalFn } from '@vueuse/shared';

// 引入组件
const LayoutParentView = defineAsyncComponent(() => import('@/layout/routerView/parent.vue'));
const LayoutFooter = defineAsyncComponent(() => import('@/layout/footer/index.vue'));

// 定义变量内容
const layoutMainScrollbarRef = ref<RefType>();
const route = useRoute();
const storesTagsViewRoutes = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
// 设置 footer 显示/隐藏
const isFooter = computed(() => {
	return themeConfig.value.isFooter && !route.meta.isIframe;
});
// 设置 header 固定
const isFixedHeader = computed(() => {
	return themeConfig.value.isFixedHeader;
});


// 设置主内容区的高度
const setMainHeight = computed(() => {
	if (isTagsViewCurrenFull.value) return '0px';
	const { isTagsview, layout } = themeConfig.value;
	const { showTelControl } = userInfos.value;
	if (isTagsview && layout !== 'classic' && showTelControl) {
		return '85px';
	} else if (isTagsview && layout !== 'classic' && !showTelControl) {
		return '85px';
	} else {
		return '51px';
	}

});
// 设置 Backtop 回到顶部
const setBacktopClass = computed(() => {
	if (themeConfig.value.isFixedHeader) return `.layout-backtop-header-fixed .el-scrollbar__wrap`;
	else return `.layout-backtop .el-scrollbar__wrap`;
});
// 检测是否有随手拍工单
const tipsRef = ref();
const checkWorkOrder = async () => {
	try {
		const { result } = await checkSnapshotOrder();
		if (result > 0) {
			tipsRef.value = ElNotification({
				title: '办件提醒',
				position: 'bottom-right',
				type:'info',
				dangerouslyUseHTMLString: true, // 允许使用 HTML 内容
				message: `电气焊动火作业申报提醒：待办数量 ${result} 个`,
				duration: 0, // 持续时间
			});
		}
		const checkDuration = 2 * 60 * 60 * 1000; // 间隔2个小时查询一次
		const startCheck = useIntervalFn(
			async () => {
				const { result } = await checkSnapshotOrder();
				if (result > 0) {
					if (tipsRef.value) tipsRef.value.close();
					tipsRef.value = ElNotification({
						title: '办件提醒',
						position: 'bottom-right',
						type:'info',
						dangerouslyUseHTMLString: true, // 允许使用 HTML 内容
						message: `电气焊动火作业申报提醒：待办数量 ${result} 个`,
						duration: 0, // 持续时间
					});
				}
			},
			checkDuration,
			{ immediate: false }
		);
		// 两个小时后开启查询
		setTimeout(() => {
			startCheck.resume();
		}, checkDuration);
	} catch (e) {
		console.log(e);
	}
};
// 页面加载前
onMounted( async () => {
	NextLoading.done(600);
	// 监听页面需要滚动事件
	mittBus.on('scrollTopEmit', (res: any) => {
		layoutMainScrollbarRef.value?.scrollTo(res.top ? res.top : 0, res.left ? res.left : 0)// 滚动到一组特定坐标(x，y)
	});
	await nextTick();
	if(themeConfig.value.appScope === 'ZiGong'){ // 检查是否有随手拍工单 自贡需求
		await checkWorkOrder();
	}
	setTimeout(()=>{
		signalR.joinGroup('CallCenter'); // 加入分组
	},1000)
});
// 暴露变量
defineExpose({
	layoutMainScrollbarRef,
});
</script>
