<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;">
			<basicInfo v-if="currentTab == 0" :deviceDetail="deviceDetail" />
			<realTimeData v-if="currentTab === 1" />
			<historyData v-if="currentTab === 2" :keys="keys" :yesterday="yesterday" :today="today" :timeDiff="timeDiff" :historyData="historyData" :entityId="entityId" @update="handleUpdate" />
			<alarmHistory v-if="currentTab === 3" />
			<commondRecord v-if="currentTab === 4" />
		</view>
		<f-tabbar></f-tabbar>
	</view>
</template>

<script>
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import basicInfo from './tabDetail/basicInfo.vue';
import realTimeData from './tabDetail/realtimeData.vue';
import alarmHistory from './tabDetail/alarmHistory.vue';
import historyData from './tabDetail/historyData.vue';
import commondRecord from './tabDetail/commondRecord.vue';
import { getDeviceKeys, getHistroyData } from '@/pages/device/api/index.js';
import { formatToDate } from '@/plugins/utils.js';
export default {
	components: {
		fTabbar,
		basicInfo,
		realTimeData,
		alarmHistory,
		historyData,
		commondRecord
	},
	data() {
		return {
			list: [{ name: '基础信息' }, { name: '实时数据' }, { name: '历史数据' }, { name: '告警记录' }, { name: '命令记录' }],
			currentTab: 2,
			id: '',
			deviceDetail: {},
			keys: [],
			yesterday: '',
			today: '',
			timeDiff: '',
			historyData: [],
			entityId: ''
		};
	},
	async onLoad(options) {
		const { id, alarmStatus, lastOnlineTime, tbDeviceId } = options;
		const res = await uni.$u.http.get(`/yt/device/${id}`);
		this.deviceDetail = { ...res, alarmStatus, lastOnlineTime };

		// var socketTask = uni.connectSocket({
		// 	url: 'wss://dev.thingskit.com:8080/api/ws/plugins/telemetry?token=' + uni.getStorageSync('userInfo').isToken, //仅为示例，并非真实接口地址。
		// 	complete: ()=> {}
		// });
		// uni.onSocketOpen((header)=>{
		// 	console.log('连接成功',header)
		// })
		// // socketTask.onMessage(function(data) {
		// // 	console.log('收到消息了', data);
		// // });
		// socketTask.send({
		// 	data: JSON.stringify({
		// 		attrSubCmds: [],
		// 		tsSubCmds: [
		// 			{
		// 				entityType: 'DEVICE',
		// 				entityId: id,
		// 				scope: 'LATEST_TELEMETRY',
		// 				cmdId: 1
		// 			}
		// 		],
		// 		historyCmds: [],
		// 		entityDataCmds: [],
		// 		entityDataUnsubscribeCmds: [],
		// 		alarmDataCmds: [],
		// 		alarmDataUnsubscribeCmds: [],
		// 		entityCountCmds: [],
		// 		entityCountUnsubscribeCmds: []
		// 	}),
		// 	success() {
		// 		console.log('发送成功了');
		// 	}
		// });

		const keys = await getDeviceKeys(tbDeviceId);
		// 隐藏原生的tabbar'
		this.keys = [keys];
		const date = new Date();
		const year = date.getFullYear(); //获取完整的年份(4位)
		const month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
		const day = date.getDate(); //获取当前日(1-31)
		const yesterday = `${year}-${month}-${day - 1}`;
		const today = `${year}-${month}-${day + 1}`;
		this.yesterday = yesterday;
		this.today = today;
		this.entityId = tbDeviceId
		const data = await getHistroyData({
			entityId: tbDeviceId,
			startTs: formatToDate(yesterday, 'x'),
			endTs: formatToDate(today, 'x'),
			keys: keys[0]
		});

		this.historyData = data[keys[0]].map(item => {
			return {
				value: item.value,
				ts: formatToDate(item.ts, 'YYYY-MM-DD HH:mm:ss')
			};
		});
		this.timeDiff = '30分钟';
		uni.hideTabBar();
	},
	methods: {
		handleTabClick({ index }) {
			this.currentTab = index;
		},
		handleUpdate(data){
			this.historyData = data.map(item => {
				return {
					value: item.value,
					ts: formatToDate(item.ts, 'YYYY-MM-DD HH:mm:ss')
				};
			});
		}
	}
};
</script>