<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 class="text-clip" style="margin-left: 20rpx;width:370rpx">
					{{ deviceDetail.alias? deviceDetail.alias: deviceDetail.name }}
				</view>
				<view style="margin-left: 20rpx; font-size: 14px;"
					:style="{ color: deviceDetail.deviceState === 'INACTIVE' ? '#666' :  deviceDetail.deviceState === 'ONLINE' ? '#377DFF' : '#DE4437' }">
					{{ deviceStatus }}
				</view>
			</view>
			<view style="margin-right: 20rpx;"
				v-if="deviceDetail.deviceState === 'ONLINE' && deviceDetail.deviceType !== 'SENSOR'">
				<!-- #ifdef MP -->
				<u-button type="primary" shape="circle" size="mini" text="下发命令" @click="showModalBtn" />
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="cu-item" @tap="showModal" 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="showNodal" class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog" style="">
				<view class="modal_main">
					<view class='nav-list margin-top'>
						<view style="width: 100%; padding: 0 30rpx;">
							<view style="text-align: center; font-weight:700;margin-top: 40rpx;">命令下发</view>
							<view style="height: 20rpx;"></view>
							<view class="u-flex">
								<text
									style="color: #333; font-size: 14px;font-weight:700;margin-right: 30rpx;">下发类型:</text>
								<view>
									<radio-group style="display: flex;" @change="radioChange">
										<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items"
											:key="item.value">
											<view style="display: flex">
												<view style="margin-left: 10rpx;">
													<radio :value="item.value" :checked="index === current" />
												</view>
												<view style="width:10rpx"></view>
												<view style="margin-left: 10rpx;">{{item.name}}</view>
											</view>
										</label>
									</radio-group>
								</view>
							</view>
							<view style="margin-top: 15rpx">
								<view class="cusAppplusContent">
									<textarea v-model="inputCommandVal" placeholder="请输入下发内容(json格式)" />
								</view>
							</view>
							<view class="button-group">
								<view>
									<view class="cusAppplusCancelBtn" @click="cancelCommand"><text
											style="color: #333333">取消</text>
									</view>
								</view>
								<view>
									<view class="cusAppplusConfrimBtn" @click="confirmCommand">
										<text style="color:white">确认</text>
									</view>
								</view>
							</view>
							<view style="height:30rpx"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<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%;">
					<div class="u-flex u-row-between">
						<u--textarea :placeholder="`请输入下发内容${isShowTCP?'(字符串格式)':'(json格式)'}`" v-model="inputCommandVal" />
						<u-icon v-if="!isShowTCP" @click="handleCopy(copyTextValue)" name="question-circle" color="#2979ff" size="28"
							class="ml-10">
						</u-icon>
					</div>
				</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>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		formatToDate
	} from '@/plugins/utils.js';
	import {
		issueCommand
	} from '../api/index.js';
	export default {
		props: {
			deviceDetail: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				copyTextValue: {
					"method": "methodThingskit",
					"params": {
						"pin": 7,
						"value": 1
					}
				},
				showNodal: false,
				items: [{
						value: 'OneWay',
						name: '单向',
						checked: 'true'
					},
					{
						value: 'TwoWay',
						name: '双向'
					},
				],
				current: 0,
				modalName: null,
				showModel: false,
				commandType: 'OneWay',
				commandValue: {},
				inputCommandVal: '',
				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(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		mounted() {},
		beforeCreate() {
			this.modalName = null
		},
		methods: {
			handleCopy(value) {
				uni.showModal({
					content: JSON.stringify(value), 
					confirmText: '复制内容',
					showCancel:false,
					success: () => { 
						uni.setClipboardData({
							data: JSON.stringify(value),
							success: () => { 
								uni.showToast({
									title: '复制成功'
								})
							}
						});
					},
					
				});
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
				this.commandType = evt.detail.value
			},
			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(e) {
				this.modalName = e.currentTarget.dataset.target
				const {transportType} = this.deviceDetail.deviceProfile
				this.isShowTCP = transportType=='TCP'?true:false
				this.showNodal = true
			},
			showModalBtn() {
				this.showModel = true;
				this.inputCommandVal = '';
				const {transportType} = this.deviceDetail.deviceProfile
				this.isShowTCP = transportType=='TCP'?true:false
			},
			disabledScroll() {
				return;
			},
			hiddenModal() {
				this.showModel = false;
				this.inputCommandVal = '';
				// #ifdef APP-PLUS
				this.modalName = null
				this.showNodal = false
				// #endif
			},
			async confirmCommand() {
				try {
					this.commandValue.method = 'methodThingskit';
					this.commandValue.persistent = true;
					this.commandValue.additionalInfo = {
						cmdType: 'API'
					};
					if(this.isShowTCP){//TCP的格式只能是字符串
						const zg = /^[0-9a-zA-Z]*$/
						if(!zg.test(this.inputCommandVal)) {
							uni.$u.toast('输入的内容只能是字母和数字的组合')
							return 
						}
						this.commandValue.params = this.inputCommandVal
					}else{
						const commandJsonValue = JSON.parse(this.inputCommandVal);
						this.commandValue.params = commandJsonValue
					}
					await issueCommand(this.commandType, this.deviceDetail.tbDeviceId, this.commandValue);
					this.hiddenModal();
					uni.$u.toast('下发成功~');
				} catch (e) {
					uni.$u.toast('下发失败~');
				}
			},
			cancelCommand() {
				this.hiddenModal();
				// #ifdef APP-PLUS
				this.modalName = null
				this.showNodal = false
				// #endif
			}
		}
	};
</script>

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

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

	}

	.cusAppplusCancelBtn {
		background: #e3e3e5;
		border-radius: 38rpx;
		height: 85rpx;
		line-height: 85rpx
	}

	.cusAppplusConfrimBtn {
		background: #3388ff;
		border-radius: 38rpx;
		height: 85rpx;
		line-height: 85rpx
	}

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