<template>
	<view class="app-container">
		<up-navbar placeholder :leftIconSize="0" bgColor="transparent" />
		<view class="car_list">
			<view class="line_title">
				<text class="left_title" style="color: #fff;">我的信息</text>
				<text style="color: #fff;">去实名认证</text>
			</view>
			<view class="user-box">
				<up-form :model="userForm" ref="userFormRef">
					<up-form-item prop="name">
						<up-input v-model="userForm.name" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入真实姓名">
							<template #prefix>
								<image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/user.png" mode="widthFix"></image>
							</template>
						</up-input>
					</up-form-item>
					<up-form-item prop="identificationNumber">
						<up-input v-model="userForm.identificationNumber" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入身份证号">
							<template #prefix>
								<image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/IdCard.png" mode="widthFix"></image>
							</template>
						</up-input>
					</up-form-item>
					<up-form-item prop="phone">
						<up-input v-model="userForm.phone" shape="circle" border="none" fontSize="28rpx" color="#bbb" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入身份证号">
							<template #prefix>
								<image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/IdCard.png" mode="widthFix"></image>
							</template>
						</up-input>
					</up-form-item>
				</up-form>
			</view>
			<view class="line_title">
				<text class="left_title">我的车辆</text>
				<text>去修改车辆信息</text>
			</view>
			
			<view class="car_data">
				<view v-for="carItem in carList" :key="carItem.carId" class="car_item">
					<navTop :carNum="carItem.carNum" />
					<centerLine :leftContent="carItem.carBrand" fontColor="#999" :rightContent="carItem.address" />
				</view>
			</view>
			<view class="loginBtn" @click="addCarInfo">退出登录</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onReady } from '@dcloudio/uni-app'
import centerLine from '@/components/centerLine.vue';
import navTop from '@/components/navTop.vue';
const showNotice = ref(true)
const carList = ref([
	{ carId: 1, carNum: '桂A·66666', carBrand: '梅赛德斯奔驰', address: '广西壮族自治区 南宁市 兴宁区投保', status: 0 },
	{ carId: 2, carNum: '桂A·77777', carBrand: '梅赛德斯奔驰', address: '广西壮族自治区 南宁市 兴宁区投保', status: 1 },
	{ carId: 3, carNum: '桂A·77777', carBrand: '梅赛德斯奔驰', address: '广西壮族自治区 南宁市 兴宁区投保', status: 2 }
])
// 用户参数
const userForm = ref({
	name: '',
	identificationNumber: '',
	phone: ''
})
const customStyle = {
	height: '80rpx',
	backgroundColor: '#F9F9F9',
	paddingLeft: '40rpx'
}
const placeholderStyle = {
	color: '#bbb',
	fontSize: '28rpx'
}
// 表单引用  
const userFormRef = ref(null)
// 校验规则
const rules = {
	name: [ 
		{ required: true, message: '请输入姓名', trigger: ['blur', 'change'] },
		{ min: 2, max: 6, message: '名字应在2到6个字', trigger: ['blur', 'change'] }, 
		{ validator: (rule, value, callback) => {
				return uni.$u.test.chinese(value)
			},
			message: '请输入中文',
			// 触发器可以同时用blur和change
			trigger: ['change','blur'],
		}
	],
	identificationNumber: [
		{ required: true, message: '请输入身份证号', trigger: ['blur', 'change'] },
		{ validator: (rule, value, callback) => {
				return uni.$u.test.idCard(value)
			},
			message: '身份证号码不正确',
			// 触发器可以同时用blur和change
			trigger: ['change','blur'],
		}
	],
	phone: [
		{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
		{ validator: (rule, value, callback) => {
				return uni.$u.test.mobile(value)
			},
			message: '手机号码不正确',
			// 触发器可以同时用blur和change
			trigger: ['change','blur'],
		}
	]
}
// 微信小程序需要在此注册校验规则
onReady(() => {
	userFormRef.value.setRules(rules)
})
const addCarInfo = () => {
	uni.navigateTo({
		url: '/pages/carDetail/carDetail'
	})
}
// 提交方法
const submit = () => {
	userFormRef.value.validate().then(async valid => {
		if (valid) {
			uni.$u.toast('登录成功')
		} else {
			uni.$u.toast('校验失败')
		}  
	}).catch(() => {
		// 处理验证错误  
		uni.$u.toast('校验失败')
	});  
}
</script>

<style lang="scss" scoped>
.app-container{
	width: 100%;
	height: 100vh;
	padding: 0 30rpx;
	background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-index_20240925113012A004.png') no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	
	.user-box{
		width: 690rpx;
		padding: 40rpx 44rpx;
		background-color: #fff;
		z-index: 10;
		margin: 0 auto 40rpx;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06);
		border-radius: 40rpx;
	}
	
	// 车辆列表
	.car_list{
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		.line_title{
			display: flex;
			justify-content: space-between;
			font-size: 	24rpx;
			color: #999;
			line-height: 32rpx;
			.left_title{
				font-size: 32rpx;
				line-height: 42rpx;
				color: #333;
			}
		}
		.car_data{
			padding: 0 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06);
			border-radius: 40rpx;
			margin-bottom: 60rpx;
			.car_item{
				padding: 30rpx 0;
				border-bottom: 2rpx solid #eee;
				&:last-child{
					border-bottom: 0;
				}
			}
		}
		.loginBtn{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			font-weight: 500;
			background: #3680FE;
			box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06);
			border-radius: 40rpx;
		}
	}
}
</style>