<template>
	<view class="device-detail-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<tab :lists="lists" :tab_color="tab_color" @switchover="switchover" :gauge="gauge"></tab>
		<view style="margin-top:140rpx;" v-show="showTabPage == 1"><basicInfo /></view>
		<view style="margin-top:140rpx;" v-show="showTabPage == 2"><realTimeData /></view>
		<view style="margin-top:140rpx;" v-show="showTabPage == 3"><historyData /></view>
		<view style="margin-top:140rpx;" v-show="showTabPage == 4"><alertHistory /></view>
		<view style="margin-top:140rpx;" v-show="showTabPage == 5"><commondRecord /></view>
		<f-tabbar></f-tabbar>
	</view>
</template>

<script>
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import Tab from '@/components/yyh-tab/Tab.vue';
import basicInfo from './tabDetail/basicInfo.vue';
import realTimeData from './tabDetail/realtimeData.vue';
import alertHistory from './tabDetail/alertHistory.vue';
import historyData from './tabDetail/historyData.vue';
import commondRecord from './tabDetail/commondRecord.vue';

export default {
	components: {
		fTabbar,
		Tab,
		basicInfo,
		realTimeData,
		alertHistory,
		historyData,
		commondRecord
	},
	data() {
		return {
			lists: [{ id: 1, name: '基础信息' }, { id: 2, name: '实时数据' }, { id: 3, name: '历史数据' }, { id: 4, name: '告警记录' }, { id: 5, name: '命令记录' }],
			//tab切换选中的颜色
			tab_color: '#3b87f6',
			// tab组件position: fixed布局距离头部的位置大小（rpx）
			gauge: 0,
			showTabPage: 1
		};
	},
	onLoad(e) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	methods: {
		switchover: function(id) {
			console.log(id);
			this.showTabPage = id;
		}
	}
};
</script>

<style lang="scss" scoped>
.device-detail-page {
}
</style>