<template>
	<div class="panel-content">
		<!-- 输入变量部分 -->
		<div class="mb-2 panel-section">
			<div class="flex justify-between items-center panel-header">
				<span>变量输入</span>
				<el-button type="primary" size="small" @click="addParam">
					<el-icon>
						<Plus />
					</el-icon>
					添加
				</el-button>
			</div>

			<div class="params-list">
				<div v-for="(param, index) in inputParams" :key="index" class="mb-2">
					<div class="param-item">
						<el-row :gutter="12">
							<el-col :span="9">
								<el-input v-model="param.name" placeholder="变量名" />
							</el-col>
							<el-col :span="12">
								<el-select v-model="param.type" placeholder="变量值" class="w-full">
									<el-option-group v-for="item in previousOutputParams" :key="item.name" :label="item.name">
										<el-option v-for="param in item.list" :key="param.name" :label="param.name" :value="`${item.id}.${param.name}`" />
									</el-option-group>
								</el-select>
							</el-col>
							<el-col :span="3">
								<el-button @click="removeHttpParam(index)">
									<el-icon>
										<Delete />
									</el-icon>
								</el-button>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>

		<!-- 请求方法 -->
		<div class="mb-2 panel-section">
			<div class="panel-header">
				<span>请求方法</span>
			</div>
			<div class="param-item">
				<el-row :gutter="12">
					<el-col :span="6">
						<el-select v-model="node.httpParams.method" class="w-full">
							<el-option value="GET" label="GET" />
							<el-option value="POST" label="POST" />
							<el-option value="PUT" label="PUT" />
							<el-option value="DELETE" label="DELETE" />
						</el-select>
					</el-col>
					<el-col :span="18">
						<el-input v-model="node.httpParams.url" placeholder="请求URL" />
					</el-col>
				</el-row>
			</div>
		</div>

		<!-- 请求参数 -->
		<div class="mb-2 panel-section">
			<div class="flex justify-between items-center panel-header">
				<span>请求参数</span>
				<el-button type="primary" size="small" @click="addHttpParam">
					<el-icon>
						<Plus />
					</el-icon>
					添加
				</el-button>
			</div>

			<el-tabs v-model="activeTab">
				<el-tab-pane label="Params" name="params">
					<div class="params-list">
						<div v-for="(param, index) in node.httpParams.paramsParams" :key="index" class="mb-2">
							<div class="param-item">
								<el-row :gutter="12">
									<el-col :span="9">
										<el-input v-model="param.name" placeholder="参数名称" />
									</el-col>
									<el-col :span="12">
										<el-select v-model="param.type" placeholder="变量值" class="w-full">
											<el-option-group v-for="item in previousOutputParams" :key="item.name" :label="item.name">
												<el-option v-for="param in item.list" :key="param.name" :label="param.name" :value="`${item.id}.${param.name}`" />
											</el-option-group>
										</el-select>
									</el-col>
									<el-col :span="3">
										<el-button @click="removeHttpParam(index)">
											<el-icon>
												<Delete />
											</el-icon>
										</el-button>
									</el-col>
								</el-row>
							</div>
						</div>
					</div>
				</el-tab-pane>

				<el-tab-pane label="Body" name="body" v-if="['POST', 'PUT'].includes(node.httpParams.method)">
					<el-radio-group v-model="node.httpParams.contentType" size="small" class="mb-2">
						<el-radio label="none">无</el-radio>
						<el-radio label="application/x-www-form-urlencoded">Form Data</el-radio>
						<el-radio label="application/json">JSON</el-radio>
					</el-radio-group>

					<template v-if="node.httpParams.contentType === 'application/x-www-form-urlencoded'">
						<div class="params-list">
							<div v-for="(param, index) in node.httpParams.bodyParams" :key="index" class="mb-2">
								<div class="param-item">
									<el-row :gutter="12">
										<el-col :span="9">
											<el-input v-model="param.name" placeholder="参数名称" />
										</el-col>
										<el-col :span="12">
											<el-select v-model="param.type" placeholder="变量值" class="w-full">
												<el-option-group v-for="item in previousOutputParams" :key="item.name" :label="item.name">
													<el-option v-for="param in item.list" :key="param.name" :label="param.name" :value="`${item.id}.${param.name}`" />
												</el-option-group>
											</el-select>
										</el-col>
										<el-col :span="3">
											<el-button @click="removeBody(index)">
												<el-icon>
													<Delete />
												</el-icon>
											</el-button>
										</el-col>
									</el-row>
								</div>
							</div>
						</div>
					</template>

					<template v-else-if="node.httpParams.contentType === 'application/json'">
						<el-row>
							<json-editor v-model="node.httpParams.jsonBody" />
						</el-row>
					</template>
				</el-tab-pane>

				<el-tab-pane label="Headers" name="headers">
					<div class="params-list">
						<div v-for="(header, index) in node.httpParams.headerParams" :key="index" class="mb-2">
							<div class="param-item">
								<el-row :gutter="12">
									<el-col :span="9">
										<el-input v-model="header.name" placeholder="Header名称" />
									</el-col>
									<el-col :span="12">
										<el-select v-model="header.type" placeholder="变量值" class="w-full">
											<el-option-group v-for="item in previousOutputParams" :key="item.name" :label="item.name">
												<el-option v-for="param in item.list" :key="param.name" :label="param.name" :value="`${item.id}.${param.name}`" />
											</el-option-group>
										</el-select>
									</el-col>
									<el-col :span="3">
										<el-button @click="removeHeader(index)">
											<el-icon>
												<Delete />
											</el-icon>
										</el-button>
									</el-col>
								</el-row>
							</div>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>

		<!-- 输出变量 -->
		<div class="panel-section">
			<div class="panel-header">
				<span>输出变量</span>
			</div>

			<div class="params-list">
				<div v-for="(output, index) in outputParams" :key="index" class="mb-2">
					<div class="param-item">
						<el-row :gutter="12">
							<el-col :span="9">
								<el-text> 变量名： </el-text>
								<el-tag>{{ output.name }}</el-tag>
							</el-col>
							<el-col :span="2">
								<el-text>|</el-text>
							</el-col>
							<el-col :span="11">
								<el-text> 变量类型： </el-text>
								<el-tag>{{ output.type }}</el-tag>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Plus, Delete } from '@element-plus/icons-vue';
import common from './common.ts';
// @ts-ignore
import JsonEditor from '@axolo/json-editor-vue';

export default {
	name: 'HttpPanel',
	components: {
		JsonEditor,
		Plus,
		Delete,
	},
	mixins: [common],
	data() {
		return {
			activeTab: 'params', // 默认显示Params标签页
		};
	},
	methods: {
		addHttpParam() {
			if (this.activeTab === 'params') {
				this.node.httpParams.paramsParams.push({});
			} else if (this.activeTab === 'headers') {
				this.node.httpParams.headerParams.push({});
			} else {
				this.node.httpParams.bodyParams.push({});
			}
		},
		removeHttpParam(index) {
			this.node.httpParams.paramsParams.splice(index, 1);
		},
		addHeader() {
			this.node.httpParams.headerParams.push({});
		},
		removeHeader(index) {
			this.node.httpParams.headerParams.splice(index, 1);
		},
		addBody() {
			this.node.httpParams.bodyParams.push({});
		},
		removeBody(index) {
			this.node.httpParams.bodyParams.splice(index, 1);
		},
	},
};
</script>