<template>
	<view class="command-detail">
		<view class="detail-top">{{ commandDetail.deviceName }}</view>
		<view class="detail">
			<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">{{ commandDetail.deviceSn }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">所属组织</view>
				<view class="detail-value">{{ commandDetail.organizationName }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">命令下发时间</view>
				<view class="detail-value">{{ format(commandDetail.createTime) }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item" v-if="commandDetail.additionalInfo.cmdType">
				<view class="detail-label">命令类型</view>
				<view class="detail-value">{{ commandDetail.additionalInfo.cmdType }}</view>
			</view>
			<u-line length="90%" margin="0 auto" v-if="commandDetail.additionalInfo.cmdType"></u-line>
			<view class="detail-item">
				<view class="detail-label">响应类型</view>
				<view class="detail-value">{{ commandDetail.request.oneway ? '单向' : '双向' }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item">
				<view class="detail-label">命令状态</view>
				<view class="detail-value">{{ commandDetail.statusName }}</view>
			</view>
			<u-line length="90%" margin="0 auto"></u-line>
			<view class="detail-item" v-if="!commandDetail.request.oneway">
				<view class="detail-label">响应结果</view>
				<view class="detail-value">{{ commandDetail.response.status==='SUCCESS' ? '成功' : '失败' }}</view>
			</view>
			<view class="detail-item" v-if="!commandDetail.request.oneway">
				<view class="detail-label">响应失败内容</view>
				<view class="detail-value" style="width: 400rpx;" v-if="commandDetail.response.status!=='SUCCESS'">
					<u--textarea placeholder="响应失败内容" v-model="failContent" />
				</view>
			</view>
		</view>
		<view class="command">命令内容</view>
		<u-textarea :value="formatValue(commandDetail.request.body)" disabled></u-textarea>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import {
		formatToDate
	} from '@/plugins/utils.js';
	export default {
		data() {
			return {
				commandDetail: {},
				failContent: ""
			};
		},
		computed: {
			deviceType() {
				return this.commandDetail.deviceType === 'DIRECT_CONNECTION' ?
					'直连设备' :
					this.commandDetail.deviceType === 'GATEWAY' ?
					'网关设备' :
					this.commandDetail.deviceType === 'SENSOR' ?
					'网关子设备' :
					'';
			}
		},
		methods: {
			format(date) {
				return formatToDate(date, 'YYYY-MM-DD HH:mm:ss');
			},
			formatValue(value) {
				try {
					const val = JSON.parse(value['params']);
					//微信小程序端object无法显示,格式化为字符串
					const stringifyVal = JSON.stringify(val['params'])
					const formatVal = stringifyVal
						.replace(/\\"/g, '"')
						.replace(/]"/g, ']')
						.replace(/"\[/g, '[');
					return formatVal
				} catch (e) {
					console.error("命令记录页面格式化无返回值", e);
					return value['params']
				}
			}
		},
		onLoad(options) {
			const {
				data
			} = options;
			this.commandDetail = JSON.parse(data);
			if (this.commandDetail.response.status === 'SUCCESS') return
			this.failContent = JSON.stringify(this.commandDetail.response.error)
		}
	};
</script>

<style lang="scss" scoped>
	.command-detail {
		padding: 0 30rpx;
		height: 100vh;
		background-color: #f8f9fa;

		.detail-top {
			height: 118rpx;
			width: 690rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			color: #333;
			border-radius: 20rpx;
			font-size: 15px;
			margin-top: 30rpx;
			padding: 30rpx;
		}

		.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;
				}
			}
		}

		.command {
			margin: 30rpx 0;
		}
	}
</style>