<template>
	<view class="basic-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 基础信息头部 -->
		<view class="basic-header">
			<view class="u-flex">
				<view class="pl-3">
					<u-icon v-if="deviceDetail.deviceInfo.longitude !== ''" @click="handleClick" name="map-fill">
					</u-icon>
				</view>
				<view class="basic-text text-clip ml-2">
					{{ deviceDetail.alias? deviceDetail.alias: deviceDetail.name }}
				</view>
				<view class="basic-text-status  ml-2" :style="{ color: formatTextStatus(deviceDetail.deviceState)}">
					{{ deviceStatus }}
				</view>
			</view>
			<!-- 命令下发 设备在线并且不是网关子设备 -->
			<view class="mr-2" v-if="deviceDetail.deviceState === 'ONLINE' && deviceDetail.deviceType !== 'SENSOR'">
				<!-- #ifdef MP -->
				<u-button type="primary" shape="circle" size="mini" text="下发命令" @click="handleMpShowModal" />
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<u-button type="primary" shape="circle" size="mini" text="下发命令" @click="handleAppShowModal" />
				<!-- #endif -->
			</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>
		<!-- 命令下发 -->
		<!-- #ifdef APP-PLUS -->
		<app-command-issuance :showModal="appShowModal"></app-command-issuance>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<!-- u-modal在app端弹窗层级无法覆盖 -->
		<mp-command-issuance :isShowTCP="isShowTCP" :showModal="mpShowModal" @hideModal="hideMpModal"
			@cancelCommand="cancelCommand" @confirmCommand="confirmCommand"></mp-command-issuance>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		formatToDate
	} from '@/plugins/utils.js';
	import {
		issueCommand
	} from '../api/index.js';
	import api from '@/api/index.js'
	import mpCommandIssuance from './mp-command-issuance.vue'
	import appCommandIssuance from './app-command-issuance.vue'
	import nextModal from '@/components/module/next-modal_1.0.2/components/next-modal/next-modal.vue'

	export default {
		components: {
			mpCommandIssuance,
			appCommandIssuance,
			nextModal
		},
		props: {
			deviceDetail: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				mpShowModal: false,
				appShowModal: false,
				commandValue: {},
				isShowTCP: false, //用于下发命令时判断是否是TCP/UDP
			};
		},
		computed: {
			deviceStatus() {
				return this.deviceDetail.deviceState === 'INACTIVE' ? '待激活' : this.deviceDetail.deviceState === 'ONLINE' ?
					'在线' : '离线'
			},
			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() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		methods: {
			formatTextStatus(deviceState) {
				return deviceState === 'INACTIVE' ? '#666' : deviceState === 'ONLINE' ? '#377DFF' : '#DE4437'
			},
			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)
				});
			},
			disabledScroll() {
				return;
			},
			handleAppShowModal() {
				this.appShowModal = true
			},
			handleMpShowModal() {
				const {
					transportType
				} = this.deviceDetail.deviceProfile
				this.isShowTCP = transportType == 'TCP' ? true : false
				this.mpShowModal = true;
			},
			hideMpModal() {
				this.mpShowModal = false;
			},
			hideAppModal() {
				this.appShowModal = false
			},
			async confirmCommand(commandType, inputCommandVal) {
				try {
					if (this.isShowTCP) { //TCP的格式只能是字符串
						const zg = /^[0-9a-zA-Z]*$/
						if (!zg.test(inputCommandVal)) {
							uni.$u.toast('输入的内容只能是字母和数字的组合')
							return
						}
						this.commandValue.params = inputCommandVal
					} else {
						this.commandValue.params = JSON.parse(inputCommandVal);
					}
					if (!commandJsonValue) return uni.$u.toast('请输入下发内容~');
					this.commandValue.persistent = true;
					this.commandValue.additionalInfo = {
						cmdType: 'API'
					};
					this.commandValue.method = 'methodThingskit';
					this.commandValue.params = commandJsonValue
					await api.deviceApi.issueCommand(commandType, this.deviceDetail.tbDeviceId, this.commandValue);
					this.cancelCommand();
					uni.$u.toast('下发成功~');
				} catch (e) {
					uni.$u.toast('下发失败~');
				}
			},
			cancelCommand() {
				this.hideMpModal();
				this.hideAppModal()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.basic-page {
		padding: 0 30rpx;

		.basic-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 140rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.basic-text {
				width: 370rpx;
			}

			.cu-item {
				background: #3388FF;
				border-radius: 12px;
				width: 120rpx;
				height: 48rpx;
				text-align: center;
				line-height: 40rpx;

				text {
					font-size: 12px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.basic-text-status {
				font-size: 14px;
			}
		}

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