partnerApp/pages/carInsure1/carInfo1.vue

<template>
	<view class="body">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<uni-group title="" class="carInfo">
			<uni-forms :rules="carRules" :value="carInfo" ref="carForm" validate-trigger="bind" err-show-type="toast"
				label-width="100">
				<uni-forms-item>
					<view class="title d-flex a-center j-sb font-md">
						<text class="font-weight">车辆信息</text>
						<view class="icon iconfont icon-hangshizhengshibie font-lg main-text-color"
							@tap="chooseImage('carInfo',1)" style="margin-right: 14px;"></view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="车牌号: ">
					<input class="uni-input-input textColor" placeholder="暂未上牌" v-model="carInfo.licenseNo"
						placeholder-style="font-size:28upx" @input="upperCaseType('licenseNo')" />
				</uni-forms-item>
				<uni-forms-item name="frameNo" required label="车辆识别码:">
					<view class="d-flex a-center" style="height: 100%;">
						<input class="uni-input-input flex-1 textColor" placeholder="请输入车辆识别码" v-model="carInfo.frameNo"
							maxlength="17" placeholder-style="font-size:28upx" @input="upperCaseType('frameNo')" />
						<text class="checkButton d-flex a-center j-center" @tap="toChooseVin(carInfo.frameNo)">校验</text>
					</view>
				</uni-forms-item>
				<uni-forms-item name="modelcname" required label="品牌型号: ">
					<view class="d-flex a-center textColor" style="height: 100%;">
						<input class="uni-input-input flex-1 textColor" placeholder="请输入品牌型号"
							v-model="carInfo.modelcname" @blur="binddata('modelcname', $event.detail.value,'carForm')"
							placeholder-style="font-size:28upx" @input="upperCaseType('modelcname')" />
						<text class="checkButton d-flex a-center j-center"
							@tap="toChooseVehicleType(carInfo.modelcname)">校验</text>
					</view>
				</uni-forms-item>
				<uni-forms-item name="engineNo" required label="发动机号: ">
					<input class="uni-input-input textColor" placeholder="请输入发动机号" v-model="carInfo.engineNo"
						@blur="binddata('engineNo', $event.detail.value,'carForm')" placeholder-style="font-size:28upx"
						@input="upperCaseType('engineNo')" />
				</uni-forms-item>
				<uni-forms-item label="年款: ">
					<input class="uni-input-input textColor" placeholder="请输入年款" v-model="carInfo.caryear"
						placeholder-style="font-size:28upx" />
				</uni-forms-item>
				<uni-forms-item label="座位数: ">
					<input class="uni-input-input textColor" placeholder="请输入座位数" v-model="carInfo.seatCount"
						placeholder-style="font-size:28upx" />
				</uni-forms-item>
				<uni-forms-item label="排量: ">
					<input class="uni-input-input textColor" placeholder="请输入排量" v-model="carInfo.enginedesc"
						placeholder-style="font-size:28upx" />
				</uni-forms-item>
				<uni-forms-item label="功率: ">
					<input class="uni-input-input textColor" placeholder="请输入功率" v-model="carInfo.powerScale"
						placeholder-style="font-size:28upx" />
				</uni-forms-item>
				<uni-forms-item label="新车购置价: " required name="purchasePrice">
					<input class="uni-input-input textColor" placeholder="请输入新车购置价" v-model="carInfo.purchasePrice"
						placeholder-style="font-size:28upx"
						@blur="binddata('purchasePrice', $event.detail.value,'carForm')"
						@input="upperCaseType('purchasePrice')" />
				</uni-forms-item>
				<uni-forms-item required label="使用性质: " required>
					<view class="d-flex a-center" style="width:100%;height: 100%;" @click="carnatureshow=true">
						<u-select v-model="carnatureshow" mode="single-column" :list="natureOfVehicleUseoptions"
							@confirm="dictionaryConfirm($event,'carnature')" label-name="dictTag"
							value-name="dictValue"></u-select>
						<view class="textColor">{{carInfo1.carnature}}</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="车辆用途: ">
					<view class="d-flex a-center" style="width:100%;height: 100%;" @click="vehicleUseshow=true">
						<u-select v-if="carInfo.carnature=='01'" v-model="vehicleUseshow" mode="single-column"
							:list="businessVehicleUseoptions" @confirm="dictionaryConfirm($event,'vehicleUse')"
							label-name="dictTag" value-name="dictValue"></u-select>
						<u-select v-if="carInfo.carnature=='02'" v-model="vehicleUseshow" mode="single-column"
							:list="outOfBusinessVehicleUseoptions" @confirm="dictionaryConfirm($event,'vehicleUse')"
							label-name="dictTag" value-name="dictValue"></u-select>
						<view class="textColor">{{carInfo1.vehicleUse}}</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="车辆类型: " required>
					<view class="d-flex a-center" style="width:100%;height: 100%;" @click="cartypeshow=true">
						<u-select v-model="cartypeshow" mode="single-column" :searchShow="true"
							:list="trafficManagementVehicleTypeoptions" @confirm="dictionaryConfirm($event,'cartype')"
							label-name="dictTag" value-name="dictValue"></u-select>
						<view class="textColor">{{carInfo1.cartype}}</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="车辆种类:" required>
					<view class="d-flex a-center" style="width:100%;height: 100%;" @click="cimodelclassshow=true">
						<u-select v-model="cimodelclassshow" mode="single-column" :list="vehicleTypeoptions"
							@confirm="dictionaryConfirm($event,'cimodelclass')" label-name="dictTag"
							value-name="dictValue"></u-select>
						<view class="textColor">{{carInfo1.cimodelclass}}</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="能源种类: " required name="energyType">
					<view class="d-flex a-center" style="width:100%;height: 100%;" @click="energyTypeshow=true">
						<u-select v-model="energyTypeshow" mode="single-column" :list="energyTypeoptions"
							@confirm="dictionaryConfirm($event,'energyType')" label-name="dictTag"
							value-name="dictValue"></u-select>
						<view class="textColor">{{carInfo1.energyType}}</view>
					</view>
				</uni-forms-item>
				<uni-forms-item required label="注册日期" name="registerDate" style="margin-right: 14px;">
					<u-input type="select" :select-open="registerDateShow" v-model="carInfo.registerDate"
						placeholder="请选择注册日期" @click="registerDateShow = true"
						placeholder-style="color:#808080"></u-input>
					<u-picker v-model="registerDateShow" mode="time" :params="params" :end-year="endYear"
						:end-month="endMonth" @confirm="e=> Dateconfirm(e,'carInfo','registerDate')"></u-picker>
				</uni-forms-item>
				<uni-forms-item required label="发证日期" name="issueDate" style="margin-right: 14px;">
					<u-input type="select" :select-open="issueDateShow" v-model="carInfo.issueDate"
						placeholder="请选择发证日期" @click="issueDateShow = true" placeholder-style="color:#808080"></u-input>
					<u-picker v-model="issueDateShow" mode="time" :params="params"
						@confirm="e=> Dateconfirm(e,'carInfo','issueDate')"></u-picker>
				</uni-forms-item>
				<uni-forms-item v-if="carInfo.transferFlag" required label="转移登记日期" name="transferDate"
					style="margin-right: 14px;">
					<u-input type="select" :select-open="transferDateShow" v-model="carInfo.transferDate"
						placeholder="请选择过户日期" @click="transferDateShow = true"
						placeholder-style="color:#808080"></u-input>
					<u-picker v-model="transferDateShow" mode="time" :params="params" :end-year="endYear"
						:end-month="endMonth" @confirm="e=> Dateconfirm(e,'carInfo','transferDate')"></u-picker>
				</uni-forms-item>
				<uni-forms-item required label="是否过户: ">
					<view class="d-flex j-end a-c" style="height:100%">
						<u-switch v-model="carInfo.transferFlag" active-color="#ea552d " size="30"
							style="margin-right: 15px;" @change="transferFlagchange"></u-switch>
					</view>
				</uni-forms-item>
				<uni-forms-item required label="商业险过户: ">
					<view class="d-flex j-end a-c" style="height:100%">
						<u-switch v-model="carInfo.transferFlagBi" active-color="#ea552d " size="30"
							style="margin-right: 15px;"></u-switch>
					</view>
				</uni-forms-item>
				<uni-forms-item required label="是否脱保: ">
					<view class="d-flex j-end a-c" style="height:100%">
						<u-switch v-model="carInfo.outOfInsurance" active-color="#ea552d " size="30"
							style="margin-right: 15px;"></u-switch>
					</view>
				</uni-forms-item>
				<uni-forms-item required label="是否二手车: ">
					<view class="d-flex j-end a-c" style="height:100%">
						<u-switch v-model="carInfo.secondhandcarflag" active-color="#ea552d " size="30"
							style="margin-right: 15px;"></u-switch>
					</view>
				</uni-forms-item>
			</uni-forms>
		</uni-group>
		<uni-group title="" top="10">
			<uni-forms :rules="ownerRules" :value="ownerInfo" ref="ownerForm" validate-trigger="bind"
				err-show-type="toast" label-width="100">
				<uni-forms-item>
					<view class="title d-flex a-center j-sb font-md">
						<text class="font-weight">车主</text>
						<view class="icon iconfont icon-shenfenzhengshibie font-lg main-text-color"
							@tap="chooseImage('ownerInfo',2)" style="margin-right: 14px;"></view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="name" required label="姓名: ">
					<input class="uni-input-input textColor" placeholder="请输入姓名" v-model="ownerInfo.name" maxlength="5"
						placeholder-style="font-size:28upx" />
				</uni-forms-item>
				<uni-forms-item name="identifyType" required label="证件类型:">
					<view class="d-flex a-center" style="width:100%;height: 100%;">
						<picker disabled class="d-flex a-center" style="width:100%;height: 100%;" mode="selector"
							range-key="label" :range="identifyList" v-model="ownerIdentifyIndex"
							@change="bindIdentifyTypeChange($event,'owner')">
							<view class="textColor">{{identifyList[ownerIdentifyIndex]['label']}}</view>
						</picker>
					</view>
				</uni-forms-item>
				<uni-forms-item required name="identifyNumber" label="证件号: ">
					<input class="uni-input-input textColor" placeholder="请输入证件号" v-model="ownerInfo.identifyNumber"
						maxlength="18" @blur="binddata('identifyNumber', $event.detail.value,'ownerInfo')"
						placeholder-style="font-size:28upx" />
				</uni-forms-item>
				<uni-forms-item required name="age" label="年龄: ">
					<input class="uni-input-input textColor" disabled placeholder="请输入年龄" v-model="ownerInfo.age"
						maxlength="18" placeholder-style="font-size:28upx" />
				</uni-forms-item>
				<uni-forms-item name="gender" required label="性别:">
					<view class="d-flex a-center" style="width:100%;height: 100%;">
						<picker class="d-flex a-center" style="width:100%;height: 100%;" mode="selector"
							range-key="label" :range="genderList" v-model="ownerGenderIndex"
							@change="bindGenderChange($event,'owner')">
							<view class="textColor">{{ownerInfo.gender}}</view>
						</picker>
					</view>
				</uni-forms-item>
				<uni-forms-item required name="mobile" label="手机号: ">
					<input class="uni-input-input textColor" placeholder="请输入手机号" v-model="ownerInfo.mobile"
						maxlength="11" placeholder-style="font-size:28upx" />
				</uni-forms-item>
				<uni-forms-item required name="addr" label="地址: " style="margin-right: 14px;">
					<textarea class="textColor" v-model="ownerInfo.addr"
						style="width:100%;line-height: 50upx;margin-top: 15upx;" placeholder-style="font-size:28upx;"
						placeholder="请输入地址" auto-height />
				</uni-forms-item>
				<uni-forms-item name="email" label="邮箱: ">
					<input class="uni-input-input textColor" placeholder="请输入邮箱" v-model="ownerInfo.email"
						placeholder-style="font-size:28upx" />
				</uni-forms-item>
				<uni-forms-item required label="有效期起期" name="identifyValidDate" style="margin-right: 14px;">
					<u-input type="select" :select-open="ownerDateShow" v-model="ownerInfo.identifyValidDate"
						placeholder="请选择有效期起期" @click="ownerDateShow = true"
						placeholder-style="color:#808080"></u-input>
					<u-picker v-model="ownerDateShow" mode="time" :params="params"
						@confirm="e=> Dateconfirm(e,'ownerInfo','identifyValidDate')"></u-picker>
				</uni-forms-item>
				<uni-forms-item required label="有效期止期" name="identifyValidEndDate">
					<view class="dis j-s a-c">
						<u-input type="select" :select-open="ownerEndDateShow" v-model="ownerInfo.identifyValidEndDate"
							placeholder="请选择有效期止期" @click="ownerEndDateShow = true" placeholder-style="color:#808080"
							style="margin-right: 14px;"></u-input>
						<view class=" dis j-c a-c ">
							<text>长期</text>
							<switch style="transform: scale(0.6)"
								@change="checked=> insureLongterm(checked,'ownerInfo')" />
						</view>
					</view>
					<u-picker v-model="ownerEndDateShow" mode="time" :params="params"
						@confirm="e=> Dateconfirm(e,'ownerInfo','identifyValidEndDate')"></u-picker>

				</uni-forms-item>
			</uni-forms>
		</uni-group>
		<uni-group title="" top="10">
			<uni-forms :rules="policyHolderRules" :value="policyHolderInfo" ref="policyHolderForm"
				validate-trigger="bind" err-show-type="toast" label-width="100">
				<uni-forms-item>
					<view class="title d-flex a-center j-sb font-md">
						<text class="font-weight">投保人</text>
						<view class="d-flex a-center j-sb">

							<switch style="transform: scale(0.6);" :checked="holderAndOwner"
								@change="e=>syncPersonInfo(e,'holderAndOwner','policyHolder','owner')" />
							<text style="margin-right: 10px;">同车主</text>
							<view class="icon iconfont icon-shenfenzhengshibie font-lg main-text-color"
								@tap="chooseImage('policyHolderInfo',3)" style="margin-right: 14px;"></view>
						</view>
					</view>
				</uni-forms-item>
				<template v-if="!holderAndOwner">
					<uni-forms-item name="name" required label="姓名: ">
						<input class="uni-input-input textColor" placeholder="请输入姓名" v-model="policyHolderInfo.name"
							maxlength="5" @blur="binddata('name', $event.detail.value,'policyHolderForm')"
							placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item name="identifyType" required label="证件类型: ">
						<view class="d-flex a-center" style="width:100%;height: 100%;">
							<picker disabled class="d-flex a-center" style="width:100%;height: 100%;" mode="selector"
								range-key="label" :range="identifyList" v-model="policyHolderIdentifyIndex"
								@change="bindIdentifyTypeChange($event,'policyHolder')">
								<view class="textColor">{{identifyList[policyHolderIdentifyIndex]['label']}}</view>
							</picker>
						</view>
					</uni-forms-item>
					<uni-forms-item required name="identifyNumber" label="证件号: ">
						<input class="uni-input-input textColor" placeholder="请输入证件号"
							v-model="policyHolderInfo.identifyNumber" maxlength="18"
							@blur="binddata('identifyNumber', $event.detail.value,'policyHolderInfo')"
							placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item required name="age" label="年龄: ">
						<input class="uni-input-input textColor" disabled placeholder="请输入年龄"
							v-model="policyHolderInfo.age" maxlength="18" placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item name="gender" required label="性别:">
						<view class="d-flex a-center" style="width:100%;height: 100%;">
							<picker class="d-flex a-center" style="width:100%;height: 100%;" mode="selector"
								range-key="label" :range="genderList" v-model="policyHolderGenderIndex"
								@change="bindGenderChange($event,'policyHolder')">
								<view class="textColor">{{policyHolderInfo.gender}}</view>
							</picker>
						</view>
					</uni-forms-item>
					<uni-forms-item required name="mobile" label="手机号: ">
						<input class="uni-input-input textColor" placeholder="请输入手机号" v-model="policyHolderInfo.mobile"
							maxlength="11" @blur="binddata('mobile', $event.detail.value,'policyHolderForm')"
							placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item required name="addr" label="地址: ">
						<textarea class="textColor" v-model="policyHolderInfo.addr"
							style="width:100%;line-height: 50upx;margin-top: 15upx;"
							placeholder-style="font-size:28upx;" placeholder="请输入地址" auto-height
							@blur="binddata('addr', $event.detail.value,'policyHolderForm')" />
					</uni-forms-item>
					<uni-forms-item name="email" label="邮箱: ">
						<input class="uni-input-input textColor" placeholder="请输入邮箱" v-model="policyHolderInfo.email"
							placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item required label="有效期起期" name="identifyValidDate" style="margin-right: 14px;">
						<u-input type="select" :select-open="policyHolderDateShow"
							v-model="policyHolderInfo.identifyValidDate" placeholder="请选择有效期起期"
							@click="policyHolderDateShow = true" placeholder-style="color:#808080"></u-input>
						<u-picker v-model="policyHolderDateShow" mode="time" :params="params"
							@confirm="e=> Dateconfirm(e,'policyHolderInfo','identifyValidDate')"></u-picker>
					</uni-forms-item>
					<uni-forms-item required label="有效期止期" name="identifyValidEndDate">
						<view class="dis j-s a-c">
							<u-input type="select" :select-open="policyHolderEndDateShow"
								v-model="policyHolderInfo.identifyValidEndDate" placeholder="请选择有效期止期"
								@click="policyHolderEndDateShow = true" placeholder-style="color:#808080"
								style="margin-right: 14px;"></u-input>
							<view class=" dis j-c a-c ">
								<text>长期</text>
								<switch style="transform: scale(0.6)"
									@change="checked=>insureLongterm(checked,'policyHolderInfo')" />
							</view>
						</view>

						<u-picker v-model="policyHolderEndDateShow" mode="time" :params="params"
							@confirm="e=> Dateconfirm(e,'policyHolderInfo','identifyValidEndDate')"></u-picker>
					</uni-forms-item>
				</template>
			</uni-forms>
		</uni-group>

		<uni-group title="" top="10">
			<uni-forms :rules="insuredPersonRules" :value="insuredPersonInfo" ref="insuredPersonForm"
				validate-trigger="bind" err-show-type="toast" label-width="100">
				<uni-forms-item>
					<view class="title d-flex a-center j-sb font-md">
						<text class="font-weight">被保人</text>
						<view class="d-flex a-center j-sb">
							<view class="d-flex a-center j-sb">
								<switch style="transform: scale(0.6);" :checked="tbrAndOwner"
									@change="e=>syncPersonInfo(e,'tbrAndOwner','insuredPerson','policyHolder','insuredAndOwner')" />
								<text style="margin-right: 10px;">同投保人</text>
							</view>
							<view class="d-flex a-center j-sb" v>
								<switch style="transform: scale(0.6);" :checked="insuredAndOwner"
									@change="e=>syncPersonInfo(e,'insuredAndOwner','insuredPerson','owner','tbrAndOwner')" />
								<text style="margin-right: 10px;">同车主</text>
							</view>

							<view class="icon iconfont icon-shenfenzhengshibie font-lg main-text-color"
								@tap="chooseImage('insuredPersonInfo',4)" style="margin-right: 14px;"></view>
						</view>
					</view>
				</uni-forms-item>
				<template v-if="!insuredAndOwner && !tbrAndOwner">
					<uni-forms-item name="name" required label="姓名: ">
						<input class="uni-input-input textColor" placeholder="请输入姓名" v-model="insuredPersonInfo.name"
							maxlength="5" @blur="binddata('name', $event.detail.value,'insuredPersonForm')"
							placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item name="identifyType" required label="证件类型: ">
						<view class="d-flex a-center" style="width:100%;height: 100%;">
							<picker disabled class="d-flex a-center" style="width:100%;height: 100%;" mode="selector"
								range-key="label" :range="identifyList" v-model="insuredPersonIdentifyIndex"
								@change="bindIdentifyTypeChange($event,'insuredPerson')">
								<view class="textColor">{{identifyList[insuredPersonIdentifyIndex]['label']}}</view>
							</picker>
						</view>
					</uni-forms-item>
					<uni-forms-item required name="identifyNumber" label="证件号: ">
						<input class="uni-input-input textColor" placeholder="请输入证件号"
							v-model="insuredPersonInfo.identifyNumber" maxlength="18"
							@blur="binddata('identifyNumber', $event.detail.value,'insuredPersonInfo')"
							placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item required name="age" label="年龄: ">
						<input class="uni-input-input textColor" disabled placeholder="请输入年龄"
							v-model="insuredPersonInfo.age" maxlength="18" placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item name="gender" required label="性别:">
						<view class="d-flex a-center" style="width:100%;height: 100%;">
							<picker class="d-flex a-center" style="width:100%;height: 100%;" mode="selector"
								range-key="label" :range="genderList" v-model="insuredPersonGenderIndex"
								@change="bindGenderChange($event,'insuredPerson')">
								<view class="textColor">{{insuredPersonInfo.gender}}</view>
							</picker>
						</view>
					</uni-forms-item>
					<uni-forms-item required name="mobile" label="手机号: ">
						<input class="uni-input-input textColor" placeholder="请输入手机号" v-model="insuredPersonInfo.mobile"
							maxlength="11" @blur="binddata('mobile', $event.detail.value,'insuredPersonForm')"
							placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item required name="addr" label="地址: ">
						<textarea class="textColor" v-model="insuredPersonInfo.addr"
							style="width:100%;line-height: 50upx;margin-top: 15upx;"
							placeholder-style="font-size:28upx;" placeholder="请输入地址" auto-height
							@blur="binddata('addr', $event.detail.value,'insuredPersonForm')" />
					</uni-forms-item>
					<uni-forms-item name="email" label="邮箱: ">
						<input class="uni-input-input textColor" placeholder="请输入邮箱" v-model="insuredPersonInfo.email"
							placeholder-style="font-size:28upx" />
					</uni-forms-item>
					<uni-forms-item required label="有效期起期" name="identifyValidDate" style="margin-right: 14px;">
						<u-input type="select" :select-open="insuredPersonDateShow"
							v-model="insuredPersonInfo.identifyValidDate" placeholder="请选择有效期起期"
							@click="insuredPersonDateShow = true" placeholder-style="color:#808080"></u-input>
						<u-picker v-model="insuredPersonDateShow" mode="time" :params="params"
							@confirm="e=> Dateconfirm(e,'insuredPersonInfo','identifyValidDate')"></u-picker>
					</uni-forms-item>
					<uni-forms-item required label="有效期止期" name="identifyValidEndDate">
						<view class="dis j-s a-c">
							<u-input type="select" :select-open="insuredPersonEndDateShow"
								v-model="insuredPersonInfo.identifyValidEndDate" placeholder="请选择有效期止期"
								@click="insuredPersonEndDateShow = true" placeholder-style="color:#808080"
								style="margin-right: 14px;"></u-input>
							<view class=" dis j-c a-c ">
								<text>长期</text>
								<switch style="transform: scale(0.6)"
									@change="checked=>insureLongterm(checked,'insuredPersonInfo')" />
							</view>
						</view>

						<u-picker v-model="insuredPersonEndDateShow" mode="time" :params="params"
							@confirm="e=> Dateconfirm(e,'insuredPersonInfo','identifyValidEndDate')"></u-picker>
					</uni-forms-item>
				</template>
			</uni-forms>
		</uni-group>
		<view style="height: 160upx;"></view>
		<view class="infoBottom d-flex a-center j-center j-sb">
			<button type="default" class="d-flex a-center j-center" @tap="toNext">下一步</button>
		</view>
		<view class="mask mask-show" v-if="lodingshow">
			<!-- 加载动画开始 -->
			<view class="preloader">
				<view class="loader"></view>
			</view>
			<!-- 加载动画结束 -->
			<view class="title">加载中...</view>
		</view>
		<u-popup v-model="ImageOcrShow" mode="center" width="90%" border-radius="10" @close="ImagePopClose">
			<view class="popContent dis f-c a-c j-s">
				<view class="popHeader ">信息校验</view>
				<view v-if="checkType=='carInfo'" class="" style="padding: 4px 10px;width: 100%;">
					<view class="imgOcr dis j-s a-c">
						<view class="imgOcr-border">
							<u-icon v-if="carfrontImg" class="del_btn" name="close-circle-fill" style="font-size: 20px;"
								color="rgb(247, 247, 247)" @click="del_btn('carfrontImg')"></u-icon>
							<image class="obverseimg" :src="carfrontImg?carfrontImg:'/static/carfront.png'"
								@click="carfrontChange" mode="">

						</view>
						<view class="imgOcr-border">
							<u-icon v-if="carbackImg" class="del_btn" name="close-circle-fill" style="font-size: 20px;"
								color="rgb(247, 247, 247)" @click="del_btn('carbackImg')"></u-icon>
							<image class="obverseimg" :src="carbackImg?carbackImg:'/static/carback.png'"
								@click="carbackChange" mode="">
						</view>
					</view>
					<view class="line dis j-s a-c" style="margin-top: 10px;">
						<text>车主</text>
						<u-input v-model="carfront.carOwner" placeholder="请输入车主" />
					</view>
					<view class="line dis j-s a-c">
						<text>车牌号</text>
						<u-input v-model="carfront.licenseNo" placeholder="请输入车牌号" />
					</view>
					<view class="line dis j-s a-c">
						<text>发动机号</text>
						<u-input v-model="carfront.engineNo" placeholder="请输入发动机号" />
					</view>
					<view class="line dis j-s a-c">
						<text>车架号</text>
						<u-input v-model="carfront.vinNo" placeholder="请输入车架号" />
					</view>
					<view class="line dis j-s a-c">
						<text>注册日期</text>
						<u-input v-model="carfront.registerDate" placeholder="请输入注册日期" />
					</view>
					<view class="line dis j-s a-c">
						<text>发证日期</text>
						<u-input v-model="carfront.issueDate" placeholder="请输入发证日期" />
					</view>
				</view>
				<view v-else class="" style="padding: 4px 10px;width: 100%;">
					<view class="imgOcr dis j-s a-c">
						<view class="imgOcr-border">
							<u-icon v-if="userfrontImg" class="del_btn" name="close-circle-fill"
								style="font-size: 20px;" color="rgb(247, 247, 247)"
								@click="del_btn('userfrontImg')"></u-icon>
							<image class="obverseimg" :src="userfrontImg?userfrontImg:'/static/userfront.png'"
								@click="userfrontChange" mode="">

						</view>
						<view class="imgOcr-border">
							<u-icon v-if="userbackImg" class="del_btn" name="close-circle-fill" style="font-size: 20px;"
								color="rgb(247, 247, 247)" @click="del_btn('userbackImg')"></u-icon>
							<image class="obverseimg" :src="userbackImg?userbackImg:'/static/userback.png'"
								@click="userbackChange" mode="">
						</view>
					</view>
					<view class="line dis j-s a-c" style="margin-top: 10px;">
						<text>姓名</text>
						<u-input v-model="userfront.name" placeholder="请输入姓名" />
					</view>
					<view class="line dis j-s a-c">
						<text>证件号</text>
						<u-input v-model="userfront.identifyNumber" placeholder="请输入证件号" />
					</view>
					<view class="line dis j-s a-c">
						<text>地址</text>
						<u-input v-model="userfront.addr" placeholder="请输入地址" />
					</view>
					<view class="line dis j-s a-c">
						<text>有效期起期</text>
						<u-input v-model="userback.identifyValidDate" placeholder="请输入有效期起期" />
					</view>
					<view class="line dis j-s a-c">
						<text>有效期止期</text>
						<u-input v-model="userback.identifyValidEndDate" placeholder="请输入有效期止期" />
					</view>
				</view>
				<view class="popFooter dis">
					<view class="popFooter-btn" @click="ImageOcrShow=false">取消</view>
					<view class="popFooter-btn" @click="CarOCRconfirm">确认</view>
				</view>
			</view>
		</u-popup>
		<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="previewImgs"></previewImage>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import checkImageInfo from '@/components/modules/carInsure/checkImageInfo/checkImageInfo.vue'; //引用图片信息检查插件
	import previewImage from '@/components/common/previewImage/previewImage.vue'; //引用插件
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/image-tools-base64.js';
	import {
		userInfo
	} from 'os';
	import store from '@/store';
	import $http from '../../config/requestConfig';
	import {
		getAgeByIdCard,
		addressCode,
	} from '@/plugins/utils';
	import {
		Promise
	} from 'bluebird';
	var dateTime = new Date();
	let Year = dateTime.getFullYear();
	let Month = Number(dateTime.getMonth() + 1);
	export default {
		components: {
			checkImageInfo,
			previewImage
		},
		watch: {
			"carInfo.frameNo": {
				handler(val) {
					if (val) {
						this.carInfo.vinNo = val;
					}
				},
				deep: true
			},
		},
		data() {
			return {
				form: {
					name: "",
				},
				//影像id上传列表
				checkType: "",
				checkIndex: 1,
				carInfoPositiveList: [], //车辆
				ownerInfoPositiveList: [], //车主
				policyHolderInfoPositiveList: [], //投保人
				insuredPersonInfoPositiveList: [], //被保人
				carfront: {},
				carback: {},
				userfront: {},
				userback: {},
				carfrontImg: '', //车辆正面
				carbackImg: '', //车辆背面
				userfrontImg: '', //车主正面
				userbackImg: '', //车主背面
				carFile: [], //车辆识别list
				userFile: [], //车主识别list
				ImageOcrShow: false, //影像识别框
				vehicleUseshow: false,
				carnatureshow: false,
				cartypeshow: false,
				cimodelclassshow: false,
				energyTypeshow: false,
				lodingshow: false,
				endYear: Year,
				endMonth: Month,
				registerDateShow: false,
				issueDateShow: false,
				ownerDateShow: false,
				ownerEndDateShow: false,
				policyHolderDateShow: false,
				policyHolderEndDateShow: false,
				insuredPersonDateShow: false,
				insuredPersonEndDateShow: false,
				transferDateShow: false,
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
					hour: false, //时
					minute: false, //分
					second: false, //秒
				},
				carInfo: {
					licenseNo: "", //车牌号
					brandName: "", //车辆品牌型号
					vinNo: "", //车架号
					engineNo: "", //发动机号
					modelCode: "", //车型编码
					seatCount: "0", //核定载客量 核定载人数
					purchasePrice: "", //新车购置价最低，行业实际价值，协商价值
					carBrand: "", //车型品牌
					ciCarName: "", //行业车型名称
					ciModelCode: "", //行业车型编码
					completeKerbMass: "", //整备质量
					exhaustScale: "", //排量
					factory: "", //工厂名称
					factoryid: "", //工厂编码
					frameNo: "", //车架号
					licenseTypeCode: "02", //号牌种类
					vehicleclass: "", //车辆类型
					familyName: "", //车型
					modelcname: "", //车型名称
					powertypecode: "", //燃料类型编码
					vehicleweight: "", //总质量
					limitLoad: "", //核定载质量
					caryear: "0", //年款
					cimodelclass: "A0", //车辆种类
					powertype: "汽油", //燃料类型
					energyType: "0", //能源种类
					enginedesc: "", //排量
					powerScale: "", //功率
					registerDate: "", //注册日期
					issueDate: "", //发证日期
					transferFlag: false, //过户标志
					transferFlagBi: false, //商业过户标志
					transferDate: "", //过户日期
					loanStatus: 0, //贷款标志
					firstBeneMan: "", //第一受益人
					noLicenseFlag: false, //是否新车
					cartype: "K33", //客车A0 货车H0          
					carnature: "02", //使用性质 家庭自用8A  非营业企业8B   非营业党政机关，事业团体8C  非营业货车8D					
					property: "1", //所属性质 1个人 2企业 3个人
					outOfInsurance: false, //脱保
					secondhandcarflag: false, //二手车
					vehicleUse: "05" //车辆用途
				},
				carInfo1: {
					energyType: "汽油",
					cimodelclass: "客车", //车辆种类
					carnature: "非营业",
					cartype: "轿车",
					vehicleUse: "",
				},
				carRules: {

					frameNo: {
						rules: [{
							required: true,
							errorMessage: '请输入车辆识别码',
						}, {
							pattern: /^([0-9A-Z]){17}$/,
							errorMessage: '请输入正确的车辆识别码',
						}]
					},
					modelcname: {
						rules: [{
							required: true,
							errorMessage: '请输入品牌型号',
						}, ]
					},
					engineNo: {
						rules: [{
							required: true,
							errorMessage: '请输入发动机号',
						}, ]
					},
					purchasePrice: {
						rules: [{
							required: true,
							errorMessage: '请输入新车购置价',
						}, {
							validateField: function(rule, value, data, callback) {
								if (value == 0) {
									callback('新车购置价不能为零')
								}
								return true
							}
						}]
					},
					registerDate: {
						rules: [{
							required: true,
							errorMessage: '请选择注册日期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '注册日期格式错误',
						}]
					},
					issueDate: {
						rules: [{
							required: true,
							errorMessage: '请选择发证日期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '发证日期日期格式错误',
						}]
					}
				},
				ownerRules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入车主姓名',
							},
							{
								minLength: 2,
								maxLength: 5,
								errorMessage: '车主姓名长度在 {minLength} 到 {maxLength} 个字符',
							},
							{
								pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
								errorMessage: '请输入正确的车主姓名',
							}
						]
					},
					identifyNumber: {
						rules: [{
								required: true,
								errorMessage: '请输入车主证件号',
							},
							{
								pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
								errorMessage: '请输入正确的车主证件号',
							}
						]
					},
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入车主手机号',
							},
							{
								pattern: /^1[3-9]\d{9}$/,
								errorMessage: '请输入正确的手机号',
							}
						]
					},
					addr: {
						rules: [{
								required: true,
								errorMessage: '请输入车主地址',
							},
							{
								minLength: 8,
								maxLength: 40,
								errorMessage: '车主地址长度在 {minLength} 到 {maxLength} 个字符',
							},
						]
					},
					identifyValidDate: {
						rules: [{
							required: true,
							errorMessage: '请选择身份证起期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '身份证起期格式错误',
						}]
					},
					identifyValidEndDate: {
						rules: [{
							required: true,
							errorMessage: '请选择身份证止期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '身份证止期格式错误',
						}]
					},
				},
				policyHolderRules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入投保人姓名',
							},
							{
								minLength: 2,
								maxLength: 5,
								errorMessage: '投保人姓名长度在 {minLength} 到 {maxLength} 个字符',
							},
							{
								pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
								errorMessage: '请输入正确的投保人姓名',
							}
						]
					},
					identifyNumber: {
						rules: [{
								required: true,
								errorMessage: '请输入投保人证件号',
							},
							{
								pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
								errorMessage: '请输入正确的投保人证件号',
							}
						]
					},
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入投保人手机号',
							},
							{
								pattern: /^1[3-9]\d{9}$/,
								errorMessage: '请输入正确的手机号',
							}
						]
					},
					addr: {
						rules: [{
								required: true,
								errorMessage: '请输入投保人地址',
							},
							{
								minLength: 8,
								maxLength: 40,
								errorMessage: '投保人地址长度在 {minLength} 到 {maxLength} 个字符',
							},
						]
					},
					identifyValidDate: {
						rules: [{
							required: true,
							errorMessage: '请选择身份证起期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '身份证起期格式错误',
						}]
					},
					identifyValidEndDate: {
						rules: [{
							required: true,
							errorMessage: '请选择身份证止期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '身份证止期格式错误',
						}]
					},
				},
				insuredPersonRules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入被保人姓名',
							},
							{
								minLength: 2,
								maxLength: 5,
								errorMessage: '被保人姓名长度在 {minLength} 到 {maxLength} 个字符',
							},
							{
								pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
								errorMessage: '请输入正确的被保人姓名',
							}
						]
					},
					identifyNumber: {
						rules: [{
								required: true,
								errorMessage: '请输入被保人证件号',
							},
							{
								pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
								errorMessage: '请输入正确的被保人证件号',
							}
						]
					},
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入被保人手机号',
							},
							{
								pattern: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
								errorMessage: '请输入正确的手机号',
							}
						]
					},
					addr: {
						rules: [{
								required: true,
								errorMessage: '请输入被保人地址',

							},
							{
								minLength: 8,
								maxLength: 40,
								errorMessage: '被保人地址长度在 {minLength} 到 {maxLength} 个字符',
							},
						]
					},
					identifyValidDate: {
						rules: [{
							required: true,
							errorMessage: '请选择身份证起期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '身份证起期格式错误',
						}]
					},
					identifyValidEndDate: {
						rules: [{
							required: true,
							errorMessage: '请选择身份证止期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '身份证止期格式错误',
						}]
					},
				},
				checkInfo: {},
				checkImage: [],
				licenseNo: '', //车牌号
				//使用性质
				carnatureIndex: 0,
				cartypeIndex: 0,
				cimodelclassIndex: 0,
				fuelTypeCodeIndex: 0,
				propertyIndex: 0,
				ownerGenderIndex: 0,
				policyHolderGenderIndex: 0,
				insuredPersonGenderIndex: 0,
				genderList: [{
						label: "男",
						value: "男",
					},
					{
						label: "女",
						value: "女",
					}
				],
				identifyList: [{
						label: '身份证',
						id: "01"
					},
					{
						label: '护照',
						id: "02"
					},
					{
						label: '港澳台居民居住证',
						id: "03"
					},
					{
						label: '组织机构代码证',
						id: "04"
					},
					{
						label: '统一社会信用代码证',
						id: "05"
					},
					{
						label: '营业执照',
						id: "06"
					}
				],
				ownerIdentifyIndex: 0,
				policyHolderIdentifyIndex: 0,
				insuredPersonIdentifyIndex: 0,
				holderAndOwner: true, //投保人同车主
				insuredAndOwner: false, //被保人同车主
				tbrAndOwner: true, //被保人同投保人
				ownerInfo: {
					name: "",
					identifyType: "01",
					identifyNumber: "",
					addr: "",
					gender: "", //性别
					email: "", //邮箱
					mobile: "",
					identifyValidDate: "", //有效期起期
					identifyValidEndDate: "", //有效期止期
					age: "", //年龄
				},
				policyHolderInfo: {
					name: "",
					identifyType: "01",
					identifyNumber: "",
					addr: "",
					gender: "", //性别
					email: "",
					mobile: "",
					identifyValidDate: "", //有效期起期
					identifyValidEndDate: "", //有效期止期
					age: "", //年龄
				},
				insuredPersonInfo: {
					name: "",
					identifyType: "01",
					identifyNumber: "",
					addr: "",
					gender: "", //性别
					email: "",
					mobile: "",
					identifyValidDate: "", //有效期起期
					identifyValidEndDate: "", //有效期止期
					age: "", //年龄
				},
				riskList: [], //交强险和商业险的选择
				kindList: [], //商业险险种的选择

				token: "",
				/* 数据字典 */
				natureOfVehicleUseoptions: [],
				vehicleTypeoptions: [],
				trafficManagementVehicleTypeoptions: [],
				energyTypeoptions: [],
				businessVehicleUseoptions: [],
				outOfBusinessVehicleUseoptions: [],
				/* 数据字典 */
				model: {
					ownerInforegion: '',
					policyHolderInforegion: '',
					insuredPersonInforegion: '',
				},
				previewImgs: [],
			}
		},
		onShow() {
			this.getDicType("businessVehicleUse"); //车辆用途（营业）
			this.getDicType("outOfBusinessVehicleUse"); //车辆用途（非营业）
			this.getDicType("natureOfVehicleUse"); //车辆性质
			this.getDicType("vehicleType"); //车辆种类
			this.getDicType("trafficManagementVehicleType"); //车辆类型
			this.getDicType("energyType"); //能源种类
		},
		onLoad(options) {
			//--数据字典 begin --
			if (!!options.licenseNo) {
				// this.licenseNo = decodeURIComponent(options.licenseNo);
			} else {
				const eventChannel = this.getOpenerEventChannel()
				// 监听acceptData事件，获取上一页面通过eventChannel传送到当前页面的数据
				eventChannel.on('acceptData', (data) => {
					if (!!data) {
						//读取上一个页面传过来数据（车辆信息，人员信息，险种信息）
						this.carInfo = data.carInfo; //车辆信息
						this.ownerInfo = JSON.parse(JSON.stringify(data.ownerInfo));
						this.policyHolderInfo = JSON.parse(JSON.stringify(data.policyHolderInfo));
						this.insuredPersonInfo = JSON.parse(JSON.stringify(data.insuredPersonInfo));
						this.carInfoPositiveList = data.carInfoPositiveList; //车辆
						this.ownerInfoPositiveList = data.ownerInfoPositiveList; //车主
						this.policyHolderInfoPositiveList = data.policyHolderInfoPositiveList; //投保
						this.insuredPersonInfoPositiveList = data.insuredPersonInfoPositiveList; //被保人
						this.riskList = data.riskList; //险种大类
						this.kindList = data.kindList; //商业险险别
						this.licenseNo = this.carInfo.licenseNo;
						this.holderAndOwner = false; //投保人同车主
						this.insuredAndOwner = false; //被保人同车主
						this.tbrAndOwner = false; //被保人同投保人
					}
				})
			};
			this.token = store.state.token
		},
		// 监听导航栏的按钮
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				this.navigate({
					url: '/pages/index/index'
				}, "switchTab", true);
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
		},

		methods: {
			transferFlagchange(status) {
				if (status) {
					this.carInfo.transferDate = this.carInfo.issueDate;
				} else {
					this.carInfo.transferDate = ""
				}
			},
			async getDicType(type) {
				let res = await this.$http.get('/sysDict/dictDetails/' + type);
				if (res.code == 200) {
					this[type + 'options'] = res.data.ddList;
				}
			},
			dictionaryConfirm(e, name) {
				this.carInfo[name] = e[0].value;
				this.carInfo1[name] = e[0].label;
			},
			/**
			 * @param {String} e 时间选择器的值
			 * @param {String} obj 储存表单对象
			 * @param {String} param 储存表单参数
			 */
			Dateconfirm(e, obj, param) {
				this[obj][param] = e.year + '-' + e.month + '-' + e.day;
			},
			//选择驾照图片或拍摄驾照图片
			chooseImage(type, index) {
				this.checkType = type;
				this.checkIndex = index;
				this.ImageOcrShow = true;
			},
			//行驶证正面
			async carfrontChange() {
				if (this.carfrontImg) {
					this.previewImgs = [{
						url: this.carfrontImg
					}];
					this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
				} else {
					let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
						count: 1,
						sizeType: ['compressed']
					});
					let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
					if (!size) {
						this.$refs.uToast.show({
							title: '上传图片大小不能超过 5MB!',
							type: 'error',
						})
						return false
					}
					if (chooseImageRes) {
						this.lodingshow = true;
						this.carfrontImg = chooseImageRes.tempFilePaths[0];
						uni.uploadFile({
							url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
							filePath: this.carfrontImg,
							name: "multipartFile",
							formData: {
								'type': 'image',
							},
							header: {
								Authorization: this.token,
							},
							success: (imgRes) => {
								let data = JSON.parse(imgRes.data);
								if (data.code == '200') {
									if (this.carInfoPositiveList.some(v => v.imageType == 'C01')) {
										this.carInfoPositiveList.map(val => {
											if (val.imageType == 'C01') {
												val.imageId = data.data.id;
											}
										})
									} else {
										this.carInfoPositiveList.push({
											imageId: data.data.id,
											imageType: "C01",
										})
									}
									uni.uploadFile({
										url: this.$base.baseUrl + '/order/identify/drivingPermit',
										filePath: this.carfrontImg,
										name: "image1",
										header: {
											Authorization: this.token,
										},
										success: (uploadFileRes) => {
											let data = JSON.parse(uploadFileRes.data).data;
											let rdate = '';
											if (!!data.carInfo.registerDate) {
												rdate = data.carInfo.registerDate.substr(0,
														4) +
													'-' + data.carInfo
													.registerDate.substr(4, 2) + '-' + data
													.carInfo
													.registerDate
													.substr(6,
														2)
											}
											let isdate = '';
											if (!!data.carInfo.issueDate) {
												isdate = data.carInfo.issueDate.substr(0, 4) +
													'-' + data.carInfo
													.issueDate.substr(4, 2) + '-' + data
													.carInfo
													.issueDate.substr(6, 2)
											}
											this.ownerInfo.name = data.carInfo.carOwner; //车主
											this.carfront = {
												carOwner: data.carInfo.carOwner, //车主
												licenseNo: data.carInfo.plateNo, //车牌号
												modelcname: data.carInfo.backOcrID, //品牌型号
												frameNo: data.carInfo.vin, //车架号
												engineNo: data.carInfo.engine, //发动机号
												vinNo: data.carInfo.vin, //车架号
												issueDate: isdate, //发证日期
												registerDate: rdate, //注册日期
												cimodelclass: data.carInfo.motorTypeCode,
												carnature: data.carInfo.motorUsageTypeCode,

											}
											this.lodingshow = false;
										}

									});

								}

							}
						});
					} else {
						this.lodingshow = false;
					}

				}
			},
			//行驶证反面
			async carbackChange() {
				if (this.carbackImg) {
					this.previewImgs = [{
						url: this.carbackImg
					}];
					this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
				} else {
					let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
						count: 1,
						sizeType: ['compressed']
					});
					let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
					if (!size) {
						this.$refs.uToast.show({
							title: '上传图片大小不能超过 5MB!',
							type: 'error',
						})
						return false
					}
					if (chooseImageRes) {
						this.lodingshow = true;
						this.carbackImg = chooseImageRes.tempFilePaths[0];
						uni.uploadFile({
							url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
							filePath: this.carbackImg,
							name: "multipartFile",
							formData: {
								'type': 'image',
							},
							header: {
								Authorization: this.token,
							},
							success: (imgRes) => {
								let data = JSON.parse(imgRes.data);
								if (data.code == '200') {
									if (this.carInfoPositiveList.some(v => v.imageType == 'D01')) {
										this.carInfoPositiveList.map(val => {
											if (val.imageType == 'D01') {
												val.imageId = data.data.id;
											}
										})
									} else {
										this.carInfoPositiveList.push({
											imageId: data.data.id,
											imageType: "D01",
										})
									}
									uni.uploadFile({
										url: this.$base.baseUrl + '/order/identify/drivingPermit',
										filePath: this.carbackImg,
										name: "image2",
										header: {
											Authorization: this.token,
										},
										success: (uploadFileRes) => {
											let data1 = JSON.parse(uploadFileRes.data).data;
											this.carback = {
												vehicleweight: data1.carInfo
													.grossMass, //总质量
												completeKerbMass: data1.carInfo
													.unladenMass, //整备质量
												seatCount: data1.carInfo
													.approvedPassengersCapacity, //核定载客数
											}
											this.lodingshow = false;
										}

									});
								}

							}
						});
					} else {
						this.lodingshow = false;
					}

				}
			},
			//身份证正面
			async userfrontChange() {
				if (this.userfrontImg) {
					this.previewImgs = [{
						url: this.userfrontImg
					}];
					this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
				} else {
					let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
						count: 1,
						sizeType: ['compressed']
					});
					let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
					if (!size) {
						this.$refs.uToast.show({
							title: '上传图片大小不能超过 5MB!',
							type: 'error',
						})
						return false
					}
					if (chooseImageRes) {
						this.lodingshow = true;
						this.userfrontImg = chooseImageRes.tempFilePaths[0];
						uni.uploadFile({
							url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
							filePath: this.userfrontImg,
							name: "multipartFile",
							formData: {
								'type': 'image',
							},
							header: {
								Authorization: this.token,
							},
							success: (imgRes) => {
								let data = JSON.parse(imgRes.data);
								if (data.code == '200') {
									let type = 'C0' + this.checkIndex;
									if (this[this.checkType + 'PositiveList'].some(v => v.imageType ==
											type)) {
										this[this.checkType + 'PositiveList'].map(val => {
											if (val.imageType == type) {
												val.imageId = data.data.id;
											}
										})
									} else {
										this[this.checkType + 'PositiveList'].push({
											imageId: data.data.id,
											imageType: type,
										})
									}
									uni.uploadFile({
										url: this.$base.baseUrl + '/order/identify/idCard',
										filePath: this.userfrontImg,
										name: "image1",
										header: {
											Authorization: this.token,
										},
										success: (uploadFileRes) => {
											let data = JSON.parse(uploadFileRes.data).data;
											this.userfront = {
												age: getAgeByIdCard(data.customerInfo
													.identifyNumber),
												name: data.customerInfo.name,
												gender: data.customerInfo
													.identifyIssuedCom,
												identifyNumber: data.customerInfo
													.identifyNumber,
												addr: data.customerInfo.addr,
											}
											this.lodingshow = false;
										}
									});
								}

							}
						});
					} else {
						this.lodingshow = false;
					}

				}
			},
			//身份证反面
			async userbackChange() {
				if (this.userbackImg) {
					this.previewImgs = [{
						url: this.userbackImg
					}];
					this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
				} else {
					let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
						count: 1,
						sizeType: ['compressed']
					});
					let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
					if (!size) {
						this.$refs.uToast.show({
							title: '上传图片大小不能超过 5MB!',
							type: 'error',
						})
						return false
					}
					if (chooseImageRes) {
						this.lodingshow = true;
						this.userbackImg = chooseImageRes.tempFilePaths[0];
						uni.uploadFile({
							url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
							filePath: this.userbackImg,
							name: "multipartFile",
							formData: {
								'type': 'image',
							},
							header: {
								Authorization: this.token,
							},
							success: (imgRes) => {
								let data = JSON.parse(imgRes.data);
								if (data.code == '200') {
									let type = 'D0' + this.checkIndex;
									if (this[this.checkType + 'PositiveList'].some(v => v.imageType ==
											type)) {
										this[this.checkType + 'PositiveList'].map(val => {
											if (val.imageType == type) {
												val.imageId = data.data.id;
											}
										})
									} else {
										this[this.checkType + 'PositiveList'].push({
											imageId: data.data.id,
											imageType: type,
										})
									}
									uni.uploadFile({
										url: this.$base.baseUrl +
											'/order/identify/idCard',
										filePath: this.userbackImg,
										name: "image2",
										header: {
											Authorization: this.token,
										},
										success: (uploadFileRes) => {
											let data1 = JSON.parse(uploadFileRes.data).data;
											let identifyValidDate = '';
											if (!!data1.customerInfo
												.identifyValidDate) {
												identifyValidDate = data1
													.customerInfo
													.identifyValidDate
													.substr(0, 4) +
													'-' + data1
													.customerInfo
													.identifyValidDate
													.substr(4, 2) + '-' +
													data1
													.customerInfo
													.identifyValidDate
													.substr(6,
														2)
											}
											let identifyValidEndDate = '';
											if (!!data1.customerInfo
												.identifyValidEndDate) {
												identifyValidEndDate =
													data1.customerInfo
													.identifyValidEndDate
													.substr(0,
														4) + '-' + data1
													.customerInfo
													.identifyValidEndDate
													.substr(4, 2) + '-' +
													data1
													.customerInfo
													.identifyValidEndDate
													.substr(6, 2)
											}
											this.userback = {
												identifyValidDate: identifyValidDate, //起期
												identifyValidEndDate: identifyValidEndDate, //止期
											}
											this.lodingshow = false;
										}
									});

								}

							}
						});
					} else {
						this.lodingshow = false;
					}
				}
			},
			CarOCRconfirm() {
				switch (this.checkType) {
					case 'carInfo':
						Object.assign(this.carInfo, this.carfront, this
							.carback);
						this.ImageOcrShow = false;
						break;
					case 'ownerInfo':
					case "policyHolderInfo":
					case "insuredPersonInfo":
						Object.assign(this[this.checkType], this.userfront, this
							.userback);
						this.ImageOcrShow = false;
						break;
					default:
						break;
				}
			},
			//图片删除
			del_btn(val) {
				this[val] = "";
			},
			//弹框关闭事件
			ImagePopClose() {
				this.carfrontImg = "";
				this.carbackImg = "";
				this.userfrontImg = "";
				this.userbackImg = "";
				this.carfront = {};
				this.carback = {};
				this.userfront = {};
				this.userback = {};

			},
			/**
			 * 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
			 * @param {String} name 字段名称
			 * @param {String} value 表单域的值
			 */
			binddata(name, value, type) {
				if (name == 'identifyNumber') {
					this[type].age = getAgeByIdCard(value)
				}
			},
			//转变大写(车型/车架号/发动机号)
			upperCaseType(type) {
				this.carInfo[type] = this.carInfo[type].toUpperCase();
				if (type == 'vinNo') {
					this.carInfo.frameNo = this.carInfo.vinNo.trim();
				}
			},
			//下拉改变触发该方法
			bindPickerChange(e, type, list) {
				this[type + 'Index'] = e.target.value;
				this.carInfo[type] = this[list][e.target.value].dictValue;
			},
			// 身份证类型选择
			bindIdentifyTypeChange(e, type) {
				this[type + 'IdentifyIndex'] = e.target.value;
				this[type + 'Info'].identifyType = this.identifyList[e.target.value].id;
				this[type + 'Info'].identifyNumber = '';
			},
			//性别匹配
			bindGenderChange(e, type) {
				this[type + 'GenderIndex'] = e.target.value;
				this[type + 'Info'].gender = this.genderList[e.target.value].label;
			},
			bindDateChange(e, type) { //日期赋值
				if ((type == 'issueDate') && (!this.carInfo.registerDate)) {
					return uni.showToast({
						title: '请先输入注册日期',
						icon: "none"
					});
				}
				this.carInfo[type] = e.detail.value;
				if (new Date(this.carInfo.registerDate) > new Date(this.carInfo.issueDate)) {
					this.carInfo.issueDate = ""
					return uni.showToast({
						title: '注册日期大于发证日期',
						icon: "none"
					});
				}
			},
			//长期
			insureLongterm(checked, e) {
				checked.detail.value == true ? this[e].identifyValidEndDate = "9999-12-31" : this[e]
					.identifyValidEndDate =
					"";
			},
			//日期（可以选择20年以内的时间）
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 20;
				} else if (type === 'end') {}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//同车主信息
			syncPersonInfo(e, type, touch1, touch2, touch3) {
				this[type] = e.detail.value;
				this[touch1 + 'IdentifyIndex'] = this[touch2 + 'IdentifyIndex'];
				if (this[type]) {
					this[touch1 + 'Info'] = JSON.parse(JSON.stringify(this[touch2 + 'Info']));
					this[touch3] = false;
				} else {
					for (let key in this[touch1 + "Info"]) {
						this[touch1 + "Info"][key] = '';
					}
				}
			},
			//跳转选择车辆类型页面
			toChooseVehicleType(cctype) {
				if (cctype == '' || cctype == null) {
					uni.showToast({
						icon: 'none',
						title: '请输入车型名称',
						duration: 1500
					});
				} else {
					let cctypeName = cctype.replace(/[^u4e00-u9fa5|,]+/ig, '')
					this.navigate({
						url: '/pages/carInsure1/carType1?modelName=' + encodeURIComponent(cctypeName)
					}, "navigateTo", true);
				}
			},
			// 通过车架号获取车型
			async toChooseVin(cctype) {
				if (cctype == '' || cctype == null) {
					return uni.showToast({
						icon: 'none',
						title: '请输入车架号',
						duration: 1500
					});
				} else {
					if (!this.isFrameno(cctype.trim())) {
						return uni.showToast({
							title: '请输入正确的车辆识别码',
							icon: "none"
						});
					}
					this.navigate({
						url: '/pages/carInsure1/carType1?frameNo=' + encodeURIComponent(cctype)
					}, "navigateTo", true);
				}
			},
			//验证车架号
			isFrameno(str) {
				let mPattern = /^([0-9A-Z]){17}$/;
				return mPattern.test(str);
			},
			toNext() {
				if (this.holderAndOwner) { //投保人同车主
					this.policyHolderInfo = this.ownerInfo;
					if (this.ownerInfoPositiveList.length > 0) {
						this.policyHolderInfoPositiveList = JSON.parse(JSON.stringify(this
							.ownerInfoPositiveList));
						if (this.policyHolderInfoPositiveList.length == 1) {
							this.policyHolderInfoPositiveList[0].imageType = "C03";
						} else {
							this.policyHolderInfoPositiveList[0].imageType = "C03";
							this.policyHolderInfoPositiveList[1].imageType = "D03";
						}
					}
				}
				if (this.insuredAndOwner) { //被保人同车主
					this.insuredPersonInfo = this.ownerInfo;
					if (this.ownerInfoPositiveList.length > 0) {
						this.insuredPersonInfoPositiveList = JSON.parse(JSON.stringify(this
							.ownerInfoPositiveList));
						if (this.insuredPersonInfoPositiveList.length == 1) {
							this.insuredPersonInfoPositiveList[0].imageType = "C04";
						} else {
							this.insuredPersonInfoPositiveList[0].imageType = "C04";
							this.insuredPersonInfoPositiveList[1].imageType = "D04";
						}
					}
				}
				if (this.tbrAndOwner) { //被保人同投保人
					this.insuredPersonInfo = this.policyHolderInfo;
					if (this.policyHolderInfoPositiveList.length > 0) {
						this.insuredPersonInfoPositiveList = JSON.parse(JSON.stringify(this
							.policyHolderInfoPositiveList));
						if (this.insuredPersonInfoPositiveList.length == 1) {
							this.insuredPersonInfoPositiveList[0].imageType = "C04";
						} else {
							this.insuredPersonInfoPositiveList[0].imageType = "C04";
							this.insuredPersonInfoPositiveList[1].imageType = "D04";
						}
					}
				}
				this.$refs.carForm.submit().then(res => {
					this.$refs.ownerForm.submit().then(res1 => {
						this.$refs.policyHolderForm.submit().then(res2 => {
							this.$refs.insuredPersonForm.submit().then(res3 => {
								this.navigate({
									url: '/pages/carInsure1/insureItems1',
									success: (res) => {
										res.eventChannel.emit(
											"acceptData", {
												carInfo: this
													.carInfo,
												ownerInfo: this
													.ownerInfo,
												policyHolderInfo: this
													.policyHolderInfo,
												insuredPersonInfo: this
													.insuredPersonInfo,
												riskList: this
													.riskList,
												kindList: this
													.kindList,
												carInfoPositiveList: this
													.carInfoPositiveList, //车辆
												ownerInfoPositiveList: this
													.ownerInfoPositiveList, //车主
												policyHolderInfoPositiveList: this
													.policyHolderInfoPositiveList, //投保人
												insuredPersonInfoPositiveList: this
													.insuredPersonInfoPositiveList, //被保人
											})
									}
								}, "navigateTo", true);
							})
						})
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	/deep/ .uni-group__content {
		padding-top: 0;
	}

	/deep/ .uni-forms--top {
		padding: 0;
	}

	/deep/ .uni-forms-item {
		margin-bottom: 0;
	}

	/deep/ .uni-input-input {
		font-size: 26upx;
	}

	/deep/ .uni-switch-input-checked {
		background-color: $themeColor !important;
		border-color: $themeColor !important;
	}

	/deep/ .uni-group__content {
		padding-bottom: 0;
	}

	/deep/ .uni-input-input {
		font-size: 28upx;
	}

	.body {
		width: 100vw;
		/* min-height: 100vh; */
		background: #f5f5f5;
		/* background: #FFFFFF; */
		font-family: "Arial,Helvetica,sans-serif,PingFangSC";
	}

	.title {
		height: 90upx;
		border-bottom: 1px solid #EEEEEE;
	}

	.checkButton {
		margin: 0 20upx;
		width: 100upx;
		height: 50upx;
		flex-shrink: 1;
		background: rgba($themeColor, 0.6);
		color: #FFFFFF;
		border-radius: 5upx;
	}

	.textColor {
		color: #6091f5;
	}

	textarea {
		font-size: 28upx;
		width: 330upx;
	}

	/* 底部的样式Start */
	.infoBottom {
		height: 140upx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #FFFFFF;
		border-top: 1upx solid #EEEEEE;
		z-index: 99;
	}

	.infoBottom>button {
		// font-size: 30upx;
		background: $themeColor;
		color: #FFFFFF;
		flex: 1;
		margin: 0upx 30upx;
	}

	/* 底部的样式End */
	.popContent {
		height: 100%;
		background-color: #f9f9f9;

		.popHeader {
			width: 100%;
			text-align: center;
			padding: 10px;
			font-weight: bold;
			background-color: #FFFFFF;
		}

		.imgOcr {
			width: 100%;
			background-color: #f9f9f9;

			.imgOcr-border {
				position: relative;
				width: 49%;
				background-color: #fff;
				padding: 2px;

				.del_btn {
					cursor: pointer;
					position: absolute;
					top: 5rpx;
					right: 0;
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					z-index: 20;
				}

				.obverseimg {
					height: 120px;
					border-radius: 4px;
				}
			}

		}

		.line {
			width: 100%;
			margin: 2px 0;
			background-color: #FFFFFF;
			padding: 0 10px;

			>text {
				font-weight: bold;
				width: 100px;
			}
		}

		.popFooter {
			width: 100%;
			height: 50px;
			font-weight: bold;
			background-color: #FFFFFF;
			color: #3e5cd7;

			.popFooter-btn:nth-child(1) {
				border-right: 1px solid #f9f9f9;
			}

			.popFooter-btn {
				width: 50%;
				text-align: center;
				line-height: 50px;
			}
		}
	}

	.mask {
		/* pointer-events: none; */
		position: fixed;
		z-index: 99999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.mask.mask-show {
		background: rgba(255, 255, 255, 0.3);
	}

	.title {
		color: #333;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.loader {
		display: block;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 3rpx solid transparent;
		border-top-color: #9370db;
		-webkit-animation: spin 2s linear infinite;
		animation: spin 2s linear infinite;
	}

	.loader::before {
		content: "";
		position: absolute;
		top: 5rpx;
		left: 5rpx;
		right: 5rpx;
		bottom: 5rpx;
		border-radius: 50%;
		border: 3rpx solid transparent;
		border-top-color: #ba55d3;
		-webkit-animation: spin 3s linear infinite;
		animation: spin 3s linear infinite;
	}

	.loader::after {
		content: "";
		position: absolute;
		top: 15rpx;
		left: 15rpx;
		right: 15rpx;
		bottom: 15rpx;
		border-radius: 50%;
		border: 3rpx solid transparent;
		border-top-color: #ff00ff;
		-webkit-animation: spin 1.5s linear infinite;
		animation: spin 1.5s linear infinite;
	}

	@-webkit-keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
</style>