<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.transportType !== deviceTypeNum.GBT">
				<!-- #ifdef MP -->
				<u-button type="primary" shape="circle" size="mini" text="命令下发" @click="handleMpShowModal" />
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="cu-item" @tap="handleAppShowModal" data-target="Modal">
					<text>命令下发</text>
				</view>
				<!-- #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 -->
		<!-- 原生弹窗 封装成子组件无效 -->
		<view v-show="showNativeModal" class="cu-modal" :class="modalName == 'Modal' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="app-command-content">
					<view class="app-command-text">
						<text>命令下发</text>
					</view>
					<view class="app-command-type">
						<text>下发类型</text>
						<view class="mr-2">
							<radio-group @change="radioChange" class="flex mr-1">
								<label v-for="(item, index) in commandTypeList" :key="item.value">
									<view class="flex">
										<view class="ml-1">
											<radio :value="item.value" :checked="index === current" />
										</view>
										<view style="width:10rpx"></view>
										<view class="ml-1">{{ item.name }}</view>
									</view>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="app-command-body">
						<textarea class="app-command-textarea" v-model="inputCommandContent"
							:placeholder="`请输入下发内容${isShowTCP ? '(字符串格式)' : '(json格式)'}`" />
						<u-icon @click="handleCopy(copyTextValue)" v-if="!isShowTCP" name="question-circle" color="#2979ff"
							size="28" class="ml-10">
						</u-icon>
					</view>
					<view class="app-command-buttons">
						<view class="cancel-button" @click="cancelCommand"><text class="cancel-text">取消</text></view>
						<view @click="handleAppCommand" class="confrim-button"><text class="confrim-text">确认</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<!-- u-modal在app端弹窗层级无法覆盖背景色 -->
		<mp-command-issuance ref="mpCommandIssuanceRef" :isShowTCP="isShowTCP" :showModal="mpShowModal"
			:deviceDetail="deviceDetail" @hideModal="hideMpModal" @cancelCommand="cancelCommand"
			@confirmCommand="confirmCommand"></mp-command-issuance>
		<!-- #endif -->
	</view>
</template>

<script>
import { formatToDate } from '@/plugins/utils.js';
import api from '@/api/index.js';
import mpCommandIssuance from './mp-command-issuance.vue';
import { commandTypeList } from '../config/data.js'
import { useShowModal } from '@/plugins/utils.js'
import { deviceTypeNum } from '../config/data'
import deviceDetail from '../device-detail.vue';

export default {
	components: {
		mpCommandIssuance,
	},
	props: {
		deviceDetail: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			showNativeModal: false,
			current: 0,
			commandTypeList,
			deviceTypeNum: deviceTypeNum,
			commandTypeStr: 'OneWay',
			inputCommandContent: '',
			mpShowModal: false,
			commandValue: {},
			isShowTCP: false, //用于下发命令时判断是否是TCP/UDP
			modalName: null,
			copyTextValue: {
				"method": "methodThingskit",
				"params": {
					"pin": 7,
					"value": 1
				}
			}
		};
	},
	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');
		}
	},
	beforeCreate() {
		this.modalName = null
	},
	onLoad() {
		// 隐藏原生的tabbar
		uni.hideTabBar();
		this.modalName = null
	},
	methods: {
		handleCopy(value) {
			useShowModal(JSON.stringify(value), '命令下发', '复制内容').then(res => {
				uni.setClipboardData({
					data: JSON.stringify(value),
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				});
			})
		},
		radioChange: function (evt) {
			for (let i = 0; i < this.commandTypeList.length; i++) {
				if (this.items[i].value === evt.detail.value) {
					this.current = i;
					break;
				}
			}
			this.commandTypeStr = evt.detail.value
		},
		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: '/device-subpackage/device-detail/device-position?data=' + JSON.stringify(data)
			});
		},
		disabledScroll() {
			return;
		},
		handleAppShowModal(e) {
			this.modalName = e.currentTarget.dataset.target;
			this.showNativeModal = true
		},
		handleMpShowModal() {
			const {
				transportType
			} = this.deviceDetail.deviceProfile;
			this.isShowTCP = transportType == 'TCP' ? true : false;
			this.mpShowModal = true;
		},
		hideMpModal() {
			this.mpShowModal = false;
		},
		hideAppModal() {
			this.modalName = null;
			this.showNativeModal = false
		},
		confirmCommand(commandType, callType, values) {
			this.handleCommand(commandType, callType, values)
		},
		cancelCommand() {
			this.hideMpModal();
			this.hideAppModal();
			this.commandTypeStr = 'OneWay'
			this.inputCommandContent = ''
			this.$nextTick(() => {
				this.$refs.mpCommandIssuanceRef.reset()
			})
		},
		handleAppCommand() {
			this.handleCommand(this.commandTypeStr, this.inputCommandContent)
		},
		async handleCommand(commandType, callType, values) {
			if (!values) return uni.$u.toast('请输入下发内容~');
			if(callType=='TwoWay'){
				const result = await api.deviceApi.getDeviceActiveTime(this.deviceDetail.tbDeviceId)
				const [firsetItem] = result || []
				if (!firsetItem.value) {
					return uni.$u.toast('当前设备不在线~')
				}
			}
			
			this.commandValue.persistent = true;
			this.commandValue.additionalInfo = {
				cmdType: commandType == 0 ? 0 : 1
			};
			this.commandValue.method = 'methodThingskit';
			this.commandValue.params = values;
			if (commandType == 0) {//下发类型是自定义时
				if (this.isShowTCP) {
					//TCP的格式只能是字符串
					const zg = /^[0-9a-zA-Z]*$/;
					if (!zg.test(values)) {
						uni.$u.toast('输入的内容只能是字母和数字的组合');
						return;
					}
					this.commandValue.params = values;
				} else {
					this.commandValue.params = JSON.parse(values);
				}
			}
			
			await api.deviceApi.issueCommand(callType, this.deviceDetail.tbDeviceId, this.commandValue);
			this.cancelCommand();
			uni.$u.toast('下发成功~');
		},

	}
};
</script>

<style lang="scss" scoped>
@import url('../static/modal.css');

.app-command-content {
	.app-command-text {
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			font-weight: 700;
		}
	}

	.app-command-type {
		display: flex;
		margin-top: 20rpx;
		margin-left: 20rpx;

		text {
			font-weight: 700;
		}
	}

	.app-command-body {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		margin-left: 20rpx;

		.app-command-textarea {
			width: 625rpx;
			height: 400rpx;
			background: #FFFFFF;
			box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.03);
			border-radius: 10px;
		}
	}

	.app-command-buttons {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		height: 85rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.cancel-button {
			width: 300rpx;
			background: #e3e3e5;
			height: 85rpx;
			border-radius: 38rpx;
			line-height: 85rpx;

			.cancel-text {
				color: #333333
			}
		}

		.confrim-button {
			width: 300rpx;
			background: #3388ff;
			border-radius: 38rpx;
			height: 85rpx;
			line-height: 85rpx;

			.confrim-text {
				color: white
			}
		}
	}
}

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