<template>
	<view class="content">		
		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<Realtime ref="realtime"></Realtime>
		</view>
		<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<DeviceStatus ref="devicestatus"></DeviceStatus>
		</view>
		<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
			<MyPage ref="mypage"></MyPage>
		</view>
		<u-tabbar v-model="currentIndex" @change="switchTabbar" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="实时监测" icon="play-right"></u-tabbar-item>
			<u-tabbar-item text="设备状态" icon="grid"></u-tabbar-item>		
			<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import Realtime from '../realtime/realtime.vue'
	import DeviceStatus from '../device-status/device-status.vue'
	import MyPage from '../my/my.vue'
	
	export default {
		components: {
			Realtime,
			DeviceStatus,
			MyPage
		},
		data() {
			return {
				value6: 0,				
				// tabbar当前被选中的序号
				currentIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: [],
				// 底部tabbar菜单数据
				tabbarList: [{
						title: '元素',
						activeIcon: 'count-fill',
						inactiveIcon: 'menu'
					},
					{
						title: '组件',
						activeIcon: 'honor-fill',
						inactiveIcon: 'honor'
					},
					{
						title: '会员',
						activeIcon: 'vip-fill',
						inactiveIcon: 'vip',
						activeIconColor: '#FFFFFF',
						inactiveIconColor: '#FFFFFF',
						iconSize: 50,
						out: true
					},
					{
						title: '发现',
						activeIcon: 'discover-fill',
						inactiveIcon: 'discover',
						count: 100
					},
					{
						title: '图鸟',
						activeIcon: 'computer-fill',
						inactiveIcon: 'computer',
						dot: true
					}
				]
			}
		},		
		onLoad(options) {
			const index = Number(options.index || 0)
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index
			})
			this.switchTabbar(index)
		},
		methods: {			
			// 导航页面滚动到底部
			tabbarPageScrollLower(e) {},
			// 切换导航
			switchTabbar(index) {
				this._switchTabbarPage(index)
			},
			// 切换导航页面
			_switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				this.currentIndex = index
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>