<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-show="current === 0">
				<device-info :info="info"></device-info>
			</view>
			<view v-show="current === 1">
				<real-data :msg="msg"></real-data>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue'
	import deviceInfo from './device-info.vue'
	import realData from './real-data.vue'
	import { getDeviceInfo,getDeviceLatestUpMessage } from '@/api/device.js'
	import { getMQTTClient } from '@/common/mqttClient.js'
	export default {
		components: {
			uniSegmentedControl,
			deviceInfo,
			realData
		},
		data() {
			return {
				info:{},
				msg:{},
				productId: '',
				deviceName: '',
				items: [
					'设备信息',
					'实时数据'
				],
				current: 0,
				client: null
			}
		},
		onLoad(e){
			if(e){
				this.productId = e.productId;
				this.deviceName = e.deviceName;
			}
			this.fetchDeviceInfo()
			this.fetchDeviceData()
		},
		methods: {
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index
				}
			},
			fetchDeviceInfo(){
				getDeviceInfo(this.productId,this.deviceName).then(response => {
					this.info = response.data;
					this.client = getMQTTClient(this.info.productId,this.info.deviceName,this.info.deviceSecret)
					console.log(this.client)
				})
			},
			fetchDeviceData(){
				getDeviceLatestUpMessage(this.productId,this.deviceName).then(response => {
					if(response.data){
						this.msg = response;
					} 
					console.log(this.msg)
				})
			}
		},
	}
</script>

<style>
	
</style>
