<template>
	<view class="container">
		<text class="title">退款申请</text>
		<form>
			<!-- 订单编号 -->
			<view class="form-group">
				<text class="label">订单编号</text>
				<uni-easyinput v-model="orderId" :disabled="true" />
			</view>
			<!-- 退款原因 -->
			<view class="form-group">
				<text class="label">退款原因</text>
				<textarea v-model="reason" placeholder="请输入退款原因" class="textarea" required />
			</view>
			<!-- 申请退款按钮 -->
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue margin-tb-sm lg" @click="submitRefund">申请退款</button>
			</view>
		</form>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import * as api from '@/utils/api.js';
	import {
		showModelMessage
	} from "@/utils/tools.js";

	const orderId = ref(''); // 假设订单编号是静态的
	const reason = ref(''); // 退款原因

	onLoad((options) => {
		orderId.value = options.orderId;
	})

	// 处理表单提交
	const submitRefund = () => {
		if (!reason.value.trim()) {
			uni.showToast({
				title: '请填写退款原因',
				icon: 'none',
			});
			return;
		}
		const params = {
			"orderId": orderId.value,
			"reason": reason.value
		}
		api.callPaymentApi("wxPayment/refund", params).then(res => {
			if (res.code == 200) {
				// 显示退款成功的提示
				uni.showToast({
					title: '退款成功',
					icon: 'success',
					duration: 2000 // 提示显示的时长
				});

				// 提示结束后，调整首页
				setTimeout(() => {
					uni.navigateTo({
						url: "/pages/user/home/home"
					})
				}, 2000); // 延迟时间与提示时间相同
			} else {
				showModelMessage("退款失败！");
			}

		})

	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f9f9f9;
	}

	.title {
		font-size: 20px;
		text-align: center;
		margin-bottom: 20px;
	}

	.form-group {
		margin-bottom: 20px;
	}

	.label {
		font-size: 14px;
		color: #333;
	}

	.input,
	.textarea {
		width: 100%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
	}

	.textarea {
		height: 100px;
		resize: none;
	}

	.btn {
		width: 100%;
		padding: 12px;
		background-color: #4CAF50;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
	}
</style>