<template>
	<view class="device-status">
		<view class="title-wrap">
			<view style="width: 175px;">
				<u-subsection :list="modeList" mode="subsection" :current="current"
					@change="sectionChange"></u-subsection>
			</view>
			<u--text iconStyle="color: #3c9cff; margin-right: 4px; font-size: 26px;" type="primary"
				prefixIcon="file-text" align="right" :text="$tt('status.devDetail')"
				@click="handleGoToDeviceDetail"></u--text>
		</view>
		<view class="running-status" v-show="current==0">
			<base-status :device="device" ref="baseStatus"></base-status>
		</view>
		<view class="deviceVariable" v-show="current==1">
			<device-variable ref="deviceVariable" :device="device"></device-variable>
		</view>
	</view>
</template>

<script>
	import baseStatus from './base.vue';
	import deviceVariable from './variable.vue';

	export default {
		name: 'running-status',
		components: {
			baseStatus,
			deviceVariable
		},
		props: {
			device: {
				type: Object,
				default: null,
				required: true
			}
		},
		watch: {
			// 兼容小程序
			device: function (newVal, oldVal) {
				this.deviceInfo = newVal;
				this.isSubDev = newVal.subDeviceList && newVal.subDeviceList.length > 0;
			}
		},
		data () {
			return {
				modeList: [this.$tt('status.stateModel'), this.$tt('status.dataModel')],
				current: 0,
				isSubDev: false,
				deviceInfo: {} // 设备信息
			};
		},
		created () {
			// 获取设备状态(兼容H5和APP)
			if (this.device.subDeviceList) {
				this.deviceInfo = this.device;
				this.isSubDev = this.device.subDeviceList.length > 0;
			}
		},
		methods: {
			sectionChange (index) {
				this.current = index;
			},
			baseStatusRefresh () {
				this.$refs.baseStatus.deviceStatusRefresh();
			},
			// 调整到设备详情
			handleGoToDeviceDetail () {
				const { deviceId } = this.deviceInfo;
				uni.navigateTo({
					url: '/pagesA/home/device/detail/index?deviceId=' + deviceId
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.device-status {
		.title-wrap {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx;
		}
	}
</style>