<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: #486ff2; margin-right: 4px; font-size: 22px;" type="primary"
				prefixIcon="list-dot" align="right" text="设备详情" @click="handleGoToDeviceDetail"></u--text>
		</view>
		<view v-if="isRelayProduct">
			<relay-control :device="device" ref="relayControl"></relay-control>
		</view>
		<view v-else-if="isVoiceProduct">
			<voice :device="device" ref="voice"></voice>
		</view>
		<view v-else-if="isGatewayProduct">
			<gateway :device="device" ref="gateway"></gateway>
		</view>
		<view v-else-if="isdisplay">
			<display :device="device" ref="display"></display>
		</view>
		<view v-else>
			<view v-if="current==0">
				<base-status :device="device" ref="baseStatus"></base-status>
			</view>
			<view v-else-if="current==1">
				<device-variable ref="deviceVariable" :device="device"></device-variable>
			</view>
			<view v-else>
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import baseStatus from './base.vue';
	import deviceVariable from './variable.vue';
	import relayControl from './relay.vue';
	import voice from './voice.vue';
	import gateway from './gateway.vue';
	import display from './display.vue'

	export default {
		name: 'running-status',
		components: {
			baseStatus,
			deviceVariable,
			relayControl,
			voice,
			gateway,
			display
		},
		props: {
			device: {
				type: Object,
				default: null,
				required: true
			}
		},
		watch: {
			// 兼容小程序
			device: {
				handler(newVal) {
					this.deviceInfo = newVal;
					this.isSubDev = newVal.subDeviceList && newVal.subDeviceList.length > 0;
					this.isRelayProduct = newVal.productName === '多路控制器';
					this.isVoiceProduct = newVal.productName === '声卡';
					this.isGatewayProduct = newVal.productName === '网关';
					this.isdisplay = newVal.productName === '显卡设置';
				},
				immediate: true,
				deep: true
			}
		},
		data() {
			return {
				modeList: ['状态模式', '数据模式'],
				current: 0,
				isSubDev: false,
				isRelayProduct: false,
				isVoiceProduct: false,
				isGatewayProduct: false,
				isdisplay: false,
				deviceInfo: {} // 设备信息
			};
		},
		created() {

			// 获取设备状态(兼容H5和APP)
			if (this.device.subDeviceList) {
				this.deviceInfo = this.device;
				this.isSubDev = this.device.subDeviceList.length > 0;
			}
			this.isRelayProduct = this.device.productName === '多路控制器';
			this.isVoiceProduct = this.device.productName === '声卡';
			this.isGatewayProduct = this.device.productName === '网关卡兼容';
			this.isdisplay = this.device.productName === '显卡设置';
			console.log("create的数据", JSON.stringify(this.deviceInfo))

		},
		methods: {

			sectionChange(index) {
				this.current = index;
			},
			baseStatusRefresh() {
				this.$refs.baseStatus.deviceStatusRefresh();
			},
			// 调整到设备详情
			handleGoToDeviceDetail() {
				const {
					deviceId
				} = this.deviceInfo;
				console.log("deviceId", JSON.stringify(deviceId))

				uni.navigateTo({
					url: '/pagesA/home/device/detail/index?deviceId=' + deviceId
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.device-status {
		.status-title {
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
			line-height: 45rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin: 0 20rpx 27rpx;
		}

		.title-wrap {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0 30rpx;
		}
	}
</style>