<template>
	<view class="basic-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module />
		<view class="basic-title">
			<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 class="detail">
			<view class="detail-item">
				<view class="detail-label">设备编号</view>
				<view class="detail-value">{{ deviceDetail.sn }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">设备类型</view>
				<view class="detail-value">{{ deviceType }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">所属组织</view>
				<view class="detail-value">{{ deviceDetail.organizationDTO.name }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">最后连接时间</view>
				<view class="detail-value">{{ formatLastOnlineTime }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">是否告警</view>
				<view class="detail-value">{{ alarmStatus }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">设备描述</view>
				<view class="detail-value">{{ deviceDetail.description }}</view>
			</view>
		</view>

		<!-- 下发命令 -->
		<u-modal :show="showModel" closeOnClickOverlay showCancelButton width="375px" @close="hiddenModal" @cancel="hiddenModal" @confirm="handleConfirm">
			<view>
				<view class="u-flex" style="align-items: center;">
					<text style="color: #333; font-size: 28rpx;margin-right: 10rpx;">下发类型:</text>
					<u-radio-group v-model="value" placement="row" style="margin-left: 10rpx;" size="20">
						<u-radio activeColor="#3388FF" label="OneWay"></u-radio>
						<u-radio activeColor="#3388FF" label="TwoWay"></u-radio>
					</u-radio-group>
				</view>
				<view style="margin-top: 28rpx;"><u--textarea placeholder="请输入命令内容" v-model="formModel.intro" /></view>
			</view>
		</u-modal>
	</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>

<style lang="scss" scoped>
.basic-page {
	padding: 0 30rpx;
	.basic-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 140rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.detail {
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 20rpx;
		width: 690rpx;
		.detail-item {
			padding: 30rpx;
			display: flex;
			align-items: center;
			.detail-label {
				color: #333;
				font-size: 30rpx;
			}
			.detail-value {
				color: #666;
				font-size: 28rpx;
				margin-left: 30rpx;
			}
		}
	}
}
</style>