<template>
	<view class="container">
		<view class="row" v-for="(item, index) in computedMenus" :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, val.query)">
					<image :src="val.icon" 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: [
			{
				title: '霸王餐',
				icon: '',
				intro: '设置充值消费的N倍，当前订单立即免单',
				pageUrl: 'PAGES_BWC'
			},
			{
				title: '积分锁客',
				icon: '',
				pageUrl: '',
				intro: '设置充值消费的N倍，当前订单立即免单'
			},
			{
				title: '弹窗广告',
				icon: '',
				pageUrl: 'PAGES_ORDER_INDEX',
				intro: '设置弹窗广告'
			},
			{
				title: '超级会员',
				icon: '',
				pageUrl: 'PAGES_ORDER_INDEX',
				intro: '用户会员管理设置'
			},
			{
				title: '新客立减',
				icon: '',
				pageUrl: 'PAGES_ORDER_INDEX',
				intro: '首单下单减免金额'
			},
			{
				title: '智慧充值',
				icon: '',
				pageUrl: 'PAGES_ORDER_INDEX',
				intro: '允许客户充值并使用余额支付'
			},
			{
				title: '分销',
				icon: '',
				pageUrl: 'PAGES_MARKET_DISTRIBUTION_INDEX',
				intro: '用户成为业务员，可促进消费'
			},
			{
				title: '消费返现',
				icon: '',
				pageUrl: 'PAGES_MARKET_CONSUME_CASHBACK',
				intro: '用户下单后返现一定的金额到余额，可促进复购'
			},
			{
				title: '私域引流',
				icon: '',
				pageUrl: 'PAGES_MARKET_DRAINAGE_CONFIG',
				intro: '可设置用户下单成功后的群二维码'
			},
			{
				title: '满减活动',
				icon: '',
				pageUrl: 'PAGES_MARKET_DISCOUNT_ACTIVITY',
				intro: '达到指定支付金额享受减价'
			},
			{
				title: '生日有礼',
				icon: '',
				pageUrl: '',
				intro: '用户生日管理设置'
			},
			{
				title: '点餐智能推荐',
				icon: '',
				pageUrl: 'PAGES_MARKET_ORDER_RECOMMENDATION',
				intro: '进入点单页X秒未点自动推荐商品，此推荐设置启用即生效'
			},
			{
				title: '超值券包',
				icon: '',
				pageUrl: '',
				intro: '下单加购'
			},
			{
				title: '套餐推广',
				icon: '',
				pageUrl: '',
				intro: '下单通过用户邀请好友减免金额的方式裂变宣传套餐加购'
			},
			{
				title: '充值兑换码',
				icon: '',
				pageUrl: 'PAGES_MARKET_RECHARGE_EXCHANGE_CODE',
				intro: '兑换码直充余额，可当作礼品赠送'
			},
			{
				title: '券兑换码',
				icon: '',
				pageUrl: 'PAGES_MARKET_COUPON_EXCHANGE_CODE',
				intro: '可添加多券组合兑换'
			},
			{
				icon: 'xszk',
				pageUrl: 'PAGES_LIMIT_DISCOUNT',
				title: '限时折扣',
				intro: '批量设置商品折扣'
			},
			{
				icon: 'xszk',
				pageUrl: 'PAGES_LIMIT_DISCOUNT',
				title: '商品拼团',
				intro: '拼团'
			}
		]
	},
	{
		label: '优惠券',
		menus: [
			{
				icon: 'spdhq',
				pageUrl: 'PAGES_EXCHANGE_COUPON',
				title: '商品兑换券',
				intro: '批量设置商品折扣',
				query: {
					couponType: 2
				}
			}
		]
	}
]);
console.log(menusStore.adminPages);

const computedMenus = computed(() => {
	//   const arr = menusStore.adminPages.filter((v) => {
	//     return navList.find((navItem) => navItem.title == v.title);
	//   });
	return menuList.value.map((v) => {
		v.menus = v.menus.filter((menu) => {
			const hasPermission = menusStore.adminPages.find((navItem) => navItem.title == menu.title);
			console.log('hasPermission', hasPermission);
			if (hasPermission) {
				menu.icon = hasPermission.miniIcon;
				console.log(menu);
			}

			return hasPermission;
		});
		return v;
	});
});
</script>

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