<template>
	<div class="container">
		<button @click="scanQRCode">扫码用车</button>
		<div v-if="carInfo">
			<p>车牌号：{{ carInfo.licensePlate }}</p>
			<p>车主姓名：{{ carInfo.ownerName }}</p>
			<p>车辆状态：{{ carInfo.status }}</p>
		</div>   
	</div>
</template>

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

	const carInfo = ref(null); // 用来存储车辆信息
 
	// 扫码功能
	const scanQRCode = () => {
		uni.scanCode({
			success: (res) => {
				const carId = res.result; // 获取扫码结果（车辆ID）
				getCarInfo(carId); // 获取车辆信息
			},
			fail: () => {
				uni.showToast({
					title: '扫码失败，请重试',
					icon: 'none',
				});
			},
		});
	};

	// 获取车辆信息
	const getCarInfo = (carId) => {
		uni.request({
			url: `https://example.com/api/car/${carId}`, // 假设的API接口
			method: 'GET',
			success: (response) => {
				if (response.statusCode === 200) {
					carInfo.value = response.data; // 更新车信息
				} else {
					uni.showToast({
						title: '获取车辆信息失败',
						icon: 'none',
					});
				}
			},
			fail: () => {
				uni.showToast({
					title: '请求失败，请检查网络',
					icon: 'none',
				});
			},
		});
	}; 
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	button {
		width: 100%;
		padding: 10px;
		background-color: #007aff;
		color: white;
		border-radius: 5px;
		margin: 10px 0;
	}
</style>