<!-- 首页 -->
<template>
	<!-- 主要内容区域 -->
	<div class="body-bg">
		<div class="card">
			<div class="title">常用应用</div>
			<van-grid :border="false" :column-num="4">
				<van-grid-item v-for="(item,idx) in functionList" :key="idx" :to="item.jumpPath">
					<img :src="item.img" width="45rpx" />
					<span class="vanicon_text">{{ item.title }}</span>
				</van-grid-item>
			</van-grid>
		</div>


		<div class="card" v-for="(menu,index) in menus" :key="index">
			<div class="title">{{menu.menuName}}</div>
			<van-grid :border="false" :column-num="4">
				<van-grid-item v-for="(menuItem,idx) in menu.children" :key="idx" :to="menuItem.menuOpenAnd">
					<img :src="menuItem.menuAppImg" width="45rpx" />
					<span class="vanicon_text">{{menuItem.menuName}}</span>
				</van-grid-item>
			</van-grid>
		</div>

 
	</div>

</template>


<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted
	} from 'vue';
	import {
		onBeforeRouteLeave
	} from 'vue-router'
	import {
		showFailToast,
		showSuccessToast
	} from 'vant';

	const {
		proxy
	} = getCurrentInstance()

	const showCheckTake = ref(false);

	const userDesc = localStorage.getItem("userDesc")
	const role = localStorage.getItem("role")[0].roleCode

	if (role == 'SX0201' || role == 'SX0201' || role == 'SX0302' || role == 'SX0303') {
		showCheckTake.value = true
	}
	if (userDesc == '贾俊臣' || userDesc == '张瑞楠') {
		showCheckTake.value = true
	}

	/**
	 * 修改最近使用的页面记录
	 */
	const recentlyUsed = ref({
		userCode: localStorage.getItem('userCode'),
		menuIcon: '',
		menuName: '',
		jumpPath: ''
	})
	const userCode = localStorage.getItem("userCode")
	const handleClick = () => {
		console.log("111");
		const url = '/sgsafe/RecordMaster/tuisong'
		const param = {
			userCode: userCode
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == 0) {
				showSuccessToast('已推送')
			} else {
				showFailToast(response.data.msg)
			}
		}, 500)
	}
	const getRecentlyUsed = () => {
		const url = '/sgsafe/MenuRecentlyUsedMobile/updateMenuRecentlyUsedStatus'
		const param = {
			json: JSON.stringify(recentlyUsed.value)
		}
		proxy.$axios.post(url, param).then(res => {
			if (res.data.code !== 0) {
				console.log('执行失败')
			}
		})
	}

	onBeforeRouteLeave((to, from) => {
		recentlyUsed.value.jumpPath = to.path
		recentlyUsed.value.menuIcon = getPicPathByPath(to.path)
		recentlyUsed.value.menuName = getNameByPath(to.path)
		if (recentlyUsed.value.menuIcon) {
			getRecentlyUsed()
		}
	})

	/**
	 * 获取最近使用页面记录
	 */
	const functionList = ref([])
	const coincideNotList = ref([])
	const queryMenuRecently = () => {
		const url = '/sgsafe/MenuRecentlyUsedMobile/queryRecentlyUsed'
		const param = {
			userCode: localStorage.getItem('userCode')
		}
		proxy.$axios.get(url, param).then(res => {
			functionList.value = res.data.data.map(item => ({
				title: item.menuName,
				img: item.menuIcon,
				jumpPath: item.jumpPath
			}))

			if (functionList.value.length < 4) {
				coincideNotList.value = defaultPageList.value
				for (let item of functionList.value) {
					coincideNotList.value = coincideNotList.value.filter(info => info.jumpPath !== item
						.jumpPath)
				}
				coincideNotList.value = coincideNotList.value.slice(0, 4 - functionList.value.length)
				functionList.value = [...functionList.value, ...coincideNotList.value]
			} else {
				functionList.value = functionList.value.slice(0, 4)
			}
		})
	}


	const menus = ref([])
	const queryH5Menu = () => {
		const url = 'framework/SysMenu/queryMobileMenuByUserId'
		const param = {

		}
		proxy.$axios.get(url, param).then(res => {
			console.log('-----' + JSON.stringify(res.data.data))
			menus.value = res.data.data
		})
	}




	onMounted(() => {
		queryH5Menu()
		queryMenuRecently()

	})

	/**
	 * 默认页面
	 */
	const defaultPageList = ref([{
			title: '隐患登记',
			img: 'images/yhdj.png',
			jumpPath: '/yinhuan/registration'
		},
		{
			title: '隐患台账',
			img: 'images/yh.png',
			jumpPath: '/yinhuan/hdLedger'
		},
		{
			title: '每日答题',
			img: 'images/dt.png',
			jumpPath: '/dailyproblem'
		},
		{
			title: '履职记录',
			img: 'images/lz.png',
			jumpPath: '/lvzhi'
		},
		{
			title: '安全制度管理',
			img: 'images/aqzd.png',
			jumpPath: '/institution/institutionRegime'
		},
		{
			title: '证件管理',
			img: 'images/zj.png',
			jumpPath: '/cardManager'
		},
		{
			title: '隐患待办',
			img: 'images/yhdb.png',
			jumpPath: '/yinhuan/todo'
		},
	])

	/**
	 * 根据路由获取名称
	 */
	const getNameByPath = (path) => {
		const recentlyUsedMapping = {
			'/institution/law': '法律法规',
			'/institution/institutionRegime': '安全制度管理',
			'/institution/institutionRule': '安全操作规程',
			'/lvzhi': '履职记录',
			'/lvzhicx': '履职查询',
			'/institution/riskList': '风险分级管控记录',
			'/yinhuan/registration': '隐患登记',
			'/yinhuan/todo': '隐患待办',
			'/yinhuan/hdLedger': '隐患台账',
			'/safeCheck/task': '安全检查任务',
			'/dailyproblem': '每日答题',
			'/cardManager': '证件管理',
			'/institution/emergencyPlan': '应急预案',
			'/emergencyResources': '应急物资',
			'/emergencyDrillPlan': '应急演练',
			'/projectManage/taiZhang': '项目台账',
			'/safeClient': '终端管理',
			'/jobCondition': '作业情况',

      '/annex':'文件发布',
      '/notice':'通知公告',
      '/keyMatters':'重点事项',
      '/planManagement':'计划任务',
      '/performanceReview/units':'单位考核',
      '/knowledge/accident':'事故案例',
      '/knowledge/manager':'管理案例',
      '/knowledge/Culture':'安全环保文化',
      '/knowledge/project':'项目案例库',
      '/courseManagement':'课程管理',
      '/class2':'在线学习考试',
      '/accidentManager/accidentBaoGaoLedger/index':'事故报告台账',
      '/accidentManager/accidentJuBao/index':'事故举报',
      '/accidentManager/accidentJuBaoLedger/index':'事故举报台账',
      '/moneySafe/safeMoneyManagement':'安环费用管理',
      '/moneySafe/safeMoneyBudget':'安全费用预算',



		}
		return recentlyUsedMapping[path]
	}

	/**
	 * 根据路由获取图片路径
	 */
	const getPicPathByPath = (path) => {
		const recentlyUsedMapping = {
			'/institution/law': 'images/fl.png',
			'/institution/institutionRegime': 'images/aqzd.png',
			'/institution/institutionRule': 'images/zd.png',
			'/lvzhi': 'images/lz.png',
			'/lvzhicx': 'images/lzcx.png',
			'/institution/riskList': 'images/fx.png',
			'/yinhuan/registration': 'images/yhdj.png',
			'/yinhuan/todo': 'images/yhdb.png',
			'/yinhuan/hdLedger': 'images/yh.png',
			'/safeCheck/task': 'images/aq.png',
			'/dailyproblem': 'images/dt.png',
			'/cardManager': 'images/zj.png',
			'/institution/emergencyPlan': 'images/yjya.png',
			'/emergencyResources': 'images/yj.png',
			'/emergencyDrillPlan': 'images/yjyl.png',
			'/projectManage/taiZhang': 'images/xm.png',
			'/safeClient': 'images/zdgl.png',
			'/jobCondition': 'images/zyqk.png',

      '/annex':'/images/zyqk.png',
      '/notice':'/images/yj.png',
      '/keyMatters':'/images/keyMatters.png',
      '/planManagement':'/images/planManagement.png',
      '/performanceReview/units':'/images/unitsPerformance.png',
      '/knowledge/accident':'/images/zd.png',
      '/knowledge/manager':'/images/zd.png',
      '/knowledge/Culture':'/images/zd.png',
      '/knowledge/project':'/images/zd.png',
      '/courseManagement':'/images/zyqk.png',
      '/class2':'/images/zyqk.png',
      '/accidentManager/accidentBaoGaoLedger/index':'/images/sgbgtz.png',
      '/accidentManager/accidentJuBao/index':'/images/sgjb.png',
      '/accidentManager/accidentJuBaoLedger/index':'/images/sgjbtz.png',
      '/moneySafe/safeMoneyManagement':'/images/aq.png',
      '/moneySafe/safeMoneyBudget':'/images/aq.png',


		}
		return recentlyUsedMapping[path]
	}

	/**
	 * 测试消息
	 */
	const getAccessToken = () => {
		const url = '/sgsafe/MobileMessage/getAccessToken'
		const params = {}
		proxy.$axios.get(url, params).then(response => {
			if (response.data.code === 0) {
				console.log('accessToken操作成功', response.data.data);
			} else {
				console.log('accessToken操作失败操作失败', response.data.fullMsg);
			}
		})
	}

	const sendMobileMsg = () => {
		const url = '/sgsafe/MobileMessage/sendMsg'
		const params = {}
		proxy.$axios.get(url, params).then(response => {
			if (response.data.code === 0) {
				console.log('accessToken操作成功', response.data.data);
			} else {
				showFailToast('操作失败', response.data.msg)
				console.log('accessToken操作失败操作失败', response.data.fullMsg);
			}
		})
	}
</script>

<style scoped>
	/* 固定在顶部的标题栏样式 */
	.header-title {
		background-color: #3875c6;
		height: 50px;
		padding: 15px 20px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		z-index: 100;
	}

	.title-text {
		margin-top: 12px;
		color: white;
		font-size: 18px;
		/* font-weight: 600; */
		text-align: center;
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
		letter-spacing: 1px;
	}

	.body-bg {
		background-color: #ffffff;
		padding-top: 10px;
	}

	:deep(.van-grid-item__text) {
		font-size: var(--van-font-size-lg0);
	}

	.dbTitle {
		margin-top: 10px;
	}

	.daiban_titile_img {
		vertical-align: middle;
		width: 20px;
		height: 20px;
	}

	.custom-title {
		font-size: var(--van-font-size-lg);
		font-weight: bold;
		color: var(--van-gray-9);
	}

	.vanicon_text {
		font-size: var(--van-font-size-lg0);
		color: var(--van-grid-item-text-color);
		margin-top: var(--van-padding-xs);
		line-height: 1.5;
		word-break: break-all;
		text-align: center;
		height: 40px;
	}

	.card {
		margin: 10px;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		background-color: #fff;
	}

	.title {
		padding-left: 20px;
		padding-top: 20px;
		font-weight: bold;
		font-size: 20px;
	}
</style>