<template>
	<view class="u-page">
		<view class="u-page__item">
			<u-tabbar :zIndex="99999" :value="thisChecked" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
				activeColor="#FF4D03">
				<template v-for="(item,index) in tabs">
					<u-tabbar-item :key="index" :text="item['title']" :icon="item['icon']" @click="setCurrent(index)"></u-tabbar-item>
				</template>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: "tabbars",
		data() {
			return {
				tabs: [{
						title: '首页',
						icon: 'home-fill',
						url: '/pages/index/index'

					},
					{
						title: '分类',
						icon: 'grid-fill',
						url: '/pages/sort/sort'
					},
					{
						title: '购物车',
						icon: 'shopping-cart-fill',
						url: '/pages/myCart/myCart'
					},
					{
						title: '我的',
						icon: 'account-fill',
						url: '/pages/uCenter/uCenter'
					}
				],
				tabbarsHeight: 0,
			};
		},
		computed: {
			...mapGetters({
				thisChecked: 'tabbar/thisChecked',
			}),
		},
		mounted() {
			let self = this;
			// 因为uni-app中的不支持uni.createSelectorQuery支付宝获取元素信息,且支付宝中的my.createSelectorQuery不支持获取组件信息,官方建议将获取信息放在组件内部使用,然后将获取到的元素信息传至父组件
			// #ifdef MP-ALIPAY 
			this.$nextTick(() => {
				my.createSelectorQuery()
					.select('.u-tabbar__content').boundingClientRect()
					.selectViewport().scrollOffset().exec((ret) => {
						console.log(ret, '信息2');
						self['tabbarsHeight'] = ret[0]['height']
					})
			})
			// #endif
		},
		watch:{
			thisChecked(val){
				uni.switchTab({
					url: this['tabs'][val]['url']
				});
			}
		},
		methods: {
			...mapMutations({
				setCurrent: 'tabbar/setCurrent'
			}),
		}
	}
</script>

<style lang="scss">
	.u-page {
		padding: 0;

		&__item {

			&__title {
				color: $u-primary;
				background-color: $u-primary;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}

			&__slot-icon {
				width: 17px;
				height: 17px;
			}
		}
	}
</style>
