<template>
	<view class="custom_tabbar">
		<view class="side_help">
			<view class="help flex ai_center fd_c" @click="navTo('help')">
				<image class="w-30 h-30 mgb-6" src="/static/image/tabbar/help.png" mode="scaleToFill" />
				<view class="text">帮助</view>
			</view>
			<view class="mgt-20 flex ai_center fd_c" @click="navTo('complaint')">
				<image class="w-30 h-30 mgb-6" src="/static/image/tabbar/complaint.png" mode="scaleToFill" />
				<view class="text">投诉</view>
			</view>
		</view>

		<view class="tools" @click="navTo('toolsMall')">
			<image class="w-80 h-80" src="/static/image/tabbar/tools_icon.png" mode="scaleToFill" />
			<view class="title">工具广场</view>
		</view>

		<view class="red_packet" @click="navTo('redPacket')">
			<image class="img" src="/static/image/tabbar/red_packet.png" mode="scaleToFill" />
		</view>

		<!-- <view class="custom-tabbar">
			<view v-for="(item, index) in list" :key="index" class="tabbar-item" @click="switchTab(index)">
				<view class="menu-item">
					<image v-if="currentIndex === index" class="w-48 h-48" :src="item.check_icon" mode="scaleToFill" />
					<image v-else class="w-48 h-48" :src="item.icon" mode="scaleToFill" />
					<text class="mgt-4" :class="{ active: currentIndex === index }">{{ item.text }}</text>
				</view>
			</view>
		</view> -->
	</view>
</template>
<script>
	export default {
		components: {},
		props:{
			currentIndex:{
				type:Number,
				default:0,
			}
		},
		data(){
			return{
				// TabBar 列表
				list:[{
					text: "书架",
					pagePath: "/pages/index/index",
					icon: '/static/image/tabbar/bookshelf.png',
					check_icon: '/static/image/tabbar/bookshelf_on.png'
				},
				{
					text: "书城",
					pagePath: "/pages/bookMall/index",
					icon: '/static/image/tabbar/bookMall.png',
					check_icon: '/static/image/tabbar/bookMall_on.png'
				},
				{
					text: "我的",
					pagePath: "/pages/my/index",
					icon: '/static/image/tabbar/my.png',
					check_icon: '/static/image/tabbar/my_on.png'
				},
				],
				navList:{
					help: '/pages/commonModule/help',
					complaint: '/pages/commonModule/complaint',
					redPacket: '/pages/commonModule/redPacket',
					toolsMall: '/pages/toolsMall/index'
				}
			}
		},
		methods: {
			// 切换 Tab
			switchTab (index) {
				uni.switchTab({
					url: this.list[index].pagePath,
				});
			},
			navTo (name) {
				uni.navigateTo({
					url: this.navList[name],
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
.custom_tabbar {
	z-index: 9999;
	position: absolute;
	height: 1rpx;
}

.side_help {
	position: fixed;
	left: 0;
	bottom: 20%;
	width: 50rpx;
	background-color: red;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	padding: 20rpx 0;
	border-radius: 0 30rpx 30rpx 0;
	z-index: 9999;

	.text {
		text-align: center;
	}
}

.tools {
	position: fixed;
	right: 20rpx;
	bottom: 33%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 9999;

	.title {
		margin-top: 2rpx;
		font-size: 20rpx;
		width: 100rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #c7dae2, #84c9e6);
		border-radius: 50rpx;
		color: #fff;
	}
}

.red_packet {
	position: fixed;
	right: 20rpx;
	bottom: 20%;
	z-index: 9999;

	.img {
		width: 127rpx;
		height: 96rpx;
	}
}

// .custom-tabbar {
// 	position: fixed;
// 	left: 0;
// 	right: 0;
// 	bottom: 0;
// 	z-index: 9999;
// 	display: flex;
// 	height: 100rpx;
// 	/* 适配安全区 */
// 	padding-top: 10rpx;
// 	/* 默认 Android */
// 	padding-bottom: 10rpx;
// 	background-color: #ffffff;
// 	/* background-color: transparent; */
// 	justify-content: space-between;
// }

/* 兼容 iOS 安全区域 */
// @supports (bottom: env(safe-area-inset-bottom)) {
// 	.custom-tabbar {
// 		height: calc(100rpx + env(safe-area-inset-bottom));
// 		padding-bottom: env(safe-area-inset-bottom);
// 	}
// }

.tabbar-item {
	flex: 1;


}

.menu-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #E5DCD6;
	font-size: 20rpx;


}

.add_icon {
	position: absolute;
	top: -30rpx;
	width: 96rpx;
	height: 96rpx;
}

.active {
	color: #FFA74F;
}
</style>