<template>
	<view class="basic-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module />
		<view class="u-flex" style="justify-content: space-between;height: 140rpx;background-color: #fff;border-radius: 18px;">
			<view class="u-flex">
				<view style="margin-left: 20rpx;">
						{{deviceDetail.name}}
				</view>
				<view style="margin-left: 20rpx; font-size: 14px;" :style="{color:deviceDetail.deviceState==='INACTIVE'?'#666':deviceDetail.deviceState==='ONLINE'?'#377DFF':'#DE4437'}">
					{{deviceDetail.deviceState==='INACTIVE'?'未激活':deviceDetail.deviceState==='ONLINE'?'在线':'离线'}}
				</view>
			</view>
			<view style="margin-right: 20rpx;">
				<u-button type="primary" shape="circle" size="mini" text="下发命令" @click="showModal"/>
			</view>
		</view>
		<view style="margin-top: 40rpx;height: 577rpx;background-color: #fff;border-radius: 20px;">
			<u-list>
				<u-list-item>
				
					<u-cell  :title="deviceDetail.sn">
						<view slot="icon">设备编号</view>
					</u-cell>
				</u-list-item>
				<u-list-item>
					<u-cell  :title="deviceType">
						<view slot="icon">设备类型</view>
					</u-cell>
				</u-list-item>
				<u-list-item>
					<u-cell  :title="deviceDetail.organizationDTO.name">
						<view slot="icon">所属组织</view>
					</u-cell>
				</u-list-item>
				<u-list-item>
					<u-cell  :title="formatLastOnlineTime">
						<view slot="icon">最后连接时间</view>
					</u-cell>
				</u-list-item>
				<u-list-item>
					<u-cell  :title="alarmStatus">
						<view slot="icon">是否告警</view>
					</u-cell>
				</u-list-ite>
					<u-cell  :title="deviceDetail.description">
						<view slot="icon">设备描述</view>
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
		<!-- 下发指令 -->
		<u-modal  :show="showModel" title="命令下发" closeOnClickOverlay showCancelButton @close="hiddenModal" @cancel="hiddenModal" @confirm="handleConfirm" >
			<u--textarea placeholder="请输入命令内容" v-model="formModel.intro" count />
		</u-modal>
		<f-tabbar />
	</view>
</template>

<script>
import {formatToDate} from '@/plugins/utils.js';
export default {
	props:{
		deviceDetail:{
			type:Object,
			default:()=>({}),
		}
	},
	data() {
		return {
			showModel: false,
		};
	},
	computed:{
		deviceType(){
			return this.deviceDetail.deviceType==='DIRECT_CONNECTION'?'直连设备':this.deviceDetail.deviceType==='GATEWAY'?'网关设备':this.deviceDetail.deviceType==='SENSOR'?'网关子设备':''
		},
		alarmStatus(){
			return this.deviceDetail.alarmStatus === '0'?'否':'是'
		},
		formatLastOnlineTime(){
			return formatToDate(Number(this.deviceDetail.lastOnlineTime),'YYYY-MM-DD HH:mm:ss')
		}
	},
	onLoad(e) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	onMounted(){
		console.log(this.deviceDetail)
		
	},
	methods: {
		showModal() {
			this.showModel = true;
		},
		hiddenModal(){
			this.showModel = false;
		},
		handleConfirm(){
			console.log('确定')
		}
	}
};
</script>