<script setup>
/** 底部菜单导航
 * 底部导航的规则
 * 视频端显示：
 * 视频 商城 消息 我的(视频我的)
 * 商城端显示：
 * 视频 商城 消息 个人中心(商城我的)
 */
import {
	ref,
	computed,
	onMounted,
	onUnmounted,
	getCurrentInstance,
	reactive,
	watch,
} from 'vue'
import {
	onLoad,
} from "@dcloudio/uni-app"
// 工具库
import util from '@/common/js/util';
const {
	proxy
} = getCurrentInstance()
// 接收参数
const props = defineProps({
	page: {
		type: String,
	},
	// 主题 dark黑色 light白色的
	subject: {
		type: String,
		default: 'light',
	},
})
// 用户信息
const userinfo = computed(() => {
	let resuilt = uni.$store.state.userinfo
	return resuilt
})
// 展示模式 商城shop 默认default
const mode = computed(() => uni.$store.state.tabbarMode)
// 底部菜单
const menu = computed(() => {
	let arr = [{
		page: 'index',
		type: 'option',
		name: '视频',
		labelType: 'default',
		pagePath: 'pages/index/index',
	},
	// {
	// 	page: '',
	// 	type: 'option',
	// 	name: '榴莲果',
	// 	pagePath: 'pages/index/durian',
	// },
	{
		page: 'shop',
		type: 'option',
		name: '商城',
		labelType: 'shop',
		pagePath: 'pages/shop/shop'
	},
	{
		type: 'middle',
		name: '',
	},
	{
		page: 'news',
		type: 'option',
		name: '消息',
		pagePath: 'pages/news/news',
	}
	]

	switch (mode.value) {
		case 'default':
			arr.push({
				page: 'homepage',
				type: 'option',
				name: '我的',
				labelType: 'default',
				pagePath: 'pages/mine/homepage',
			})
			break;
		case 'shop':
			arr.push({
				page: 'mine',
				type: 'option',
				name: '个人中心',
				labelType: 'shop',
				pagePath: 'pages/mine/mine',
			})
			break;
	}
	return arr
})
// 安全区高度
let safeHeight = ref(0)

// 弹窗菜单
const showMenu = computed(() => {
	let result = []

	// 验证登录
	if (userinfo.value.id) {
		result.push({
			name: '发布视频',
			img: '/static/footerMenu1.png',
			url: '/pages/release/video',
		})
	}
	// 1是商家
	// if(userinfo.value.isShop == 1) {
	// 	result.push({
	// 		name: '发布商品',
	// 		img: '/static/footerMenu1.png',
	// 		url: '/pages/release/commodity',
	// 	})
	// }
	// 追加
	// result.push({
	// 	name: '打车',
	// }, {
	// 	name: '充电',
	// }, {
	// 	name: '到店美食',
	// }, {
	// 	name: '出行',
	// }, {
	// 	name: '家政',
	// })
	return result
})

// 未读数量
const noReadNum = ref(0)

const getReadNum = () => {
	getNoReadNum()
}

defineExpose({ getReadNum })

// 加载完成之后
onMounted(() => {
	// 开启监听
	addListener()
	// 隐藏tabbar
	uni.hideTabBar()
	// 系统信息
	uni.getSystemInfo().then(rs => {
		safeHeight.value = rs.safeArea + 'px'
	})

	// 
	// proxy.$refs.alert.open()

})
onLoad(() => {
	// 获取未读消息数量
	getNoReadNum()
})

// 卸载
onUnmounted(() => {
	uni.$off('changeMine')
})

// 开启监听
function addListener() {
	// 修改个人中心的状态
	uni.$on('changeMine', (value) => {
		uni.$store.commit('setState', {
			key: 'tabbarMode',
			value,
		})
	})
}

/**
 * 点击菜单
 * @param {Object} item 当前点击的菜单项
 */
function handleMenu(item) {
	if (item.type != 'middle') {
		// 判断是否配置页
		if (item.page) uni.switchTab({
			url: `/${item.pagePath}`,
		})
		else uni.navigateTo({
			url: `/${item.pagePath}`,
		})
		getNoReadNum()
		return
	}
	// 
	proxy.$refs.alert.open()
}

/**
 * 内容
 * @param {Object} ev
 */
function handleAlert(ev) {
	const index = ev.detail.index
	const item = showMenu.value[index]
	// 验证
	util.isAuth({
		success: rs => {
			// 
			if (item.url) {
				uni.navigateTo({
					url: item.url,
				})
			} else util.alert('敬请期待')
		}
	})
	// 
	proxy.$refs.alert.close()
}

// 获取未读消息数量
function getNoReadNum() {
	// 验证sdk是否准备完毕
	let isReady = uni.$chat.isReady();
	if (!isReady) {
		setTimeout(function () {
			getNoReadNum();
		}, 800);
		return
	}

	// #ifdef APP
	const unreadCount = uni.$chat.getTotalUnreadMessageCount();
	noReadNum.value = +unreadCount > 99 ? '99+' : unreadCount;
	// #endif

}
</script>

<template>
	<!-- 幽灵盒子 -->
	<view class="ghost" :style="{ paddingBottom: safeHeight }"></view>
	<!-- 底部导航 -->
	<view class="menuBox" :class="subject">
		<view class="menu">
			<view class="item" v-for="(item, index) in menu" :key="index" @click="handleMenu(item)">

				<view class="option" :class="{ active: item.page === page }" v-if="item.type == 'option'">
					<text class="text">{{ item.name }}</text>
					<view class="pot" v-if="item.page == 'news' && noReadNum != 0">{{ noReadNum }}</view>
				</view>

				<view class="middle" v-else-if="item.type === 'middle'">
					<image class="img" src="/static/footerMenuPlus.png" mode="aspectFit" v-if="subject == 'dark'" />
					<image class="img" src="/static/footerMenuPlus1.png" mode="aspectFit"
						v-else-if="subject == 'light'" />
				</view>
			</view>
		</view>
		<view class="safeArea" :style="{ height: safeHeight }"></view>
	</view>

	<!-- 底部菜单 -->
	<uni-popup ref="alert" type="bottom">
		<view class="alert mlr50 pt50 plr10 pb10">
			<scroll-view scroll-y="true" class="scroll">
				<uni-grid :column="4" :highlight="true" :showBorder="false" @change="handleAlert">
					<uni-grid-item v-for="(item, index) in showMenu" :index="index" :key="index">
						<view class="itemBox ptb30 df fdc jcc aic tac">
							<!-- <uni-icons type="image" :size="30" color="#777" /> -->
							<image class="wh80" :src="item.img" mode="aspectFill" />
							<view class="mt5">
								<text class="text f28 c333">{{ item.name }}</text>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</scroll-view>

			<view class="tac mt30">
				<uni-icons type="bottom" size="50rpx" color="#999" @click="$refs.alert.close()" />
			</view>
		</view>
	</uni-popup>
</template>

<style lang="scss">
$boderSize: 2rpx;

// 幽灵盒子
.ghost {
	height: 120rpx;
}

// 菜单
.menuBox {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */

	.menu {
		justify-content: space-between;
		padding: 20rpx 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: row;
		/* #endif */
	}

	.item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	// 黑色的
	&.dark {
		border-top: 1rpx solid #999;
		background-color: #161616;

		.active {
			.text {
				color: #fff;
			}
		}

		.text {
			color: #999;
		}
	}

	// 浅色的
	&.light {
		box-shadow: 0px 8px 20px rgba(0, 0, 0, .3);
		background-color: #fff;

		.active {
			.text {
				color: #333;
			}
		}

		.text {
			color: #999;
		}

	}

	.option {
		position: relative;
		z-index: 1;

		.pot {
			position: absolute;
			top: -16rpx;
			right: -30rpx;
			height: 24rpx;
			/* #ifndef APP-NVUE */
			min-width: 24rpx;
			/* #endif */
			line-height: 24rpx;
			border-radius: 24rpx;
			background: #FF6B17;
			color: #fff;
			font-size: 20rpx;
			padding: 4rpx;
			text-align: center;
			z-index: 11;
		}
	}

	.middle {
		.img {
			width: 80rpx;
			height: 80rpx;
		}
	}
}

// 弹窗
.alert {
	margin-bottom: 120rpx;
	background-color: #f8f8f8;
	border-radius: 30rpx;

	// 滚动块
	.scroll {
		height: 350rpx;
	}

	// 
	.itemBox {
		// padding: 30rpx;
	}
}
</style>