<template>
	
	<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="transShow">
		<view :class="displaytype==1?'tab-bar_1':'tab-bar_2'">
			<block v-if="displaytype==1">
				<view v-if="currenttype=='1'" @click="jump(1)" class="tab-bar-item_1 ">
					<img src="../static/tabbar/home-a.png" class="icon_1" />
					<text lines="1" class="text_7">首页</text>
				</view>
				<view v-else class="tab-bar-item_1" @click="jump(1)">
					<img src="../static/tabbar/home.png" class="icon_1" />
					<text lines="1" class="text_8">首页</text>
				</view>



				<view v-if="currenttype=='2'" @click="jump(2)" class="tab-bar-item_2">
					<img src="../static/tabbar/yingyong-a.png" class="icon_2" />
					<text lines="1" class="text_7">应用</text>
				</view>
				<view v-else @click="jump(2)" class="tab-bar-item_2">
					<img src="../static/tabbar/yingyong.png" class="icon_2" />
					<text lines="1" class="text_8">应用</text>
				</view>


				<view v-if="currenttype=='3'" @click="jump(3)" class="tab-bar-item_3">
					<img src="../static/tabbar/learn-a.png" class="icon_3" />
					<text lines="1" class="text_7">学习</text>
				</view>
				<view v-else @click="jump(3)" class="tab-bar-item_3">
					<img src="../static/tabbar/learn.png" class="icon_3" />
					<text lines="1" class="text_8">学习</text>
				</view>


				<view v-if="currenttype=='4'" @click="jump(4)" class="tab-bar-item_4">
					<img src="../static/tabbar/user-a.png" class="icon_4" />
					<text lines="1" class="text_7">我的</text>
				</view>
				<view v-else @click="jump(4)" class="tab-bar-item_4">
					<img src="../static/tabbar/user.png" class="icon_4" />
					<text lines="1" class="text_8">我的</text>
				</view>
			</block>
			<block v-if="displaytype==2">
				<view v-if="currenttype=='1'" @click="jump(1)" class="tab-bar-item_1">
					<img src="../static/tabbar/home-a.png" class="icon_1" />
					<text lines="1" class="text_7">首页</text>
				</view>
				<view v-else class="tab-bar-item_1" @click="jump(1)">
					<img src="../static/tabbar/home-b.png" class="icon_1" />
					<text lines="1" class="text_9">首页</text>
				</view>



				<view v-if="currenttype=='2'" @click="jump(2)" class="tab-bar-item_2">
					<img src="../static/tabbar/yingyong-a.png" class="icon_2" />
					<text lines="1" class="text_7">应用</text>
				</view>
				<view v-else @click="jump(2)" class="tab-bar-item_2">
					<img src="../static/tabbar/yingyong-b.png" class="icon_2" />
					<text lines="1" class="text_9">应用</text>
				</view>


				<view v-if="currenttype=='3'" @click="jump(3)" class="tab-bar-item_3">
					<img src="../static/tabbar/learn-a.png" class="icon_3" />
					<text lines="1" class="text_7">学习</text>
				</view>
				<view v-else @click="jump(3)" class="tab-bar-item_3">
					<img src="../static/tabbar/learn-b.png" class="icon_3" />
					<text lines="1" class="text_9">学习</text>
				</view>


				<view v-if="currenttype=='4'" @click="jump(4)" class="tab-bar-item_4">
					<img src="../static/tabbar/user-a.png" class="icon_4" />
					<text lines="1" class="text_7">我的</text>
				</view>
				<view v-else @click="jump(4)" class="tab-bar-item_4">
					<img src="../static/tabbar/user-b.png" class="icon_4" />
					<text lines="1" class="text_9">我的</text>
				</view>
			</block>

		</view>
	</uni-transition>

</template>

<script>
	export default {
		name: "tabbar",
		props: {
			currenttype: {
				type: String,
				default: "1"
			},
			displaytype: {
				type: String,
				default: "1"
			},
			transShow:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				modeClass: ['fade'],
				maskClass: {
					position: 'fixed',
					bottom: 0,
					top: 0,
					left: 0,
					right: 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				transfromClass: {
					position: 'fixed',
					bottom: 0,
					left: 0,
					right: 0,
					display: 'flex',
					'justify-content':'center',
					'align-items': 'center'
				},
				ismoving:false
			};
		},
		created() {
			let app = this;
			
			
			uni.$on('onPageScroll', function(data) {
			if(!app.ismoving)
			{
				app.ismoving = true;
				app.modeClass = ['slide-bottom'];
				app.transShow =true;
				
				setTimeout(function(){  
					console.log(222);
					app.modeClass = ['slide-bottom'];
					app.transShow = false;
					app.ismoving = false;
				},5000)
			}
			});
			
		},
		methods: {
			
			jump(type) {

				if (type == 1) {
					console.log('hahhaha');
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}

				if (type == 2) {
					this.$navTo('pages/yingyong/yingyong')
				}

				if (type == 3) {
					this.$navTo('pages/learn/learn')
				}

				if (type == 4) {
					this.$navTo('pages/user/user')
				}
			},
		}
	}
</script>

<style>
	.tab-bar_1 {
		width: 750rpx;
		height: 105rpx;
		background: url(../static/tabbarbg2.png) 100% no-repeat;
		background-size: 100% 100%;
		flex-direction: row;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 2;
	}

	.tab-bar_2 {
		width: 750rpx;
		height: 105rpx;
		background-image: unset !important;
		background-color: #eee !important;
		flex-direction: row;
		display: flex;
		position: fixed;
		bottom: 0;
	}
	
	.tab-bar-item_1 {
		width: 50rpx;
		height: 70rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 15rpx auto 0 81rpx;
		align-items: center;
	}
	
	.icon_1 {
		width: 44rpx;
		height: 44rpx;
	}
	

	.text_7 {
		width: 50rpx;
		height: 19rpx;
		overflow-wrap: break-word;
		color: rgba(230, 0, 18, 1);
		font-size: 20rpx;
		font-family: FZLTKHK--GBK1-0;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 7rpx 0 0 2rpx;
	}

	.tab-bar-item_2 {
		width: 50rpx;
		height: 70rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 15rpx auto 0 81rpx;
		align-items: center;
	}

	.icon_2 {
		width: 44rpx;
		height: 44rpx;
	}

	.text_8 {
		width: 50rpx;
		height: 18rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		font-family: FZLTKHK--GBK1-0;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 7rpx 0 0 2rpx;
	}

	.tab-bar-item_3 {
		width: 50rpx;
		height: 70rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 15rpx auto 0 81rpx;
		align-items: center;
	}

	.icon_3 {
		width: 44rpx;
		height: 44rpx;
	}

	.text_9 {
		width: 37rpx;
		height: 18rpx;
		overflow-wrap: break-word;
		color: #797979;
		font-size: 20rpx;
		font-family: FZLTKHK--GBK1-0;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 7rpx 0 0 2rpx;
	}

	.tab-bar-item_4 {
		width: 50rpx;
		height: 68rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 15rpx auto 0 81rpx;
		align-items: center;
	}

	.icon_4 {
		width: 44rpx;
		height: 44rpx;
	}

	.text_10 {
		width: 38rpx;
		height: 18rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		font-family: FZLTKHK--GBK1-0;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 20rpx;
		margin: 6rpx 0 0 4rpx;
	}

	/*左侧滑出*/
	.slip_in_animation {
		animation: slip_in 5s;
	}



	/*左侧滑出*/
	@keyframes slip_out {
		from {
			transform: translateX(0);
		}

		to {
			transform: translateX(-100%);
		}
	}
</style>
