<template>
	<up-navbar placeholder title="车辆信息" autoBack bgColor="#fff" />
	<!-- 头部导航 -->
	<view v-if="!isShowHeader" class="nav_header">
		<view class="nav_item" :class="{ active: form.type === 0 }" @click="form.type = 0">个人车险</view>
		<view class="colLine"></view>
		<view class="nav_item" :class="{ active: form.type === 1 }" @click="form.type = 1">企业车险</view>
	</view>
	<view class="carDetail">
		<up-form :model="form" ref="uFormRef" label-width="150" :labelStyle="labelStyle">
			<view class="carInfo">
				<view v-if="isShowHeader">
					<navTop :carNum="form.licensePlateNumber" />
					<view class="centerContent">
						<view class="carBand">{{ form.frameNumber }}</view>
						<view class="carModel">{{ form.engineNumber }}</view>
					</view>
					<view class="rowLine"></view>
				</view>
				<up-form-item label="上年承保公司" prop="sysDeptId" required>
					<view style="color: #999;font-size: 28rpx;text-align: right;" @click="showCompanyList = true">{{ companyName }}</view>
				</up-form-item>
			</view>
			<!-- 内容模块 -->
			<view class="expert_content">
				<swiper class="swiper" circular :current="form.type" @animationfinish="toggleSwiper" >
					<swiper-item>
						<scroll-view scroll-y="true" class="scroll-history">
							<!-- 车主信息 -->
							<view class="carInfo" style="margin-bottom: 0;">
								<view class="card_title">车主信息</view>
								<up-form-item label="车主姓名" prop="name">
									<up-input v-model="userStore.userInfo.nickName" disabled disabledColor="#fff" fontSize="28rpx" color="#999" placeholder="请输入真实姓名" border="none" inputAlign="right" />
								</up-form-item>
								<up-form-item label="身份证号" prop="identificationNumber">
									<up-input v-model="userStore.userInfo.identificationNumber" disabled disabledColor="#fff" fontSize="28rpx" color="#999" placeholder="请输入身份证号" border="none" inputAlign="right" />
								</up-form-item>
								<up-form-item label="联系电话" prop="phonenumber">
									<up-input v-model="userStore.userInfo.phonenumber" disabled disabled-color="#fff" fontSize="28rpx" color="#999" placeholder="请输入手机号" border="none" inputAlign="right" />
								</up-form-item>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<!-- 企业车险 -->
						<scroll-view scroll-y="true" class="scroll-history">
							<!-- 企业信息 -->
							<view class="carInfo" style="margin-bottom: 0;">
								<view class="card_title">企业信息</view>
								<up-form-item label="企业名称" prop="businessName">
									<up-input v-model="form.businessName" fontSize="28rpx" color="#999" placeholder="请输入企业名称" border="none" inputAlign="right" />
								</up-form-item>
								<up-form-item label="统一社会信用代码" prop="uniformCreditCode">
									<up-input v-model="form.uniformCreditCode" fontSize="28rpx" color="#999" placeholder="请输入统一社会信用代码" border="none" inputAlign="right" />
								</up-form-item>
								<up-form-item label="联系电话" prop="phonenumber">
									<up-input v-model="form.businessPhone" fontSize="28rpx" color="#999" placeholder="请输入手机号" border="none" inputAlign="right" />
								</up-form-item>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			
			<!-- 行驶信息 -->
			<view class="carInfo">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view class="card_title" style="margin-bottom: 0;">行驶证信息</view>
					<up-checkbox
						label="新车无牌照"
						name="newCar"
						usedAlone
						v-model:checked="isNewCar"
						@change="changeCar"
					/>
				</view>
				<up-form-item label="车牌号码" prop="licensePlateNumber" required>
					<input :value="form.licensePlateNumber" :disabled="isNewCar" placeholder-style="color: #999" class="uni-input" placeholder="请输入车牌号(例:京A00000)" @input="upperLicensePlate" />
					<up-input v-model="form.licensePlateNumber" :customStyle="{height: 0, overflow: 'hidden'}" border="none" />
				</up-form-item>
				<up-form-item label="车辆识别代号" prop="frameNumber" required>
					<input :value="form.frameNumber" placeholder-style="color: #999" class="uni-input" placeholder="请输入车架号" @input="upperFrame" />
					<up-input v-model="form.frameNumber" :customStyle="{height: 0, overflow: 'hidden'}" border="none" />
				</up-form-item>
				<up-form-item label="发动机号" prop="engineNumber" required>
					<input :value="form.engineNumber" placeholder-style="color: #999" class="uni-input" placeholder="请输入发动机号" @input="upperEngine" />
					<up-input v-model="form.engineNumber" :customStyle="{height: 0, overflow: 'hidden'}" border="none" />
				</up-form-item>
				<up-form-item label="是否新能源" prop="isNewEnergy" required>
					<uni-data-select
						v-model="form.isNewEnergy"
						:localdata="newEnergyOption"
						placeholder="是否新能源"
					/>
				</up-form-item>
				<up-form-item label="车辆使用性质" prop="vehicleNatureId" required>
					<uni-data-select
						v-model="form.vehicleNatureId"
						:localdata="carNatureOption"
						placeholder="请选择车辆使用性质"
					/>
				</up-form-item>
				<up-form-item label="保险需求" prop="requirements" required>
					<uni-data-select
						v-model="form.requirementsId"
						:localdata="needOption"
						placeholder="请选择保险需求"
					/>
				</up-form-item>
			</view>
		</up-form>
		
		<view class="tip">请认真核实车辆信息，实际投保车辆信息以保险公司确认为准</view>
		
		<view v-if="showCompanyTip" class="transferTip">
			<text>本次订单流转： {{ transferTip }}</text>
			<view class="refreshBtn" @click="getTransferTip">刷新</view>
		</view>
		
		<view v-show="!isEdit" class="btn_sub confirmBtn" @click="submitInfo">确认</view>
		<view v-show="isRole" class="btn_sub confirmBtn" @click="submitEdit">提交修改</view>
		<!-- 提示弹出层 -->
		<up-popup :show="userStore.showTip" mode="center" :safeAreaInsetBottom="false" round="20" @close="userStore.showTip = false">
			<view class="notice">
				<view class="notice_title">{{ advertisingTitle }}</view>
				<view class="notice_content">
					<up-parse :content="advertisingContent"></up-parse>
				</view>
				<view class="btn_tip" @click="userStore.showTip = false">我已认真阅读并同意以上内容</view>
			</view>
		</up-popup>
		
		<!-- 选择承保公司弹出层 -->
		<up-popup :show="showCompanyList" mode="bottom" :round="10" @close="showCompanyList = false">
			<view class="listBox">
				<view class="list_nav">
					<view v-for="(company, index) in companyOption" :key="index" class="list_item u-line-1" @click="chooseCompany(company)">
						{{ company.text }}
					</view>
				</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, carInfoEdit, getAdverList } from '@/api/user.js'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { disposeUser, getCompanyTip } from '@/api/work.js'
import useUserStore from '@/store/modules/user';
import { getCarNatureApi, getNeedApi, getListDeptApi, getCarDetail, getCarTypeApi } from '@/api/car.js'
const userStore = useUserStore()
const showCompanyTip = ref(false)
const transferTip = ref('') // 流转的公司提示
const labelStyle = {
	fontSize: '28rpx',
	lineHeight: '38rpx',
	color: '#3D3D3D',
	marginLeft: '14rpx'
}
const advertisingTitle = ref('')
const advertisingContent = ref('')
// 表单引用  
const uFormRef = ref(null)
const isShowHeader = ref(false)
const taskId = ref('')
const isEdit = ref(false)
const isRole = ref(false)
const isNewCar = ref(false)
const showCompanyList = ref(false)
const companyName = ref('请选择承保公司')
// 车险表单
const form = ref({
	name: '',
	businessName: '',
	businessPhone: '',
	uniformCreditCode: '',
	address: '',
	identificationNumber: '',
	isNewEnergy: '',
	sysDeptId: '',
	type: 0,
	customizeVehicleBrand: '',
	customizeVehicleModel: '',
	licensePlateNumber: '',
	lincensePlateTypeId: '',
	frameNumber: '',
	engineNumber: '',
	vehicleTypeId: '',
	vehicleNatureId: '',
	passengersNumber: '',
	passengerCapacity: '',
	emissions: '',
	vehicleModelId: '',
	vehicleBrandId: '',
	tractionMass: '',
	requirementsId: ''
})
// 查询参数
const queryParams = reactive({
	pageSize: 100,
	pageNum: 1
})

const rules = {
	licensePlateNumber: [
		{ required: true, message: '请输入车牌号', trigger: ['blur', 'change']},
		// {
		// 	validator: (rule, value, callback) => {
		// 		if(isNewCar.value){
		// 			callback()
		// 		}else {
		// 			const regex = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z]([A-HJ-NP-Z0-9]{4}[0-9A-HJ-NP-ZDF]|[DF][A-HJ-NP-Z0-9]{5}|[DF][A-HJ-NP-Z0-9]{6})$/;
		// 			return regex.test(value);
		// 		}
		// 	},
		// 	message: '车牌号不正确',
		// 	trigger: ['change', 'blur'],
		// }
	],
	uniformCreditCode: [
		{
			// 自定义验证函数，见上说明
			pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
			message: '信用代码不正确',
			// 触发器可以同时用blur和change
			trigger: ['change','blur'],
		}
	],
	frameNumber: [
		{ required: true, message: '请输入车架号', trigger: ['blur', 'change']},
		{ max: 17, message: '请正确输入车架号', trigger: ['blur', 'change']},
	],
	sysDeptId: [
		{ required: true, message: '请选择承保公司', trigger: ['change']},
	],
	engineNumber: [{ required: true, message: '请输入发动机号', trigger: ['blur', 'change']}],
	isNewEnergy: [{ required: true, message: '请选择是否新能源', trigger: ['change']}],
	requirementsId: [{ required: true, message: '请选择保险需求', trigger: ['change']}],
	vehicleNatureId: [{ required: true, message: '请选择车辆使用性质', trigger: ['blur', 'change']}],
}
// 微信小程序需要在此注册校验规则
onReady(() => {
	uFormRef.value.setRules(rules)
})
// 检测手机滑动
const toggleSwiper = (event) => {
	form.value.type = event.detail?.current
}

// 页面初始化加载
onLoad(async (options) => {
	if(options.roleId !== undefined){
		isRole.value = true
		taskId.value = options.taskId
		showCompanyTip.value = true
		getTransferTip()
	} 
	if(options.taskId !== undefined) {
		isRole.value = true
		taskId.value = options.taskId
	}
	if(options.carInfoId !== undefined) {
		const { data } = await getCarDetail(options.carInfoId)
		form.value = data
		companyOption.value.forEach(item => {
			if(item.value === form.value.sysDeptId) {
				companyName.value = item.text
			}
		})
		isEdit.value = true
		isShowHeader.value = true
	}
})
const newEnergyOption = ref([
	{ value: '0', text: '否'},
	{ value: '1', text: '是'}
])
// 获取广告列表
const getNoticeDetail = async () => {
	const { rows } = await getAdverList(queryParams)
	if(rows[1]){
		advertisingContent.value = rows[1].noticeContent
		advertisingTitle.value = rows[1].noticeTitle
	} else if(rows[0]) {
		advertisingContent.value = rows[0].noticeContent
		advertisingTitle.value = rows[0].noticeTitle
	}
}
getNoticeDetail()
// 获取承保公司
const companyOption = ref([{value: '0', text: '无'}])
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.toString(),
				text: item.deptName
			}
		})
		companyOption.value.push(...arrList)
	})
}
getCompanyOption()
// 获取车辆使用性质
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 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 changeCar = (value) => {
	form.value.licensePlateNumber = value ? '新车': ''
}
// 选择公司
const chooseCompany = (company) => {
	form.value.sysDeptId = company.value
	companyName.value = company.text
	showCompanyList.value = false
}

// 小写转大写
const upperLicensePlate = ({ target }) => {
	form.value.licensePlateNumber = uni.$u.trim(target.value.toUpperCase(), 'all')
}
// 小写转大写
const upperFrame = ({ target }) => {
	form.value.frameNumber = uni.$u.trim(target.value.toUpperCase(), 'all')
}
// 小写转大写
const upperEngine = ({ target }) => {
	form.value.engineNumber = uni.$u.trim(target.value.toUpperCase(), 'all')
}

// 获取流转下一家分配公司
const getTransferTip = async () => {
  const { data } = await getCompanyTip();
  transferTip.value = data.deptName;
  userStore.transferDeptId = data.deptId.toString();
};

// 授权获取消息
const authMessage = () => {
	uni.requestSubscribeMessage({
	  tmplIds: ['EPaG4yDw9_hBB9E7yAjw4HoJZS9xMc11wbWaBkeFOuo'],
	 //  success: async (respone) => {
		// 	await carInfoAdd(form.value)
		// 	uni.$u.toast('添加成功')
		// 	uni.navigateBack()
		// },
		// 成功或失败都会调用
		complete: async (respone) => {
			await carInfoAdd(form.value)
			uni.$u.toast('添加成功')
			uni.navigateBack()
		}
	})
}

// 添加车辆信息
const submitInfo = async () => {
	if(form.value.type === 1) {
		if(form.value.businessName === '' || form.value.businessPhone === '' || form.value.uniformCreditCode === '' ){
			return uni.$u.toast('企业名称、联系方式、信用代码为必填')
		}
	}
	uFormRef.value.validate().then(async valid => {
		if (valid) {
			authMessage()
		} else {
			uni.$u.toast('校验失败')
		}  
	}).catch((err) => {
		// 处理验证错误  
		uni.$u.toast('校验失败')
	});
}
// 提交修改
const submitEdit = async () => {
	if(showCompanyTip.value) {
		await carInfoEdit(form.value)
		uni.$u.toast('修改成功')
		uni.navigateBack()
	}else {
		uni.requestSubscribeMessage({
		  tmplIds: ['EPaG4yDw9_hBB9E7yAjw4HoJZS9xMc11wbWaBkeFOuo'],
		  success: async (respone) => {
				await carInfoEdit(form.value)
				disposeUser({reregistration:'true'}, taskId.value).then(res => {
					uni.$u.toast('提交成功')
				})
				uni.navigateBack()
			}
		})
	}
}
</script>

<style lang="scss" scoped>
.carDetail{
	padding: 20rpx 30rpx 40rpx;
	background: #F8F9FF;
	.carInfo{
		padding: 22rpx 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.centerContent{
			display: flex;
			align-items: center;
			gap: 20rpx;
		}
		.card_title{
			color: #3d3d3d;
			font-size: 32rpx;
			line-height: 38rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
		}
		.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;
	}
	.confirmBtn{
		color: #fff;
		background: #3680FE;
	}
}

.btn_sub{
	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;
}
.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_tip{
		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;
	}
}

// 输入框样式
.uni-input{
	font-size: 28rpx;
	color: #999;
	text-align: right;
}

// 头部筛选
.nav_header{
	display: flex;
	align-items: center;
	width: 100%;
	height: 80rpx;
	background: #FFFFFF;
	.nav_item{
		flex: 1;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #999;
		&.active{
			font-weight: 500;
			color: #333;
		}
	}
	.colLine{
		width: 2rpx;
		height: 40rpx;
		background: #D8D8D8;
	}
}

.transferTip{
	display: flex;
	align-items: center;
	gap: 40rpx;
	margin-bottom: 30rpx;
	.refreshBtn{
		padding: 6rpx 20rpx;
		background: #3680FE;
		border-radius: 10rpx;
		color: #fff;
	}
}

.scroll-history {
	height: 346rpx;
}
.swiper {
	height: 346rpx;
}

.listBox{
	padding: 30rpx;
	height: 400rpx;
	overflow-y: scroll;
	.list_nav{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
		.list_item{
			width: 30%;
			height: 60rpx;
			border-radius: 20rpx;
			border: 1px solid #eee;
			text-align: center;
			line-height: 60rpx;
		}
	}
}
</style>