<template>
	<view class="container">
		<view class="row">
			<view class="header">
				<text class="t">{{ menus.title }}</text>
			</view>
			<view class="menu-wrap">
				<view class="item" v-for="(val, i) in menus.children" :key="i" @click="to(val)">
					<image :src="val.miniIcon" mode="aspectFit" class="icon"></image>
					<view class="info">
						<view class="title">
							<text class="t">{{ val.title }}</text>
						</view>
						<view class="intro">
							<text class="t">{{ val.intro }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

function to(item) {
	uni.navigateTo({
		url: item.miniPath
	});
}

const menus = ref({});

onLoad(() => {
	let pathObj = uni.getStorageSync('secondaryPageMenus');
	pathObj.children = pathObj.children.filter((item) => {
		return item.miniPath !== '';
	});
	console.log(pathObj);
	menus.value = pathObj;
});
</script>

<style>
page {
	background-color: #f8f8f8;
}
</style>
<style scoped lang="scss">
.container {
	padding: 0 28upx 28upx;
	.row {
		.header {
			padding: 28upx 0;
			.t {
				font-size: 32upx;
				font-weight: bold;
			}
		}
		.menu-wrap {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			grid-column-gap: 28upx;
			grid-row-gap: 28upx;
			.item {
				display: flex;
				background-color: #fff;
				padding: 20upx;
				border-radius: 20upx;
				.icon {
					$size: 80upx;
					width: $size;
					height: $size;
					flex-shrink: 0;
				}
				.info {
					display: flex;
					padding-left: 20upx;
					flex-direction: column;
					.title {
						.t {
							font-size: 28upx;
							font-weight: bold;
						}
					}
					.intro {
						.t {
							font-size: 28upx;
							color: #999;
						}
					}
				}
			}
		}
	}
}
</style>
