<!-- 首页 -->
<template>
	<view class="page-wrapper" style="overflow: visible; height: auto">
		<!-- 背景图片view -->
		<view class="bg-img-view">
			<!-- 背景颜色view -->
			<view class="bg-color-view">
				<view class="bgbottomStyle"></view>
			</view>
		</view>
		<!-- 解决定位层级问题 -->
		<view class="bg-main">
			<!-- 导航条 -->
			<!-- <up-navbar title="首页" bg-color="#318AFE" titleStyle="color:#fff;font-size:16px;" @leftClick="toSetting">
				<template #left>
					<up-icon name="/static/indexImg/icon-menu.svg" color="#fff" :size="16"></up-icon>
				</template>
			</up-navbar> -->

			<view class="income u-flex">
				<view class="u-flex u-flex-1">
					<up-avatar :src="shopInfo.logo" size="88rpx"></up-avatar>
					<view class="u-flex-1 u-p-l-30 u-text-left">
						<view class="u-flex">
							<view class="u-line-1 u-font-36 font-bold" style="width: 80%;">{{shopInfo.shopName}}</view>
							<!-- <view class="u-font-28 color-fff change-shop u-flex u-row-center" @click="changeShop">
								<image src="/static/change.png" class="u-m-t-2" style="width: 20rpx;height: 20rpx;"
									mode=""></image>
								<text class="u-m-l-6">切换店铺</text>
							</view> -->
						</view>
						<view class="u-m-t-16">
							<view style="color: rgba(255,255,255,0.83);" v-if="shopStaff">
								<text>{{shopStaff.name}}</text>
								<text>：</text>
								<text>{{shopStaff.code}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="u-font-28 color-fff change-shop u-flex u-row-center" @click="toHelp">
					<text class="u-m-r-6 u-font-24 ">帮助中心</text>
					<view class="u-flex u-m-t-4">
						<up-icon name="question-circle" size="12" color="#fff"></up-icon>
					</view>
				</view>
			</view>

			<!-- <view class="income">
				<view class="u-flex u-row-center u-relative">
					<view class="u-flex u-col-center">
						<view class="u-m-r-12">总收入</view>
						<up-icon name="/static/indexImg/icon-help.svg" color="#fff" :size="12" @click="toggleTips"></up-icon>
					</view>
					<view class="tips u-absolute color-666 u-font-20 u-text-left" :class="{ showTips: showTips }">
						<view class="sanjiao u-flex"><up-icon name="play-left-fill" size="12" color="#fff"></up-icon></view>
						总收入为除会员余额 支付外所有收入
					</view>
				</view>
				<view class="u-flex u-row-center">
					<view class="">￥{{ ((totalRevenuedata || 0) * 1).toFixed(2) }}</view>
				</view>
				<view>{{ shopName || '' }}</view>
			</view> -->

			<!-- 统计 or 快捷扫码 -->
			<!-- <Stats ref="statsRef" /> -->
			<statistics @totalRevenue="totalRevenue"></statistics>
			<!-- 导航栅格 -->
			<!-- <JeepayNavigation :navList="navList" type="grid" /> -->
			<view class="  border-r-16 bg-fff u-m-t-32 u-m-l-28 u-m-r-28" style="padding: 32rpx 28rpx 0 28rpx;">
				<view class="u-flex u-font-28">
					<view class="title-line"></view>
					<view class="font-bold u-m-l-6">我的权限</view>
				</view>
				<view class="u-m-t-32">
					<up-grid :border="false" col="3">
						<up-grid-item @click="clickFunc(listItem)" v-for="(listItem,listIndex) in computedMenus" :key="listIndex">
							<image style="width: 72rpx;height: 72rpx;" :src="listItem.icon" mode="scaleToFill" />
							<text class="u-m-t-16 color-333 u-font-28 u-p-b-32">{{listItem.title}}</text>
						</up-grid-item>
					</up-grid>
				</view>
				
			</view>

			<view class="logoout u-m-t-32">
				<my-button @click="logoout">退出登录</my-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import {
		onPullDownRefresh,
		onLoad,
		onShareAppMessage,
		onShareTimeline,
		onShow
	} from '@dcloudio/uni-app';
	import {
		useMenusStore
	} from '@/store/menus.js'
	import go from '@/commons/utils/go.js';
	import Stats from './components/Stats.vue';
	import statistics from './components/statistics.vue';
	import storageManage from '@/commons/utils/storageManage.js';
	import {
		hasPermission
	} from '@/commons/utils/hasPermission.js';

	uni.hideTabBar();
	let shopName = ref();
	let totalRevenuedata = ref();
	let totalRevenue = (d) => {
		totalRevenuedata.value = d;
	};

	let showTips = ref(false);

	function toggleTips() {
		showTips.value = !showTips.value;
	}

	function toSetting() {
		go.to('PAGES_SHOP_SETUP');
	}
	//切换店铺
	function changeShop(){
		uni.showToast({
			title:'待开放，敬请期待！',
			icon:'none'
		})
		return 
	}
	// 点击事件
	async function clickFunc(nav) {
		if (nav.pageUrl == "PAGES_SALES_SUMMARY") {
			let res = await hasPermission('允许查看经营数据')
			if (!res) return
		}
		// 包含回调事件
		if (nav.clickFunc) {
			return nav.clickFunc(nav)
		}
	
		// 包含URL
		if (nav.pageUrl) {
			return go.to(nav.pageUrl)
		}
	}
	
	function toHelp(){
		uni.navigateTo({
			url:'/pages/help/help'
		})
	}
	// 导航列表
	const navList = [
		// {
		// 	title: '销售汇总',
		// 	icon: '/static/indexImg/PAGE_SALES_SUMMARY.svg',
		// 	pageUrl: 'PAGES_SALES_SUMMARY',
		// },
		{
			title: '代客下单',
			icon: '/static/indexImg/icon-substitute-ordering.svg',
			pageUrl: 'PAGES_CREATE_ORDER',
			clickFunc: () => {
				hasPermission('允许下单').then((res) => {
					if (res) {
						go.to('PAGES_CREATE_ORDER');
					}
				});
			}
		},
		{
			title: '台桌管理',
			icon: '/static/indexImg/icon-table.svg',
			pageUrl: 'PAGES_TABLE'
		},
		{
			title: '商品分组',
			icon: '/static/indexImg/goods-group.svg',
			pageUrl: 'PAGES_GOODS_GROUP'
		},

		{
			title: '商品管理',
			icon: '/static/indexImg/icon-product-control.svg',
			pageUrl: 'PAGES_PRODUCT'
		},
		{
			title: '商品分类',
			icon: '/static/indexImg/icon-category.svg',
			pageUrl: 'PAGES_CATEGORY'
		},
		{
			title: '耗材管理',
			icon: '/static/indexImg/PAGE_SALES_SUMMARY.svg',
			pageUrl: 'PAGES_SALES_CONSUMABLES'
		},
		{
			title: '订单管理',
			icon: '/static/indexImg/icon-order.svg',
			pageUrl: 'PAGES_ORDER_INDEX'
		},
		{
			title: '用户管理',
			icon: '/static/indexImg/icon-user.svg',
			pageUrl: 'PAGES_USER_CONTROL'
		},
		{
			title: '全部',
			icon: '/static/indexImg/all.svg',
			type:'all',
			pageUrl: 'PAGES_PERSSION'
		},


		// {
		// 	title: '员工管理',
		// 	icon: '/static/indexImg/icon-staff.svg',
		// 	pageUrl: 'PAGES_STAFF'
		// },


		// {
		// 	title: '设备管理',
		// 	icon: '/static/indexImg/icon-printer.svg',
		// 	pageUrl: 'PAGES_PRINTER_INDEX'
		// },
		// {
		// 	title: '交班',
		// 	icon: '/static/indexImg/icon-work.svg',
		// 	pageUrl: 'PAGES_WORK_INDEX'
		// },
		// {
		// 	title: '排队',
		// 	icon: '/static/indexImg/icon-line-up.svg',
		// 	pageUrl: 'PAGES_LINE_UP'
		// },
		// {
		// 	title: '霸王餐',
		// 	icon: '/static/indexImg/icon-bwc.svg',
		// 	pageUrl: 'PAGES_BWC'
		// },
		// {
		// 	title: '优惠券',
		// 	icon: '/static/coupon/icon_coupon.svg',
		// 	pageUrl: 'PAGES_COUPON_INDEX'
		// },
		// {
		// 	title: '订阅通知',
		// 	icon: '/static/indexImg/icon-notification.svg',
		// 	pageUrl: 'PAGES_NOTIFICATION_INDEX'
		// },
		// {
		// 	title: '挂账管理',
		// 	icon: '/static/indexImg/icon_credit.svg',
		// 	pageUrl: 'PAGES_CREDIT_BUYER_INDEX'
		// },
		// {
		// 	title: '核销管理',
		// 	icon: '/static/indexImg/pagewriteoff.svg',
		// 	pageUrl: 'PAGES_WEITEOFF'
		// },


		// {
		// 	title: '退出登录',
		// 	icon: '/static/indexImg/icon-login-out.svg',
		// 	pageUrl: 'PAGES_LOGIN',
		// 	clickFunc: () => {
		// 		storageManage.cleanByLogout();
		// 		go.to('PAGES_LOGIN', {}, 'redirect');
		// 	}
		// }
	];
	const menuStore = useMenusStore()
	const computedMenus=computed(()=>{
		return navList.filter(r => {
			if(r.type=='all'){
				return true
			}
			return menuStore.menuList.find(menu=>menu.pageId==r.pageUrl)
		})
	})

	function logoout() {
		storageManage.cleanByLogout();
		go.to('PAGES_LOGIN', {}, 'redirect');
	}

	const vdata = reactive({
		noticeList: [], // 公告列表
		adList: [],
		shareImgUrl: '' //分享图片
	});
	const shopInfo = ref({})
	const shopStaff = ref('')
	onLoad((options) => {
		const data = uni.getStorageSync('shopInfo')
		const shopStaffData = uni.getStorageSync('shopStaff')
		if(shopStaffData){
			shopStaff.value=shopStaffData
		}
		
		shopName.value = shopInfo.shopName;
		console.log(data);
		if (data) {
			shopInfo.value = data
		}
	});

	// 启动加载
	onMounted(() => {
		// refData();
	});

	// 如果不是超管 删除 刷脸广告菜单
	if (storageManage.userInfo().userType != 1) {
		const index = navList.findIndex((v) => v.entId == 'ENT_ADVERT_CONTROL');
		if (index != -1) {
			navList.splice(index, 1);
		}
	}

	async function refData() {
		//   调用子组件方法 , 避免组件没有加载完成。

		// nextTick(() => statsRef.value.refData());
		// 停止刷新
		uni.stopPullDownRefresh();
	}

	/**
	 * 微信分享
	 */
	onShareAppMessage((res) => {
		if (res.from == 'menu')
			return {
				title: uni.$appName,
				path: '/pages/index/index',
				imageUrl: vdata.shareImgUrl
			};
	});

	/**
	 * 分享到朋友圈
	 */
	onShareTimeline(() => {
		return {
			title: uni.$appName,
			imageUrl: vdata.shareImgUrl
		};
	});
	// 下拉刷新
	onPullDownRefresh(() => {
		refData();
	});

	onShow(() => {
		menuStore.getMenus()
	})
	const navBack = uni.navigateTo
	
	
	// uni.navigateTo = (e) => {
	// 	console.log(e);
	// 	if (menuStore.menuList.find(v => v.allPath == e.url.replace(/^\/+|\/+$/g, ''))) {
	// 		navBack(e)
	// 	} else {
	// 		uni.showToast({
	// 			title: '你没有该权限',
	// 			icon: 'error'
	// 		})
	// 	}
	// }
</script>

<style lang="scss" scoped>
	.logoout {
		padding: 0 120rpx;
	}

	.bg-main {
		position: relative;
		z-index: 10;
	}

	.bgbottomStyle {
		position: absolute;
		bottom: -2rpx;
		left: 0;

		width: 750rpx;
		height: 74rpx;

		height: 112rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F6F6F6 100%);
	}

	.income {
		padding: 30rpx;
		/* #ifdef H5 */
		padding-top: calc(84rpx);
		/* #endif */
		/* #ifndef H5 */
		padding-top: calc(84rpx + 44px);

		/* #endif */
		>view {
			text-align: center;
			color: #ffffff;
			font-family: Source Han Sans CN, Source Han Sans CN;
		}

		>view:nth-child(1) {
			font-weight: 400;
			font-size: 28rpx;
			// margin-top: 84rpx;
		}

		>view:nth-child(2) {
			margin-top: 20rpx;
			font-weight: 500;
			font-size: 64rpx;
		}

		>view:nth-child(3) {
			font-weight: 400;
			font-size: 28rpx;
			margin-top: 50rpx;
		}
	}

	.tips {
		opacity: 0;
		right: 28rpx;
		transition: opacity 0.3s;
		background: #ffffff;
		padding: 20rpx 14rpx;
		width: 211rpx;
		box-sizing: border-box;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		&.showTips {
			opacity: 1;
		}

		.sanjiao {
			position: absolute;
			right: 100%;
			top: 50%;
			transform: translateX(10rpx) translateY(-50%);
		}
	}

	.change-shop {
		white-space: nowrap;
		width: 182rpx;
		height: 48rpx;
		background: rgba(255, 255, 255, .26);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.bg-color-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 489rpx;
		background: linear-gradient(90deg, #6197FF 0%, #62D8CC 100%);
	}
	.title-line{
		width: 4rpx;
		height: 22rpx;
		background-color: $my-main-color;
	}
</style>