<template>
	<view class="basic-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module />
		<view class="basic-title">
			<view class="u-flex">
				<view style="padding-left: 32rpx;"><u-icon v-if="deviceDetail.deviceInfo.longitude !== ''" @click="handleClick" name="map-fill"></u-icon></view>
				<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;" v-if="deviceDetail.deviceState === 'ONLINE' && deviceDetail.deviceType !== 'SENSOR'">
				<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 :showConfirmButton="false" width="720rpx" @close="hiddenModal" @touchmove.stop.prevent="disabledScroll">
			<view style="width: 100%; padding: 0 30rpx;">
				<view style="text-align: center; font-weight:700;margin-bottom: 40rpx;">命令下发</view>
				<view class="u-flex">
					<text style="color: #333; font-size: 14px;font-weight:700;margin-right: 30rpx;">下发类型:</text>

					<u-radio-group v-model="commandType" placement="row">
						<u-radio activeColor="#3388FF" label="单向" name="OneWay"></u-radio>
						<view style="margin: 0 20rpx;"></view>
						<u-radio activeColor="#3388FF" label="双向" name="TwoWay"></u-radio>
					</u-radio-group>
				</view>
				<view style="margin-top: 28rpx;width: 100%;"><u--textarea placeholder="请输入下发内容(json格式)" v-model="inputCommandVal" /></view>

				<view class="button-group">
					<view><u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="取消" @click="cancelCommand"></u-button></view>
					<view><u-button color="#3388ff" shape="circle" text="确认" @click="confirmCommand"></u-button></view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { formatToDate } from '@/plugins/utils.js';
import { issueCommand } from '../api/index.js';
export default {
	props: {
		deviceDetail: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			showModel: false,
			commandType: 'OneWay',
			commandValue: {},
			inputCommandVal: ''
		};
	},
	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();
	},
	mounted() {},
	methods: {
		handleClick() {
			const data = {
				longitude: this.deviceDetail.deviceInfo.longitude || 0,
				latitude: this.deviceDetail.deviceInfo.latitude || 0
			};
			uni.navigateTo({
				url: '/deviceSubPage/deviceDetailPage/devicePosition?data=' + JSON.stringify(data)
			});
		},
		showModal() {
			this.showModel = true;
			this.inputCommandVal = '';
		},
		disabledScroll() {
			return;
		},
		hiddenModal() {
			this.showModel = false;
		},
		async confirmCommand() {
			try {
				const commandJsonValue = JSON.parse(this.inputCommandVal);
				this.commandValue.persistent = true;
				this.commandValue.additionalInfo = {
					cmdType: 'API'
				};
				this.commandValue.method = 'methodThingskit';
				this.commandValue.params = {
					params: commandJsonValue
				};
				await issueCommand(this.commandType, this.deviceDetail.tbDeviceId, this.commandValue);
				this.hiddenModal();
				uni.$u.toast('下发成功~');
			} catch (e) {
				uni.$u.toast('下发失败~');
			}
		},
		cancelCommand() {
			this.hiddenModal();
		}
	}
};
</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: 15px;
			}
			.detail-value {
				color: #666;
				font-size: 14px;
				margin-left: 30rpx;
			}
		}
	}
}
/deep/ .u-modal__content {
	padding: 30rpx 0 !important;
}

.button-group {
	display: flex;
	margin-top: 40rpx;
	justify-content: space-between;
	view {
		width: 300rpx;
	}
}
</style>