<template>
	<view class="application-container">
		<z-paging ref="paging" :fixed="false" height="85vh" v-model="DataList" @query="loadMoreData"
			:default-page-no="1" :default-page-size="4" :auto-show-back-to-top="true">
			<form>
				<view class="cu-form-group">
					<view class="titlele">还车点申请</view>
					<input v-model="formData.returnPoint"></input>
				</view>
				<view class="cu-form-group">
					<view class="titlele">申请位置</view>
					<input v-model="formData.location"></input>
				</view>
				<view class="cu-form-group align-start">
					<view class="titlele">原因</view>
					<textarea style="width: 80%; margin-left: 20px; text-align: right !important;"
						v-model="formData.reason"></textarea>
				</view>
			</form>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import * as api from '@/utils/api.js';

	const paging = ref(null);
	const DataList = ref([]);
	const formData = ref({
		returnPoint: '2025-04-07 14:25:12', // 还车点申请
		location: '四川省成都市武侯区芳草街西部智谷', // 申请位置 
		reason: '临时有事，还车换个交通方式' // 原因
	});
	// 加载消费数据
	const loadMoreData = (pageNo, pageSize) => {
		const params = {
			"用户ID": 123,
			"pageParam": {
				"pageNum": pageNo,
				"pageSize": pageSize
			}
		};
		api.callEbikeInfo("接口？？？", params).then((res) => {
			if (res.code === 200) {
				const records = res.data;
				paging.value.complete(records);
			} else {
				paging.value.complete([]);
			}
		});
	};
</script>

<style scoped>
	.application-container {
		padding: 20px;
		background-color: white;
	}
	.cu-form-group {
	    background-color: #ffffff;
	    padding: 0px;
	    text-align: right;
	    display: flex;
	    align-items: center;
	    min-height: 3.125rem;
	    justify-content: space-between;
	}
	
	.uni-input-wrapper, .uni-input-form { 
	    padding-left: 10px; 
	}
</style>