<template>
	<view class="carDetail" :style="{height:showPicker?'100vh':'',overflow:showPicker?'hidden':''}">
		<up-form :model="form" ref="uFormRef" label-width="130" :labelStyle="labelStyle">
			<view class="carInfo">
				<navTop carNum="桂A·66666" />
				<view class="centerContent">
					<view class="carBand">梅赛德斯奔驰</view>
					<view class="carModel">2024 1.6L双离合变速器 两厢 双离合 舒适型 国IV 5座</view>
				</view>
				<view class="rowLine"></view>
				<up-form-item label="上年承保公司" prop="sysDeptName">
					<up-input v-model="form.sysDeptName" fontSize="28rpx" color="#999" placeholder="请输入上年承保公司" border="none" inputAlign="right" />
				</up-form-item>
			</view>
			<!-- 车主信息 -->
			<view class="carInfo">
				<view class="card_title">车主信息</view>
				<up-form-item label="车主姓名" prop="name">
					<up-input v-model="form.name" fontSize="28rpx" color="#999" placeholder="请输入真实姓名" border="none" inputAlign="right" />
				</up-form-item>
				<up-form-item label="身份证号" prop="identificationNumber">
					<up-input v-model="form.identificationNumber" fontSize="28rpx" color="#999" placeholder="请输入身份证号" border="none" inputAlign="right" />
				</up-form-item>
			</view>
			<!-- 行驶信息 -->
			<view class="carInfo">
				<view class="card_title">行驶证信息</view>
				<up-form-item label="车牌号码" prop="licensePlateNumber">
					<up-input v-model="form.licensePlateNumber" fontSize="28rpx" color="#999" placeholder="请输入车牌号码" border="none" inputAlign="right" />
				</up-form-item>
				<up-form-item label="号牌种类" prop="lincensePlateType">
					<up-input v-model="form.lincensePlateType" fontSize="28rpx" color="#999" placeholder="请选择号牌种类" :suffixIcon="icon" suffixIconStyle="font-size: 28rpx" border="none" inputAlign="right" @focus="openSelect(['黄色车牌', '绿色车牌', '白色车牌', '蓝色车牌'])" />
				</up-form-item>
				<up-form-item label="车架号" prop="frameNumber">
					<up-input v-model="form.frameNumber" fontSize="28rpx" color="#999" placeholder="请输入车架号" border="none" inputAlign="right" />
				</up-form-item>
				<up-form-item label="发动机号" prop="engineNumber">
					<up-input v-model="form.engineNumber" fontSize="28rpx" color="#999" placeholder="请输入发动机号" border="none" inputAlign="right" />
				</up-form-item>
				<up-form-item label="车辆类型" prop="vehicleType">
					<up-input v-model="form.vehicleType" fontSize="28rpx" color="#999" placeholder="请选择车辆类型" :suffixIcon="icon" suffixIconStyle="font-size: 28rpx" border="none" inputAlign="right" @focus="openSelect(['小轿车', '大货车', '两厢车'])" />
				</up-form-item>
				<up-form-item label="车辆使用性质" prop="vehicleNature">
					<up-input v-model="form.vehicleNature" fontSize="28rpx" color="#999" placeholder="请选择车辆使用性质" :suffixIcon="icon" suffixIconStyle="font-size: 28rpx" border="none" inputAlign="right" @focus="openSelect(['运营车辆', '私家车', '公务车'])" />
				</up-form-item>
				<up-form-item label="核定客载数(人)" prop="passengersNumber">
					<up-input v-model="form.passengersNumber" fontSize="28rpx" color="#999" placeholder="请输入核载人数" border="none" inputAlign="right" />
				</up-form-item>
				<up-form-item label="核定载质量(千克)" prop="passengerCapacity">
					<up-input v-model="form.passengerCapacity" fontSize="28rpx" color="#999" placeholder="请输入核载重量" border="none" inputAlign="right" />
				</up-form-item>
				<up-form-item label="排量毫升" prop="emissions">
					<up-input v-model="form.emissions" fontSize="28rpx" color="#999" placeholder="请输入排放量" border="none" inputAlign="right" />
				</up-form-item>
				<view class="carModelBox">
					<view class="model_line">
						<text class="leftContent">车辆型号</text>
						<up-input v-model="form.vehicleModel" fontSize="28rpx" color="#999" placeholder="请填写车辆型号" border="none" inputAlign="right" @change="getSearch" />
					</view>
					<up-transition :show="showList">
						<view class="searchList">
							<view class="searchItem">123</view>
							<view class="searchItem">123</view>
							<view class="searchItem">123</view>
							<view class="searchItem">123</view>
						</view>
					</up-transition>
				</view>
				<up-form-item label="中文品牌" prop="vehicleBrand">
					<up-input v-model="form.vehicleBrand" fontSize="28rpx" color="#999" placeholder="请选择车辆品牌" :suffixIcon="icon" suffixIconStyle="font-size: 28rpx" border="none" inputAlign="right" @focus="openSelect(['宝马', '奔驰', '劳斯莱斯'])" />
				</up-form-item>
				<up-form-item label="准牵引质量" prop="tractionMass">
					<up-input v-model="form.tractionMass" fontSize="28rpx" color="#999" placeholder="请填写准牵引准质量" border="none" inputAlign="right" />
				</up-form-item>
				<up-form-item label="保险需求" prop="requirements">
					<up-input v-model="form.requirements" fontSize="28rpx" color="#999" placeholder="请选择保险需求" :suffixIcon="icon" suffixIconStyle="font-size: 28rpx" border="none" inputAlign="right" @focus="openSelect(['强险', '商险'])" />
				</up-form-item>
			</view>
			
			<view class="tip">请认真核实车辆信息，实际投保车辆信息以保险公司确认为准</view>
			
			<view class="btn delBtn" @click="deleteCar">删除车辆</view>
			<view class="btn confirmBtn">确认</view>
		</up-form>
		<up-picker :show="showPicker" :columns="columns" :closeOnClickOverlay="true" @close="onCancel" @cancel="onCancel" @confirm="showPicker = false"></up-picker>
		<up-popup :show="showTip" mode="center" :safeAreaInsetBottom="false" round="20" @close="showTip = false">
			<view class="notice">
				<view class="notice_title">温馨提示</view>
				<view class="notice_content">
					本平台仅供出租租赁车辆提供登记服务
				</view>
				<view class="btn" @click="showTip = false">我已认真阅读并同意以上内容</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import navTop from '@/components/navTop.vue';
import { onLoad } from '@dcloudio/uni-app'
const showPicker = ref(false)
const showTip = ref(true)
const columns = ref([])
const labelStyle = {
	fontSize: '28rpx',
	lineHeight: '38rpx',
	color: '#3D3D3D'
}
const showList = ref(false)
const icon = ref('arrow-down')
const form = ref({
	name: '',
	identificationNumber: '',
	sysDeptName: '',
	licensePlateNumber: '',
	lincensePlateType: '',
	frameNumber: '',
	engineNumber: '',
	vehicleType: '',
	vehicleNature: '',
	passengersNumber: '',
	passengerCapacity: '',
	emissions: '',
	vehicleModel: '',
	vehicleBrand: '',
	tractionMass: '',
	requirements: ''
})
onLoad((options) => {
	
})
const getSearch = (value) => {
	if(uni.$u.trim(value)){
		showList.value = true
	} else {
		showList.value = false
	}
}
const openSelect = (arr) => {
	columns.value = []
	columns.value.push(arr)
	showPicker.value = true
	icon.value = 'arrow-up'
}
const onCancel = () => {
	showPicker.value = false
	icon.value = 'arrow-down'
}
const deleteCar = () => {
	uni.showModal({
		title: '删除车辆提示',
		content: '删除车辆后将无法及时收到投保方案解答与最新优惠，且无法恢复车辆信息。是否继续删除？',
		success: function (res) {
			if (res.confirm) {
				console.log('用户点击确定');
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	})
}
</script>

<style lang="scss" scoped>
.carDetail{
	padding: 20rpx 30rpx 40rpx;
	background: #F8F9FF;
	.carInfo{
		padding: 22rpx 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.card_title{
			color: #3d3d3d;
			font-size: 28rpx;
			line-height: 38rpx;
			font-weight: 500;
		}
		.carBand{
			font-size: 24rpx;
			color: #333;
			margin-bottom: 10rpx;
		}
		.carModel{
			font-size: 20rpx;
			color: #999;
		}
		.rowLine{
			width: 100%;
			height: 2rpx;
			background-color: #eee;
			margin: 16rpx 0 20rpx;
		}
	}

	.tip{
		color: #999;
		font-size: 20rpx;
		line-height: 26rpx;
		margin: 20px 0;
	}
	.btn{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06);
		border-radius: 20rpx;
	}
	.delBtn{
		color: #999999;
		background: #FFFFFF;
		margin-bottom: 20rpx;
	}
	.confirmBtn{
		color: #fff;
		background: #3680FE;
	}
}
.notice{
	position: relative;
	width: 690rpx;
	height: 360rpx;
	background: #FFFFFF;
	padding: 40rpx 30rpx 0;
	border-radius: 20rpx;
	overflow: hidden;
	.notice_title{
		text-align: center;
		font-size: 36rpx;
		line-height: 48rpx;
		color: #3D3D3D;
		margin-bottom: 40rpx;
	}
	.notice_content{
		text-align: center;
		font-size: 28rpx;
		line-height: 38rpx;
		color: #999;
	}
	.btn{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		line-height: 100rpx;
		text-align: center;
		height: 100rpx;
		color: #3680FE;
		font-size: 28rpx;
		border-top: 2rpx solid #eee;
	}
}

.carModelBox{
	position: relative;
	padding: 20rpx 0;
	.model_line{
		display: flex;
		align-items: center;
		.leftContent{
			width: 130px;
			font-size: 28rpx;
			line-height: 38rpx;
			color: #3d3d3d;
		}
	}
	.searchList{
		position: absolute;
		bottom: 200%;
		left: 0;
		width: 100%;
		background-color: #fff;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		z-index: 9;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		transition: all .5s;
		&::after{
			position: absolute;
			bottom: -50rpx;
			left: 20rpx;
			content: '';
			width: 0px;
			height: 0px;
			border: 30rpx solid transparent;
			border-top-color: #fff;
		}
	}
}
</style>