<template>
	<div class="padding">
		<el-card>
			<el-collapse>
				<el-collapse-item title="示例">
					<code>
						import request from '@/utils/request'
						<br>
						// 查询燃油加油列表
						export function listFuelCharging(query) {
						return request({
						url: '/fuelCharging/fuelCharging/list',
						method: 'get',
						params: query
						})
						}
						<br>
						// 查询燃油加油详细
						export function getFuelCharging(fuelChargingId) {
						return request({
						url: '/fuelCharging/fuelCharging/' + fuelChargingId,
						method: 'get'
						})
						}
						<br>
						// 新增燃油加油
						export function addFuelCharging(data) {
						return request({
						url: '/fuelCharging/fuelCharging',
						method: 'post',
						data: data
						})
						}
						<br>
						// 修改燃油加油
						export function updateFuelCharging(data) {
						return request({
						url: '/fuelCharging/fuelCharging',
						method: 'put',
						data: data
						})
						}
						<br>
						// 删除燃油加油
						export function delFuelCharging(fuelChargingId) {
						return request({
						url: '/fuelCharging/fuelCharging/' + fuelChargingId,
						method: 'delete'
						})
						}
						<br>
						// 导出燃油加油
						export function exportFuelCharging(query) {
						return request({
						url: '/fuelCharging/fuelCharging/export',
						method: 'get',
						params: query
						})
						}
					</code>
				</el-collapse-item>
			</el-collapse>
		</el-card>

		<el-card class="margin-top">
			<el-form ref="formRef" :model="form" :rules="rules" label-width="90px" :label-position="`top`">

				<el-alert type="info" show-icon>
					多个元素表示发起多个请求
				</el-alert>
				<el-form-item label="JSON数组" prop="textareaJSON">
					<el-input type="textarea" :rows="12" placeholder="请输入JSON数组" v-model="form.textareaJSON">
					</el-input>
				</el-form-item>

				<el-form-item label="url" prop="textareaUrl">
					<el-input placeholder="请输入url" v-model="form.textareaUrl"></el-input>
				</el-form-item>
				<el-form-item label="method" prop="valueMethod">
					<el-select v-model="form.valueMethod" placeholder="请选择method">
						<el-option v-for="item in optionsMethod" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div>
				<el-button type="primary" @click="submitForm">发 起</el-button>
			</div>
		</el-card>

		<el-card class="margin-top">
			<template #header>
				<div>
					<span>返回结果</span>
					<span v-if="responseList.length>0">{{ responseList.length }}</span>
				</div>
			</template>
			<div>
				<!-- {{ responseList }} -->
				<Empty v-if="responseList.length==0" />

				<div v-for="(item,i) in responseList" :key="i">
					<el-divider>{{i+1}}</el-divider>
					{{item}}
				</div>
			</div>
		</el-card>

	</div>

</template>


<script setup name="Postman">
	import request from "@/utils/request";
	const {
		proxy
	} = getCurrentInstance();

	const data = reactive({
		optionsMethod: [{
				value: "get",
				label: "get",
			},
			{
				value: "post",
				label: "post",
			},
			{
				value: "put",
				label: "put",
			},
			{
				value: "delete",
				label: "delete",
			},
		],
		// 表单参数
		form: {
			textareaJSON: '[{"pageNum": 1,"pageSize": 10}]',
			textareaUrl: "/system/notice/list",
			valueMethod: "get",
		},
		// 表单校验
		rules: {
			textareaJSON: [{
				required: true,
				message: "JSON数组不能为空",
				trigger: "blur",
			}, ],
			textareaUrl: [{
				required: true,
				message: "url不能为空",
				trigger: "blur",
			}, ],
			valueMethod: [{
				required: true,
				message: "method不能为空",
				trigger: "blur",
			}, ],
		},
		// 返回结果
		responseList: [],
	});

	const {
		optionsMethod,
		form,
		rules,
		responseList
	} = toRefs(data);

	/** 提交按钮 */
	function submitForm() {
		proxy.$refs["formRef"].validate((valid) => {
			if (valid) {
				let paramArray = [];
				try {
					paramArray = JSON.parse(form.value.textareaJSON);
				} catch (error) {
					proxy.$modal.error(error);
					return;
				}

				let option = {};
				option.url = form.value.textareaUrl;
				option.method = form.value.valueMethod;

				paramArray.map((item) => {
					if (form.value.valueMethod == "get") {
						option.params = item;
					} else if (
						form.value.valueMethod == "post" ||
						form.value.valueMethod == "put"
					) {
						option.data = item;
					}
					responseList.value = [];
					console.log(`请求参数`);
					console.log(option);
					sentRequest(option);
				});
			}
		});
	}

	async function sentRequest(option) {
		await request(option).then((response) => {
			proxy.$modal.msg(response.msg);
			console.log(`请求返回`);
			console.log(response);
			responseList.value.push(response.data || response.rows);
		});
	}
</script>