<template>
	<view class="mp-u-modal">
		<u-modal :mask-close-able="true" :show="showModal" closeOnClickOverlay :showConfirmButton="false"
			@close="$emit('hideModal')" @touchmove.stop.prevent="disabledScroll" z-index="99999">
			<view class="w-100 modal-content">
				<view class="header-title">命令下发</view>
				<view class="u-flex">
					<text class="type-text">下发类型:</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 class="content-body">
					<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>
	</view>
</template>

<script>
	import {
		useShowModal
	} from '@/plugins/utils.js'

	export default {
		props: {
			showModal: Boolean,
			isShowTCP: Boolean
		},
		data() {
			return {
				current: 0,
				commandType: 'OneWay',
				inputCommandVal: '',
				copyTextValue: {
					"method": "methodThingskit",
					"params": {
						"pin": 7,
						"value": 1
					}
				}
			}
		},
		methods: {
			cancelCommand() {
				this.$emit('cancelCommand')
			},
			confirmCommand() {
				this.$emit('confirmCommand', this.commandType, this.inputCommandVal)
			},
			handleCopy(value) {
				useShowModal(JSON.stringify(value), '命令下发', '复制内容').then(res => {
					uni.setClipboardData({
						data: JSON.stringify(value),
						success: () => {
							uni.showToast({
								title: '复制成功'
							})
						}
					});
				})
			},
			reset() {
				this.commandType = 'OneWay'
				this.inputCommandVal = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal-content {
		width: 720rpx;
		padding: 0 30rpx;
		background-color: white;

		.header-title {
			text-align: center;
			font-weight: 700;
			margin-bottom: 40rpx;
		}

		.type-text {
			color: #333;
			font-size: 14px;
			font-weight: 700;
			margin-right: 30rpx;
		}

		.content-body {
			margin-top: 28rpx;
			width: 100%;
		}

		.button-group {
			display: flex;
			margin-top: 40rpx;
			justify-content: space-between;

			view {
				width: 300rpx;
			}
		}
	}
</style>