<template>
	<view class="carDetail">
		<up-form :model="form" ref="uFormRef" label-width="130" :labelStyle="labelStyle">
			<view class="carInfo">
				<view v-show="isShowHeader">
					<navTop :carNum="form.licensePlateNumber" />
					<view class="centerContent">
						<view class="carBand">{{ form.customizeVehicleBrand || form.vehicleBran }}</view>
						<view class="carModel">{{ form.customizeVehicleModel || form.vehicleModel }}</view>
					</view>
					<view class="rowLine"></view>
				</view>
				<up-form-item label="上年承保公司" prop="sysDeptId">
					<uni-data-select
						v-model="form.sysDeptId"
						:localdata="companyOption"
						placeholder="请选择上年承保公司"
					/>
				</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">
					<uni-data-select
						v-model="form.lincensePlateTypeId"
						:localdata="carNumOption"
						placeholder="请选择号牌种类"
					/>
				</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">
					<uni-data-select
						v-model="form.vehicleTypeId"
						:localdata="carTypeOption"
						placeholder="请选择车辆类型"
					/>
				</up-form-item>
				<up-form-item label="车辆使用性质" prop="vehicleNature">
					<uni-data-select
						v-model="form.vehicleNatureId"
						:localdata="carNatureOption"
						placeholder="请选择车辆使用性质"
					/>
				</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.customizeVehicleModel" fontSize="28rpx" color="#999" placeholder="请填写车辆型号" border="none" inputAlign="right" @change="getSearch" @blur="showList = false" />
					</view>
					<up-transition :show="showList">
						<view class="searchList">
							<view class="searchItem" v-for="item in searchList" :key="item" @click="selectModel(item)">{{ item.name }}</view>
							<view v-if="searchList.length == 0">无数据</view>
						</view>
					</up-transition>
				</view>
				<up-form-item v-if="isCustom" label="中文品牌" prop="vehicleBrand">
					<uni-data-select
						v-model="form.vehicleBrandId"
						:localdata="carBrandOption"
						:placeholder="brandTitle"
					/>
				</up-form-item>
				<up-form-item v-else label="中文品牌" prop="vehicleBrand">
					<up-input v-model="form.customizeVehicleBrand" fontSize="28rpx" color="#999" placeholder="请填写中文品牌" border="none" inputAlign="right" />
				</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">
					<uni-data-select
						v-model="form.requirementsId"
						:localdata="needOption"
						placeholder="请选择保险需求"
					/>
				</up-form-item>
			</view>
			
			<view class="tip">请认真核实车辆信息，实际投保车辆信息以保险公司确认为准</view>
			
			<view class="btn confirmBtn" @click="submitInfo">确认</view>
		</up-form>
		<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 { debounce } from '@/uni_modules/uview-plus';
import { computed, reactive, ref } from 'vue';
import navTop from '@/components/navTop.vue';
import { carInfoAdd } from '@/api/user.js'
import { onLoad } from '@dcloudio/uni-app'
import { getCarNumApi, getCarTypeApi, getCarNatureApi, getCarBrandApi, getCarModelApi, getNeedApi, getListDeptApi, getCarDetail } from '@/api/car.js'
const showTip = ref(true)
const brandTitle = ref('请选择中文品牌')
const disable = ref(false)
const labelStyle = {
	fontSize: '28rpx',
	lineHeight: '38rpx',
	color: '#3D3D3D'
}
const isShowHeader = ref(false)
const isCustom = ref(false)
const searchList = ref([])
const showList = ref(false)
const form = ref({
	name: '',
	identificationNumber: '',
	sysDeptId: '',
	customizeVehicleBrand: '',
	customizeVehicleModel: '',
	licensePlateNumber: '',
	lincensePlateTypeId: '',
	isCustomizeBrandAndModel: '1',	
	frameNumber: '',
	engineNumber: '',
	vehicleTypeId: '',
	vehicleNatureId: '',
	passengersNumber: '',
	passengerCapacity: '',
	emissions: '',
	vehicleModelId: '',
	vehicleBrandId: '',
	tractionMass: '',
	requirementsId: ''
})
// 查询参数
const queryParams = reactive({
	pageSize: 100,
	pageNum: 1
})
// 车辆类型查询参数
const queryModelParams = reactive({
	pageSize: 100,
	pageNum: 1,
	modelName: undefined
})
onLoad(async (options) => {
	if(options.carInfoId !== undefined) {
		const { data } = await getCarDetail(options.carInfoId)
		form.value = data
		isCustom.value = data.isCustomizeBrandAndModel == "0"
		isShowHeader.value = true
	}
})
// 获取承保公司
const companyOption = ref([])
const getCompanyOption = () => {
	getListDeptApi().then(res => {
		const { data } = res
		const newList = data.filter(item => item.parentId === 100)
		const arrList = newList.map(item => {
			return {
				value: item.deptId,
				text: item.deptName
			}
		})
		companyOption.value = arrList
	})
}
getCompanyOption()
// 获取号牌种类
const carNumOption = ref([])
const getCarNumOption = () => {
	getCarNumApi(queryParams).then(res => {
		const { data } = res
		const arrList = data.records.map(item => {
			return {
				value: item.id,
				text:item.name
			}
		})
		carNumOption.value = arrList
	})
}
getCarNumOption()
// 获取车辆类型
const carTypeOption = ref([])
const getCarTypeOption = () => {
	getCarTypeApi(queryParams).then(res => {
		const { data } = res
		const arrList = data.records.map(item => {
			return {
				value: item.id,
				text:item.name
			}
		})
		carTypeOption.value = arrList
	})
}
getCarTypeOption()
// 获取车辆使用性质
const carNatureOption = ref([])
const getCarNatureOption = () => {
	getCarNatureApi(queryParams).then(res => {
		const { data } = res
		const arrList = data.records.map(item => {
			return {
				value: item.id,
				text:item.name
			}
		})
		carNatureOption.value = arrList
	})
}
getCarNatureOption()
// 获取中文品牌
const carBrandOption = ref([])
const getCarBrandOption = () => {
	getCarBrandApi(queryParams).then(res => {
		const { data } = res
		const arrList = data.records.map(item => {
			return {
				value: item.id,
				text:item.name
			}
		})
		carBrandOption.value = arrList
	})
}
getCarBrandOption()
// 获取保险需求
const needOption = ref([])
const getNeedOption = () => {
	getNeedApi(queryParams).then(res => {
		const { data } = res
		const arrList = data.records.map(item => {
			return {
				value: item.id,
				text:item.name
			}
		})
		needOption.value = arrList
	})
}
getNeedOption()


// 获取搜索列表
const getSearch = (value) => {
	if(uni.$u.trim(value)){
		queryModelParams.modelName = value
		debounce(getModelList, 500)
	} else {
		showList.value = false
	}
}
// 获取车辆型号
const getModelList = async () => {
	const res = await getCarModelApi(queryModelParams)
	const { data } = res
	const listData = data.records
	searchList.value = listData
	showList.value = true
}
// 选择车辆型号
const selectModel = (item) => {
	form.value.vehicleModelId = item.id
	form.value.customizeVehicleModel = item.name
	brandTitle.value = item.brandName
	form.value.vehicleBrandId = item.brandId
	showList.value = false
	isCustom.value = true
	form.value.isCustomizeBrandAndModel = '0'
}

const submitInfo = async () => {
	await carInfoAdd(form.value)
	uni.$u.toast('添加成功')
}
</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: 120%;
		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>