<template>
	<view class="w-100 modal-content">
		<view>
			<view style="max-height: 560rpx; overflow-y: scroll">
				<view class="header-title">命令下发</view>
				<view class="u-flex">
					<text class="type-text">下发类型:</text>
					<u-radio-group v-model="commandType" placement="row" @change="handleCommand">
						<u-radio :customStyle="{ marginRight: '20rpx' }" v-for="item in commandTypeList"
							activeColor="#3388FF" :label="item.label" :name="item.value" :key="item.value"></u-radio>
					</u-radio-group>
				</view>
				<view class="u-flex" style="margin-top: 28rpx" v-if="commandType == 0">
					<text class="type-text">单向/双向:</text>
					<u-radio-group v-model="callType" 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="u-flex" style="margin-top: 28rpx" v-else>
					<text class="type-text">服务:</text>
					<view @click="openService">
						<u-input shape="circle" v-model="serviceName" placeholder="请选择服务" disabled disabledColor="#fff"
							suffixIcon="arrow-down" />
					</view>
				</view>
				<view class="u-flex" style="
            margin-top: 28rpx;
            flex-direction: column;
            align-items: flex-start;
          " v-if="isShowServiceFunctionName && commandType == 1">
					<text class="type-text">输入参数:</text>
					<seriesForm ref="seriesFormRef" :seriesInputData="seriesInputData" :isTCPTransport="isTCPTransport">
					</seriesForm>
				</view>
				<view class="content-body" v-if="commandType == 0">
					<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>
			<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-picker :show="isShowService" :columns="[
        seriesList.map((item) => ({
          label: item.functionName,
          value: item.identifier,
          callType: item.callType,
        })),
      ]" keyName="label" closeOnClickOverlay @cancel="cancelTypeGap" @close="cancelTypeGap"
			@confirm="handleSelect"></u-picker>
	</view>
</template>

<script>
	import {
		useShowModal
	} from "@/plugins/utils.js";
	import seriesForm from "./seriesForm.vue";
	import api from "@/api/index.js";

	export default {
		components: {
			seriesForm,
		},
		props: {
			showModal: Boolean,
			isShowTCP: Boolean,
			deviceDetail: Object,
		},
		data() {
			return {
				current: 0,
				commandType: 0, //下发类型
				callType: "OneWay", //单双向
				serviceName: "", //服务
				service: null, //服务
				inputCommandVal: "", //自定义命令
				isShowService: false, //服务下拉框
				isShowServiceFunctionName: false, //选择服务过后的输入参数
				copyTextValue: {
					method: "methodThingskit",
					params: {
						pin: 7,
						value: 1,
					},
				},
				commandTypeList: [{
					label: "自定义",
					value: 0
				}],
				seriesList: [], //服务下拉框的数据
				boolList: [],
				enumList: [],
				seriesInputData: [],
				isTCPTransport: false,
			};
		},
		mounted() {
			this.getFormInfo();
		},
		watch: {
			showModal: {
				deep: true,
				handler() {
					this.commandType = 0;
					this.serviceName = "";
					this.isShowServiceFunctionName = false;
				},
			},
		},
		methods: {
			cancelCommand() {
				this.commandType = 0;
				this.$emit("cancelCommand");
			},
			async confirmCommand() {
				if (this.commandType == 0) {
					this.$emit(
						"confirmCommand",
						this.commandType,
						this.callType,
						this.inputCommandVal
					);
				} else {
					const result = this.$refs.seriesFormRef.handleValidate();
					if (!result) {
						return;
					}
					const value = this.$refs.seriesFormRef.getFormField();
					const values = this.isTCPTransport ?
						value.serviceCommand : {
							[this.service]: value,
						};
					this.$emit("confirmCommand", this.commandType, this.callType, values);
				}
			},
			handleCopy(value) {
				useShowModal(JSON.stringify(value), "命令下发", "复制内容").then(
					(res) => {
						uni.setClipboardData({
							data: JSON.stringify(value),
							success: () => {
								uni.showToast({
									title: "复制成功",
								});
							},
						});
					}
				);
			},

			async getFormInfo() {
				const {
					transportType,
					deviceType,
					deviceProfile
				} =
				this.deviceDetail || {};
				const {
					profileData: {
						transportConfiguration: {
							protocol
						},
					},
				} = deviceProfile || {};
				this.isTCPTransport = transportType === "TCP";
				const isTCPModbus = this.isTCPTransport && protocol === "MODBUS_RTU";
				if (isTCPModbus || (this.isTCPTransport && deviceType === "SENSOR")) {
					this.commandTypeList =
						this.commandTypeList.length == 2 ?
						this.commandTypeList.pop() :
						this.commandTypeList;
				} else {
					this.commandTypeList.push({
						label: "服务",
						value: 1
					});
					this.seriesList = await api.deviceApi.getModelServices(
						this.deviceDetail
					);
				}
			},

			openService() {
				this.isShowService = true;
			},
			handleSelect(e) {
				this.isShowService = false;
				const {
					value
				} = e || {};
				this.serviceName = value[0].label;
				this.service = value[0].value;
				if (this.service) {
					this.isShowServiceFunctionName = true;
					const {
						functionJson
					} =
					this.seriesList.filter(
						(item) => item.identifier === this.service
					)[0] || {};
					const {
						inputData
					} = functionJson || {};
					this.seriesInputData = inputData || [];
					this.callType = value[0].callType === "ASYNC" ? "OneWay" : "TwoWay";
				}
			},

			cancelModel() {
				this.isShowService = false;
				this.seriesInputData = [];
				this.seriesList = [];
			},

			handleCommand(name) {
				this.seriesInputData = [];
				this.serviceName = "";
				this.isShowServiceFunctionName = false;
				if (this.commandType == 0) {
					this.callType = "OneWay";
				}
			},

			cancelTypeGap() {
				this.isShowService = false;
			},

			reset() {
				this.callType = "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>