<template>
	<view>
		<view class="page-content">
			<slot></slot>
		</view>
		
		<u-tabbar
			:value="current"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<!--  #ifdef  MP-WEIXIN  -->
			<u-tabbar-item text="首页" icon="home" @click="changeTab(0)" ></u-tabbar-item>
			<u-tabbar-item text="短剧" icon="photo" @click="changeTab(1)" ></u-tabbar-item>
			<u-tabbar-item text="数据" icon="integral" @click="changeTab(2)" ></u-tabbar-item>
			<u-tabbar-item text="任务" icon="play-right" @click="changeTab(3)" ></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="changeTab(4)" ></u-tabbar-item>
			<!--  #endif -->
			<!--  #ifdef  H5  -->
			<u-tabbar-item text="首页" icon="home" @click="changeTab(0)" ></u-tabbar-item>
			<u-tabbar-item text="变现" icon="photo" @click="changeTab(1)" ></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="changeTab(2)" ></u-tabbar-item>
			<!--  #endif -->
			
		</u-tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		name:"gTabbar",
		props: {
			current: {
				type: Number,
				default: 0
			}
		},
		computed: {
			...mapState(['token'])
		},
		data() {
			return {
				list: []
			};
		},
		onLoad() {
			uni.hideTabBar()
		},
		onShow() {
			uni.hideTabBar()
			if(this.token) {
				this.getUserInfo()
			}
		},
		methods: {
			...mapActions(['getUserInfo']),
			changeTab(name) {
				if(name == this.current) return;
				let url = ''
				// #ifdef H5
				switch(name) {
					case 0: 
						url = '/pages/home/h5/h5'
						break;
					case 1:
						url = '/pages/shortPlay/shortPlay'
						break;
					case 2:
						url = '/pages/my/h5/h5'
						break;
				}
				// #endif
				// #ifdef MP-WEIXIN 
				switch(name) {
					case 0: 
						url = '/pages/home/mini/mini'
						break;
					case 1:
						url = '/pages/shortPlay/shortPlay'
						break;
					case 2:
						url = '/pages/data/data'
						break;
					case 3:
						url = '/pages/task/task'
						break;
					case 4:
						url = '/pages/my/mini/mini'
						break;
				}
				// #endif
				if(this.token || (!this.token && ['/pages/home/mini/mini', '/pages/shortPlay/shortPlay'].includes(url))) {
					uni.switchTab({
						url,
						success() {
							uni.hideTabBar()
						}
					})
				} else {
					uni.reLaunch({
						// #ifdef H5
						url: '/pages/login/login',
						// #endif
						// #ifdef MP-WEIXIN 
						url: '/pages/entry/entry'
						// #endif
					})
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	.page-content {
		width: 100vw;
		background-color: #F7F8FA;
		overflow-x: hidden;
	}

	.custom_style {
		width: 132upx;
		height: 132upx;

		image {
			width: 132upx;
			height: 132upx;
			margin-top: -36upx;
		}
	}

	.loginBtn {
		width: 686upx;
		height: 88upx;
		background: linear-gradient(180deg, #C8F8B4 0%, #53DC1A 100%);
		font-size: 36upx;
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 44upx;
		margin-top: 132upx;
		margin-bottom: 44upx;
		position: relative;
		view {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 2;
		}
	}

	.disagreeBtn {
		width: 686upx;
		height: 88upx;
		background: #EBEDF0;
		font-size: 36upx;
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: 400;
		color: #323233;
		border-radius: 44upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 132upx;
	}
</style>