<!--
  Jeepay导航卡片， 支持4种风格
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/16 11:45
-->
<template>
	<!-- 宫格类型  -->
	<template v-if="props.type == 'grid'">
		<view class="grid-card-wrapper" :style="{ margin: calcPadding(), '--space-w': space + 'rpx' }">
			<block v-for="(v, i) in navListComputed" :key="i">
				<view class="card-main" :style="{ margin: calcMargin(), '--radius-size': radiusSize + 'rpx' }"
					hover-class="touch-hover" hover-stay-time="150"
					:class="{ 'card-big-main': navListComputed.length == 4 || navListComputed.length <= 2 }"
					@tap="clickFunc(v)">
					<image :src="v.icon" mode="scaleToFill" />
					<view class="card-title">{{ v.title }}</view>
				</view>
			</block>
		</view>
	</template>

	<!-- 列表类型 -->
	<template v-if="props.type == 'list'">
		<view class="list-nav-wrapper" :style="{ '--radius-size': radiusSize + 'rpx' }">
			<block v-for="(v, i) in navListComputed" :key="i">
				<view class="nav-main" hover-class="touch-hover" hover-stay-time="150" @tap="clickFunc(v)">
					<image :src="v.icon" mode="scaleToFill" />
					<view class="nav-text">{{ v.title }}</view>
					<image class="nav-right" src="/static/iconImg/icon-arrow-right.svg" mode="scaleToFill" />
				</view>
			</block>
		</view>
	</template>
</template>

<script setup>
	import {
		useMenusStore
	} from '@/store/menus.js'
	const menusStore = useMenusStore()
	import {
		reactive,
		ref,
		computed
	} from "vue"
	import go from "@/commons/utils/go.js"
	import ent from '@/commons/utils/ent.js'
	import {
		hasPermission
	} from '@/commons/utils/hasPermission.js';
	// 定义组件参数
	const props = defineProps({
		//显示类型： 支持  grid-宫格  list-列表
		type: {
			type: String,
			default: "list"
		},

		// 圆角矩形大小 为0 则 无圆角
		radiusSize: {
			type: Number,
			default: 32
		},

		//间隙类型： 仅grid-宫格时生效， 支持 0 和 25
		space: {
			type: Number,
			default: 25
		},

		// 导航列表，  格式：{ icon, title, pageUrl, clickFunc, entId }
		navList: {
			type: Array,
			default: () => []
		},
	})

	// 点击事件
	async function clickFunc(nav) {
		if (nav.pageUrl == "PAGES_DATA_SUMMARY") {
			let res = await hasPermission('允许查看经营数据')
			if (!res) return
		}
		// 包含回调事件
		if (nav.clickFunc) {
			return nav.clickFunc(nav)
		}

		// 包含URL
		if (nav.pageUrl) {
			return go.to(nav.pageUrl)
		}
	}
	const calcPadding = () => `${50 - props.space}rpx 35rpx 50rpx ${35 - props.space}rpx`
	const calcMargin = () => `${props.space}rpx 0 0 ${props.space}rpx`


	// 计算属性 
	let navListComputed = computed(() => {
		// return props.navList.filter(r => hasEnt(r.entId))
		// return props.navList.filter(r => {
		// 	if (r.hasOwnProperty('visiable')) {
		// 		return r.visiable
		// 	} else {
		// 		return true
		// 	}
		// })
		return props.navList.filter(r => {
			return menusStore.menuList.find(menu=>menu.pageId==r.pageUrl)
		})
	})

	function hasEnt(entId) {

		// 不包含： 说明无需隐藏
		if (!entId) {
			return true
		}
		return ent.has(entId)
	}
</script>

<style lang="scss" scoped>
	.grid-card-wrapper {
		display: flex;
		flex-wrap: wrap;
		.card-main {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 25rpx 0 0 25rpx;
			width: calc(33.3% - var(--space-w));
			height: 210rpx;
			border-radius: var(--radius-size);
			background-color: $J-bg-ff;

			image {
				width: 72rpx;
				height: 72rpx;
			}

			.card-title {
				margin-top: 22rpx;
				color: $J-color-t80;
				font-size: $J-f-size30;
			}
		}

		.card-big-main {
			width: calc(50% - var(--space-w));
		}
	}

	.list-nav-wrapper {
		margin: 0 auto;
		width: 680rpx;
		border-radius: var(--radius-size);
		overflow: hidden;

		.nav-main {
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			height: 120rpx;
			background-color: $J-bg-ff;

			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: text-bottom;
				margin: 0 20rpx 0 10rpx;
			}

			.nav-text {
				flex: 1;
				font-size: 32rpx;
			}

			.nav-right {
				margin: 0;
				width: 120rpx;
				height: 120rpx;
			}
		}

		.nav-setup {
			margin: 30rpx auto;
			width: 680rpx;
			border-radius: $J-b-r32;
			box-sizing: border-box;
		}
	}
</style>