<template>
	<view class="container">
		<view class="container_block">
			<view class="vehicle-status">
				<view class="status-item">
					<image src="/static/icon/mine/parking.png" mode="aspectFit" />
					<text>停车定位</text>
				</view>
				<view class="status-item">
					<image src="/static/icon/mine/charging.png" mode="aspectFit" />
					<text>充电状态</text>
				</view>
				<view class="status-item">
					<image src="/static/icon/mine/location.png" mode="aspectFit" />
					<text>精确定位</text>
				</view>
			</view>
			<car-number-input @numberInputResult="numberInputResult"></car-number-input>
			<view style="color: #6fa256; font-size: 24rpx; margin-top: 40rpx">绑定车牌后，在指定充电站可享减免停车费或免费停车</view>
		</view>
		<button class="confirm-button" @click="submit">确定</button>
	</view>
</template>

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

let formData = ref({
	licensePlate: '',
	isDefault: 0
});

const numberInputResult = (e) => {
	formData.value.licensePlate = e;
};

const submit = () => {
	carAdd(formData.value).then((res) => {
		uni.showModal({
			title: '提示',
			content: '添加成功',
			showCancel: false,
			success: (res) => {
				if (res.confirm) {
					uni.navigateBack();
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	});
};
</script>

<style lang="scss">
.container {
	padding: 30rpx;

	&_block {
		width: 100%;
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 28rpx 8rpx;
	}
}

.confirm-button {
	width: 488rpx;
	height: 86rpx;
	background: #6fa256;
	border-radius: 44rpx 44rpx 44rpx 44rpx;
	font-size: 26rpx;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 332rpx;
}

.vehicle-status {
	display: flex;
	justify-content: space-around;
	margin-bottom: 25rpx;
	.status-item {
		display: flex;
		align-items: center;
		text-align: center;
		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;
		}
		text {
			font-size: 24rpx;
			color: #666;
		}
	}
}
</style>
