<template>
	<view class="device-detail-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<u-sticky bgColor="#fff"><u-tabs :list="list" :current="currentTab" @click="handleTabClick"></u-tabs></u-sticky>
		<view style="margin-top:30rpx;" v-show="currentTab == 0"><basicInfo /></view>
		<view style="margin-top:30rpx;" v-show="currentTab == 1"><realTimeData /></view>
		<view style="margin-top:30rpx;" v-show="currentTab == 2"><historyData /></view>
		<view style="margin-top:30rpx;" v-show="currentTab == 3"><alertHistory /></view>
		<view style="margin-top:30rpx;" v-show="currentTab == 4"><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 {
			list: [{ name: '基础信息' }, { name: '实时数据' }, { name: '历史数据' }, { name: '告警记录' }, { name: '命令记录' }],
			currentTab:0,
			id: '',
		};
	},
	onLoad(options) {
		const { id } = options;
		this.id = id;
		console.log(this.id);
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	methods: {
		handleTabClick({index}){
			this.currentTab = index;
		}
	}
};
</script>