<template>
	<view>
		<view>
			<home v-if="value==0" @goTab="tabbarClick" />
			<classification v-show="value==1" @goTab="tabbarClick" />
			<shoppingCart v-if="value==2" />
		</view>
		<uni-fab style="bottom: 100px;" ref="fab" :pattern="pattern" @fabClick="fabClick" :popMenu="false" horizontal="right"/>
		<u-tabbar :value="value" :fixed="true" :placeholder="false" :safeAreaInsetBottom="true" activeColor="#fd5003"
			inactiveColor="#727272">
			<u-tabbar-item text="首页" icon="home-fill" @click="tabbarClick(0)"></u-tabbar-item>
			<u-tabbar-item text="商品" icon="grid-fill" @click="tabbarClick(1)"></u-tabbar-item>
			<u-tabbar-item text="购物车" icon="shopping-cart-fill" @click="tabbarClick(2)"></u-tabbar-item>
			<!-- <u-tabbar-item text="首页" icon="home-fill" @click="tabbarClick(3)"></u-tabbar-item> -->
		</u-tabbar>
	</view>
</template>

<script>
	import home from './home.vue'
	import classification from './classification.vue'
	import shoppingCart from './shoppingCart.vue'
	export default {
		components: {
			home,
			classification,
			shoppingCart
		},
		data() {
			return {
				value: 0,
				pattern: {
					icon: 'home-filled',
					buttonColor:'#ea4c18'
				}
			}
		},
		onLoad(options) {
			if (uni.getStorageSync('tabKey')) {
				this.tabbarClick(uni.getStorageSync('tabKey'))
				uni.removeStorageSync('tabKey')
			}
		},
		methods: {
			tabbarClick(tab) {
				this.value = tab
			},
			fabClick(){
				uni.switchTab({
					url: '/pages/tabBar/home',
				})
			}
		}
	}
</script>

<style  lang="scss" scoped>
	.containerMall {
		height: calc(100vh - 85px);
	}
</style>