<template>
	<view class="book-keeping">
		<uni-grid :column="2" :showBorder="false" @change="e => changeGrid(e)">
			<uni-grid-item v-for="menu in menuList" :key="menu.menuId" :index="menu.menuId">
				<view class="grid-item">
					<image class="grid-logo" :src="menu.src"></image>
					<text class="text">{{menu.menuName}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	import {
		listByParams
	} from "@/api/system/menu";
	
	export default {
		data() {
			return {
				// 生活账本菜单列表
				menuList: []
			}
		},
		onLoad() {
			this.getMenuList();
		},
		methods: {
			/**
			 * @param {Object} e
			 * 切换grid事件
			 */
			changeGrid(e) {
				const path = this.menuList.find(item => item.menuId === e.detail.index).path;
				this.$tab.navigateTo(path + '/index');
			},
			/**
			 * 获取菜单列表
			 */
			getMenuList() {
				listByParams({parentId: 2023}).then(res => {
			        this.menuList = res.data.map(item => {
						return {
							...item,
							src: require('@/static/images/function/bookkeeping/' + item.path + '.png')
						}
					});
			    })
			}
		},
	}
</script>

<style lang="scss" scope>
	.book-keeping {
		padding: 1rem;
		.uni-grid-item {
			width: 50%;
			.grid-item {
				margin: 0.5rem;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100%;
				background-color: $uni-text-color-inverse;
				border-radius: 0.5rem;
				.grid-logo {
					margin-bottom: 1rem;
					width: $uni-img-size-lg;
					height: $uni-img-size-lg;
				}
			}
		}
	}
</style>