<template>
	<view class="container">
		<view class="row" v-for="(item, index) in menuList" :key="index">
			<view class="header">
				<text class="t">{{ item.label }}</text>
			</view>
			<view class="menu-wrap">
				<view class="item" v-for="(val, i) in item.menus" :key="i" @click="go.to(val.pageUrl)">
					<image :src="`/static/applocation/${val.icon}.png`" 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, computed } from 'vue';
import go from '@/commons/utils/go.js';
import { useMenusStore } from '@/store/menus.js';
const menusStore = useMenusStore();

const menuList = ref([
	{
		label: '营销',
		menus: [
			{
				icon: 'xszk',
				pageUrl: 'PAGES_LIMIT_DISCOUNT',
				title: '限时折扣',
				intro: '批量设置商品折扣'
			},
			{
				icon: 'czdhm',
				pageUrl: 'LIMIT_DISCOUNT',
				title: '充值兑换码',
				intro: '兑换码直充余额，可当作礼品赠送'
			},

			{
				title: '优惠券',
				icon: '/static/indexImg/icon-order.svg',
				pageUrl: 'PAGES_ORDER_INDEX'
			},
			{
				title: '霸王餐',
				icon: '/static/indexImg/icon-order.svg',
				pageUrl: 'PAGES_ORDER_INDEX'
			},
			{
				title: '邀请裂变',
				icon: '/static/indexImg/icon-order.svg',
				pageUrl: 'PAGES_ORDER_INDEX'
			},
			{
				title: '积分锁客',
				icon: '/static/indexImg/icon-order.svg',
				pageUrl: 'PAGES_ORDER_INDEX'
			},
			{
				title: '满减活动',
				icon: '/static/indexImg/icon-order.svg',
				pageUrl: 'PAGES_MARKET_DISCOUNT_ACTIVITY'
			},
			{
				title: '私域引流',
				icon: '/static/indexImg/icon-order.svg',
				pageUrl: 'PAGES_MARKET_DRAINAGE_CONFIG'
			},
			{
				title: '消费返现',
				icon: '/static/indexImg/icon-order.svg',
				pageUrl: 'PAGES_MARKET_CONSUME_CASHBACK'
			},
			{
				title: '分销',
				icon: '/static/indexImg/icon-order.svg',
				pageUrl: 'PAGES_PAY'
			}
		]
	}
]);
console.log(menusStore.adminPages);
const computedMenus = computed(() => {
	const arr = menusStore.adminPages.filter((v) => {
		return navList.find((navItem) => navItem.title == v.title);
	});
	console.log(arr);
	return arr;
});
</script>

<style>
page {
	background-color: #f8f8f8;
}
</style>
<style scoped lang="scss">
.container {
	padding: 28upx;
	.row {
		.header {
			padding-bottom: 28upx;
			.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>
