<template>
	<view>
		<view>
			<home v-if="value==0" @goTab="tabbarClick" @goSearch="goSearch"/>
			<classification ref="goods" v-show="value==1" @goTab="tabbarClick" />
			<shoppingCart v-if="value==2" />
		</view>
		<uni-fab v-if="value==0||value==1" style="bottom: 200px;" 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="首页" @click="tabbarClick(0)">
				<image style="width: 48rpx;height: 48rpx;" slot="active-icon"
					src="/static/images/tabBar/home_selected.png"></image>
				<image style="width: 48rpx;height: 48rpx;" slot="inactive-icon" src="/static/images/tabBar/home.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="商品" @click="tabbarClick(1)">
				<image style="width: 48rpx;height: 48rpx;" slot="active-icon"
					src="/static/images/tabBar/classification_selected.png"></image>
				<image style="width: 48rpx;height: 48rpx;" slot="inactive-icon"
					src="/static/images/tabBar/classification.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="购物车" @click="tabbarClick(2)">
				<image style="width: 48rpx;height: 48rpx;" slot="active-icon"
					src="/static/images/tabBar/cart_selected.png"></image>
				<image style="width: 48rpx;height: 48rpx;" slot="inactive-icon" src="/static/images/tabBar/cart.png">
				</image>
			</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')
			}
			uni.$on('jfSearchData', (data) => {
				this.$refs.goods.searchData(data)
			})
		},
		methods: {
			tabbarClick(tab) {
				this.value = tab
			},
			fabClick() {
				uni.switchTab({
					url: '/pages/tabBar/home',
				})
			},
			goSearch() {
				this.value = 1
				setTimeout(() => {
					this.$refs.goods.inSearch()
				}, 200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.containerMall {
		height: calc(100vh - 85px);
	}
	::v-deep .uni-fab__circle--rightBottom {
		bottom: 170rpx;
	}
</style>