<template>
	<div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
		<div class="filter-container" ref="filter-container">
			<el-form
				:rules="rules4Query"
				ref="queryForm"
				:inline="inline"
				:model="listQuery"
				label-width="100px"
			>
				<el-row>
					<el-form-item label="车牌">
						<el-input v-model="listQuery.numberPlate" placeholder="请输入车牌"></el-input>
					</el-form-item>
					<el-form-item label="车辆编码">
						<el-input type="number" v-model.number="listQuery.code" placeholder="请输入车辆编码"></el-input>
					</el-form-item>
					<el-form-item label="车辆状态">
						<el-select class="filter-item" v-model="listQuery.status" placeholder="请选择车辆状态">
							<el-option :key="undefined" label="全部" :value="undefined"></el-option>
							<el-option
								v-for="(val,index) in getAllVehicleStatus() "
								:key="index"
								:label="val.val"
								:value="val.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="分公司" prop="subordinateBranch">
						<el-autocomplete
							class="inline-input"
							v-model="state1"
							:fetch-suggestions="querySearch"
							placeholder="请输入分公司"
							@select="handleSelect"
						></el-autocomplete>
					</el-form-item>
					<el-form-item label="区域" prop="zoneId">
						<el-select
							class="filter-item"
							v-model="listQuery.zoneId"
							placeholder="请选择"
						>
							<el-option v-for="val in getAllZoneList" :key="val.id" :label="val.name" :value="val.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="省份" prop="addrProvince">
						<el-autocomplete
							class="inline-input"
							v-model="listQuery.addrProvinceName"
							:fetch-suggestions="querySearchProvinceName"
							placeholder="请输入省份（直辖市）"
							@select="handleSelectProvince"
						></el-autocomplete>
					</el-form-item>
					<el-form-item label="城市" prop="addrCity">
						<el-autocomplete
							class="inline-input"
							v-model="listQuery.addrCityName"
							:fetch-suggestions="querySearchCityName"
							placeholder="请输入城市"
							@select="handleSelectCity"
						></el-autocomplete>
					</el-form-item>
					<el-form-item label="车型" prop="modelId">
						<el-autocomplete
							class="inline-input"
							v-model="vehicleArr"
							:fetch-suggestions="queryVehicleModelSearch"
							placeholder="请选择车型"
							@select="handleVehicleModelSelect"
						></el-autocomplete>
					</el-form-item>
				</el-row>
				<el-button
					class="filter-item"
					type="primary"
					:icon=" showMoreQueryFilter ? 'caret-top' : 'caret-bottom' "
					v-waves
					@click="showMoreQueryFilter=!showMoreQueryFilter"
				>更多条件</el-button>

				<transition name="fade">
					<div v-if="showMoreQueryFilter">
						<el-row>
							<el-col :span="8">
								<el-form-item label="车架号" prop="vin">
									<el-input v-model="listQuery.vin" placeholder="请输入车架号"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="托管人" prop="belongToName">
									<el-input v-model="listQuery.belongToName" placeholder="请输入姓名"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="保险公司" prop="insuranceCompany">
									<el-select class="filter-item" v-model="listQuery.insuranceCompany" placeholder="请选择保险公司">
										<el-option :key="undefined" label="全部" :value="undefined"></el-option>
										<el-option
											v-for="(val, index )  in getAllInsuranceCompany() "
											:key="index"
											:label="val.val"
											:value="val.code"
										></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="用途">
									<el-select class="filter-item" v-model="listQuery.useType" placeholder="请选择用途">
										<el-option :key="undefined" label="全部" :value="undefined"></el-option>
										<el-option
											v-for="(val,index) in getAllUseType() "
											:key="index"
											:label="val.val"
											:value="val.code"
										></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="保养日期" prop="mRange">
									<el-date-picker
										v-model="listQuery.mRange"
										type="daterange"
										:editable="true"
										format="yyyy-MM-dd"
										placeholder="请输入保养日期范围"
									></el-date-picker>
								</el-form-item>
							</el-col>
							<!--  <el-col :span="8">
                  <el-form-item label="保险结束日期" prop="insuranceDateRange">
                    <el-date-picker
                      v-model="listQuery.insuranceDateRange"
                      type="daterange"
                      :editable="true"
                      format="yyyy-MM-dd"
                      placeholder="请输入保险结束日期范围">
                    </el-date-picker>
                  </el-form-item>
							</el-col>-->
						</el-row>

						<el-row>
							<!--<el-col :span="8">
                <el-form-item label="年审日期" prop="aVRange">
                  <el-date-picker
                    v-model="listQuery.aVRange"
                    type="daterange"
                    :editable="true"
                    format="yyyy-MM-dd"
                    placeholder="请输入年审日期范围">
                  </el-date-picker>
                </el-form-item>
							</el-col>-->
						</el-row>
					</div>
				</transition>
			</el-form>
			<el-button
				class="filter-item"
				type="primary"
				v-waves
				icon="search"
				@click="handleFilter('search')"
			>搜索</el-button>
			<el-button
				class="filter-item"
				v-if="vehicleInfo_btn_add"
				style="margin-left: 10px;"
				@click="handleCreate"
				type="primary"
				icon="edit"
			>添加</el-button>
			<el-button
				class="filter-item"
				type="primary"
				:icon=" showMoreMoreCol ? 'caret-left' : 'caret-right' "
				v-waves
				@click="showMoreMoreCol=!showMoreMoreCol"
			>更多列</el-button>
			<el-button class="filter-item" type="primary" v-waves @click="reloadPage">重置</el-button>
			<el-button
				class="filter-item"
				type="primary"
				v-waves
				@click="handleFilter('download')"
			>下载车辆信息Excel表</el-button>
		</div>

		<el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%">
			<!--<el-table-column align="center" label="序号" width="65">-->
			<!--<template scope="scope">-->
			<!--<span>{{scope.row.code}}</span>-->
			<!--</template>-->
			<!--</el-table-column>-->
			<el-table-column type="index" align="center" label="序号" width="65"></el-table-column>
			<el-table-column width="200" align="center" label="车辆编码">
				<template scope="scope">
					<span>{{scope.row.code}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200" align="center" label="车牌">
				<template scope="scope">
					<span>{{scope.row.numberPlate}}</span>
				</template>
			</el-table-column>

			<el-table-column width="200" align="center" label="车辆状态">
				<template scope="scope">
					<span>{{getVehicleStatus(scope.row.status)}}</span>
				</template>
			</el-table-column>

			<el-table-column width="200" align="center" label="车辆品牌">
				<template scope="scope">
					<span>{{getBrand(scope.row.brand)}}</span>
				</template>
			</el-table-column>

			<el-table-column width="200" align="center" label="停靠分公司">
				<template scope="scope">
					<span>{{scope.row.parkBranchCompanyName}}</span>
				</template>
			</el-table-column>

			<!-- <el-table-column width="180" align="center" label="目的地分公司">
        <template scope="scope">
          <span>{{scope.row.expectDestinationBranchCompanyName}}</span>
        </template>
			</el-table-column>-->

			<el-table-column width="100" align="center" label="用途">
				<template scope="scope">
					<span>{{getUseType(scope.row.useType)}}</span>
				</template>
			</el-table-column>
			<el-table-column width="120" align="center" label="托管人">
				<template scope="scope">
					<span>{{getBelongToNameStr(scope.row)}}</span>
				</template>
			</el-table-column>

			<!-- <el-table-column align="center" label="备注">
        <template scope="scope">
          <span>{{scope.row.remark}}</span>
        </template>
			</el-table-column>-->

			<el-table-column width="200" align="center" v-if="showMoreMoreCol" label="车架号">
				<template scope="scope">
					<span>{{scope.row.vin}}</span>
				</template>
			</el-table-column>

			<el-table-column width="150" align="center" v-if="showMoreMoreCol" label="保险公司">
				<template scope="scope">
					<span>{{getInsuranceCompany(scope.row.insuranceCompany)}}</span>
				</template>
			</el-table-column>

			<el-table-column width="150" align="center" v-if="showMoreMoreCol" label="保险单号">
				<template scope="scope">
					<span>{{scope.row.insuranceNo}}</span>
				</template>
			</el-table-column>

			<el-table-column width="150" align="center" v-if="showMoreMoreCol" label="保险开始时间">
				<template scope="scope">
					<span>{{scope.row.insuranceStartDate}}</span>
				</template>
			</el-table-column>

			<el-table-column width="180" align="center" v-if="showMoreMoreCol" label="保险结束时间">
				<template scope="scope">
					<span>{{scope.row.insuranceEndDate}}</span>
				</template>
			</el-table-column>

			<el-table-column width="180" align="center" v-if="showMoreMoreCol" label="年审时间">
				<template scope="scope">
					<span>{{scope.row.annualVerificationDate}}</span>
				</template>
			</el-table-column>

			<el-table-column width="180" align="center" v-if="showMoreMoreCol" label="保养时间">
				<template scope="scope">
					<span>{{scope.row.maintenanceDate}}</span>
				</template>
			</el-table-column>

			<el-table-column width="100" align="center" v-if="showMoreMoreCol" label="保养里程数">
				<template scope="scope">
					<span>{{scope.row.maintenanceMileage}}</span>
				</template>
			</el-table-column>
			<el-table-column width="100" align="center" v-if="showMoreMoreCol" label="最后里程数">
				<template scope="scope">
					<span>{{scope.row.mileage}}</span>
				</template>
			</el-table-column>

			<el-table-column width="80" align="center" v-if="showMoreMoreCol" label="行驶证">
				<template scope="scope">
					<el-button
						v-if="$utils.isString(scope.row.drivingLicensePath) && !$utils.isEmpty(scope.row.drivingLicensePath)"
						size="small"
						type="success"
						@click="showImgDialog(scope.row.drivingLicensePath)"
					>查看</el-button>
				</template>
			</el-table-column>

			<el-table-column width="130" align="center" v-if="showMoreMoreCol" label="发动机号">
				<template scope="scope">
					<span>{{scope.row.engineNum}}</span>
				</template>
			</el-table-column>

			<el-table-column width="120" align="center" v-if="showMoreMoreCol" label="收车日期">
				<template scope="scope">
					<span>{{scope.row.receiveTime}}</span>
				</template>
			</el-table-column>

			<el-table-column width="120" align="center" v-if="showMoreMoreCol" label="生产商">
				<template scope="scope">
					<span>{{scope.row.manufacturer}}</span>
				</template>
			</el-table-column>

			<el-table-column width="180" align="center" v-if="showMoreMoreCol" label="最后更新时间">
				<template scope="scope">
					<span>{{scope.row.updateTime?scope.row.updateTime:scope.row.createTime}}</span>
				</template>
			</el-table-column>

			<el-table-column align="center" label="操作" width="280" fixed="right">
				<template scope="scope">
					<el-button
						size="small"
						class="el-button el-button--text el-button--small"
						@click="handleUpdate(scope.row)"
					>{{vehicleInfo_btn_edit?"编辑":"查看"}}</el-button>
					<!-- <el-button v-if="scope.row.status == 1&&vehicleInfo_btn_ride" size="small" class="el-button el-button--text el-button--small" @click="departureHandler(scope.row)">出车
					</el-button>-->
					<!-- <el-button v-if="scope.row.status == 4" size="small" class="el-button el-button--text el-button--small" @click="arrivalHandler(scope.row)">收车
					</el-button>-->

					<!-- <el-button v-if="scope.row.status == 1" size="small" class="el-button el-button--text el-button--small" @click="upkeepHandler(scope.row)">保养
          </el-button>
          <el-button v-if="scope.row.status == 5" size="small" class="el-button el-button--text el-button--small" @click="upkeepEndHandler(scope.row)">
            保养结束
					</el-button>-->

					<el-button
						v-if="vehicleInfo_btn_apply && checkIfRuning(scope.row) "
						size="small"
						class="el-button el-button--text el-button--small"
						@click="handleApply(scope.row)"
					>申请预订</el-button>
					<!--   <el-button size="small" class="el-button el-button&#45;&#45;text el-button&#45;&#45;small" @click="handleBookInfo(scope.row)">
               预订信息
					</el-button>-->
					<el-button
						size="small"
						class="el-button el-button--text el-button--small"
						@click="handleBookRecord(scope.row)"
					>排班记录</el-button>
					<el-button
						size="small"
						class="el-button el-button--text el-button--small"
						@click="handleDepartureLog(scope.row)"
					>出行记录</el-button>
					<el-button
						size="small"
						@click="deleteHandler(scope.row)"
						class="el-button el-button--text el-button--small"
						style="color:red;"
						v-if="vehicleInfo_btn_ret"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page.sync="listQuery.page"
			:page-sizes="[10,20,30, 50]"
			:page-size="listQuery.limit"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
		></el-pagination>

		<!-- 对话框相关html元素  -->
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" @close="closePop">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px">
				<p style="border-bottom:1px solid #bfcbd9;padding-bottom:10px">基础信息</p>
				<el-row>
					<el-col :span="12">
						<el-form-item label="车辆编码" prop="code">
							<el-input v-model.number="form.code" placeholder="请输入车辆编码" type="number"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="车牌" prop="numberPlate">
							<el-input v-model="form.numberPlate" placeholder="输入车牌"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="车架号" prop="vin">
							<el-input v-model="form.vin" placeholder="请输入车架号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="发动机号" prop="engineNum">
							<el-input v-model="form.engineNum" placeholder="请输入发动机号"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="所属人">
							<el-select v-model.number="form.belongTo" placeholder="请选择所属人" style="width:100%">
								<el-option
									v-for="(val,index) in getAllBelong2Type() "
									:key="index"
									:label="val.val"
									:value="val.code"
								></el-option>
							</el-select>
							<el-input
								v-if="typeof(form.belongTo) !== 'undefined' && form.belongTo != 1"
								v-model="form.belongToName"
								placeholder="请输入名称"
								style="margin-top:10px"
							></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="车辆状态" prop="status">
							<el-select
								class="filter-item"
								v-model="form.status"
								placeholder="请选择车辆状态"
								style="width:100%"
							>
								<el-option
									v-for="(val,index) in getAllVehicleStatus() "
									:key="index"
									:label="val.val"
									:value="val.code"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="车辆品牌" prop="brand">
							<el-select class="filter-item" v-model="form.brand" placeholder="请选择车辆品牌" style="width:100%">
								<el-option :key="getUnkownBrandCode" label="未知" :value="getUnkownBrandCode"></el-option>
								<el-option
									v-for="item  in getAllBranch() "
									:key="item.code"
									:label="item.val"
									:value="item.code"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<!--<el-form-item label="车型">
							<el-select v-model="form.modelId" filterable placeholder="请选择">
								<el-option
								v-for="item in allVehicleList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>-->
						<el-form-item label="车型" prop="vehicleModelName">
							<el-autocomplete
								class="inline-input"
								v-model="form.vehicleModelName"
								:fetch-suggestions="queryVehicleModelSearch"
								placeholder="请输入内容"
								@select="handleVehicleModelSelectSubordinate"
								style="width:100%"
							></el-autocomplete>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="生产商" prop="manufacturer">
							<el-input v-model="form.manufacturer" placeholder="请输入生产商"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="年审日期" prop="manufacturer">
							<el-date-picker
								v-model="form.annualVerificationDate"
								type="date"
								placeholder="选择日期"
								style="width:100%"
							></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>

				<p style="border-bottom:1px solid #bfcbd9;padding-bottom:10px">用途、位置及里程</p>

				<el-row>
					<el-col :span="12">
						<el-form-item label="所属分公司" prop="subordinateBranchName">
							<el-autocomplete
								class="inline-input"
								v-model="form.subordinateBranchName"
								:fetch-suggestions="querySearch"
								placeholder="请输入内容"
								@select="handleSelectSubordinate"
								style="width:100%"
							></el-autocomplete>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<!--<el-form-item label="停靠分公司" v-if="dialogStatus=='update'" prop="parkBranchCompanyName">-->
						<!--<el-input  v-model="form.parkBranchCompanyName" placeholder="停靠分公司" readonly disabled></el-input>-->
						<!--</el-form-item>-->
						<!--v-else-if="dialogStatus=='create'"-->
						<el-form-item label="停靠分公司" prop="parkBranchCompanyName">
							<el-autocomplete
								class="inline-input"
								v-model="form.parkBranchCompanyName"
								:fetch-suggestions="querySearch"
								placeholder="请输入内容"
								@select="handleSelectPark"
								style="width:100%"
							></el-autocomplete>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<!--<el-col :span="12">-->
					<!--<el-form-item label="目的地分公司" prop="expectDestinationBranchCompanyName">-->
					<!--<el-autocomplete-->
					<!--class="inline-input"-->
					<!--v-model="form.expectDestinationBranchCompanyName"-->
					<!--:fetch-suggestions="querySearch"-->
					<!--placeholder="请输入内容"-->
					<!--@select="handleSelectExport"-->
					<!--&gt;</el-autocomplete>-->
					<!--</el-form-item>-->
					<!--</el-col>-->
					<el-col :span="12">
						<el-form-item label="用途" prop="useType">
							<el-select class="filter-item" v-model="form.useType" placeholder="请选择用途" style="width:100%">
								<el-option :key="undefined" label="无" :value="undefined"></el-option>
								<el-option
									v-for="item  in getAllUseType() "
									:key="item.code"
									:label="item.val"
									:value="item.code"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="公里数" prop="mileageLastUpdate">
							<el-input v-model="form.mileageLastUpdate" placeholder="请输入公里数"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<p style="border-bottom:1px solid #bfcbd9;padding-bottom:10px">车辆追踪设备</p>

				<el-row>
					<el-col :span="12">
						<el-form-item label="终端号" prop="terminalNumber">
							<el-input v-model="form.terminalNumber" placeholder="请输入终端号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="SIM卡号" prop="simNumber">
							<el-input v-model="form.simNumber" placeholder="请输入SIM卡号"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="通讯类型" prop="CommunicationType">
							<el-select
								class="filter-item"
								v-model="form.communicationType"
								placeholder="请选择通讯类型"
								style="width:100%"
							>
								<el-option :key="undefined" label="无" :value="undefined"></el-option>
<!--								<el-option-->
<!--									v-for="item in getAllUseType() "-->
<!--									:key="item.code"-->
<!--									:label="item.val"-->
<!--									:value="item.code"-->
<!--								></el-option>-->
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<p style="border-bottom:1px solid #bfcbd9;padding-bottom:10px">保险信息</p>
				<el-row>
					<el-col :span="12">
						<el-form-item label="商业险公司" prop="insuranceCompany">
							<el-select
								class="filter-item"
								v-model="form.insuranceCompany"
								placeholder="请选择商业险公司"
								style="width:100%"
							>
								<el-option :key="undefined" label="无" :value="undefined"></el-option>
								<el-option
									v-for="(val, index) in getAllInsuranceCompany() "
									:key="index"
									:label="val.val"
									:value="val.code"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="商业险单号" prop="insuranceNo">
							<el-input v-model="form.insuranceNo" placeholder="请输入商业险单号"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="商业险日期" prop="insuranceEndDate">
							<el-date-picker
								v-model="form.insuranceEndDate"
								type="date"
								:editable="true"
								format="yyyy-MM-dd"
								placeholder="请选择商业险到期时间"
								style="width:100%"
							></el-date-picker>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="交强险公司" prop="strongInsuranceCompany">
							<el-select
								class="filter-item"
								v-model="form.strongInsuranceCompany"
								placeholder="请选择交强险公司"
								style="width:100%"
							>
								<el-option :key="undefined" label="无" :value="undefined"></el-option>
								<el-option
									v-for="(val, index) in getAllInsuranceCompany() "
									:key="index"
									:label="val.val"
									:value="val.code"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="交强险单号" prop="strongInsuranceNo">
							<el-input v-model.text="form.strongInsuranceNo" placeholder="请输入交强险单号"></el-input>

						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="交强险日期" prop="strongInsuranceEndDate">
							<el-date-picker
								v-model="form.strongInsuranceEndDate"
								type="date"
								:editable="true"
								format="yyyy-MM-dd"
								placeholder="请选择交强险到期时间"
								style="width:100%"
							></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<!--<el-col :span="12">-->
					<!--<el-form-item label="收车时间" prop="receiveTime">-->
					<!--<el-date-picker-->
					<!--v-model="form.receiveTime"-->
					<!--type="date"-->
					<!--:editable="true"-->
					<!--format="yyyy-MM-dd HH:mm:dd"-->
					<!--placeholder="请选择收车时间"-->
					<!--&gt;</el-date-picker>-->
					<!--</el-form-item>-->
					<!--</el-col>-->
				</el-row>
				<p style="border-bottom:1px solid #bfcbd9;padding-bottom:10px">其他</p>

				<el-row>
					<el-col :span="24">
						<el-form-item label="行驶证" prop="drivingLicensePath" :style="{display:'block'}">
							<el-upload
								class="avatar-uploader"
								:action="BASE_API + '/api/universal/file/app/unauth/admin/upload'"
								:show-file-list="false"
								:headers="getHeaderWithToken"
								:on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload"
								:style="{display:'inline-block'}"
							>
								<img
									v-if="$utils.isString(form.drivingLicensePath) && !$utils.isEmpty(form.drivingLicensePath)"
									:src="getDrivingLicenseUrl(form.drivingLicensePath)"
									class="avatar"
									:style="{display:'block'}"
								/>
								<i
									v-else
									class="el-icon-plus avatar-uploader-icon"
									:style="{lineHeight:'350px'}"
									style="position: relative;"
								>
									<br />
									<span class="driving-title">行驶证正面</span>
								</i>
							</el-upload>

							<el-upload
								class="avatar-uploader"
								:action="BASE_API + '/api/universal/file/app/unauth/admin/upload'"
								:show-file-list="false"
								:headers="getHeaderWithToken"
								:on-success="handleAvatarSuccessF"
								:before-upload="beforeAvatarUpload"
								:style="{display:'inline-block'}"
							>
								<img
									v-if="$utils.isString(form.drivingLicenseDuplicatePath) && !$utils.isEmpty(form.drivingLicenseDuplicatePath)"
									:src="getDrivingLicenseUrl(form.drivingLicenseDuplicatePath)"
									class="avatar"
									:style="{display:'block'}"
								/>
								<i
									v-else
									class="el-icon-plus avatar-uploader-icon"
									:style="{lineHeight:'350px'}"
									style="position: relative;"
								>
									<br />
									<span class="driving-title">行驶证副本</span>
								</i>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col>
						<el-form-item label="保单pdf" prop="insurancePDF" :style="{display:'block'}">
							 <el-upload
									ref="uploadPdf"
									:action="BASE_API + '/api/universal/file/app/unauth/admin/upload'"
									:show-file-list="false"
									:headers="getHeaderWithToken"
									:on-success="handleAvatarSuccessPDF"
									:style="{display:'inline-block'}"
									accept=".pdf"
									>
									<el-button size="small" plain>选择文件</el-button>
								  </el-upload>
								  <div  v-for="(item, i) in pdfList" :key = i @click="downloadPDF(i)">
									 <span>{{item.name}}</span> 
								  </div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" :rows="5" v-model="form.remark" placeholder="请输入备注信息"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel('form')">取消</el-button>
				<el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确定</el-button>
				<el-button
					type="primary"
					@click="update('form')"
					v-if="dialogStatus=='update'&&vehicleInfo_btn_edit"
				>确 定</el-button>
			</div>
		</el-dialog>

		<!--申请对话框相关html元素  -->
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogForm4ApplyVisible">
			<el-form :model="form4Apply" :rules="rules4Apply" ref="form4Apply" label-width="120px">
				<el-form-item label="预订日期范围" prop="bookDateRange4Apply">
					<el-date-picker
						v-model="bookDateRange4Apply"
						type="daterange"
						:editable="true"
						format="yyyy-MM-dd"
						placeholder="请输入预订日期范围"
						:picker-options="pickerOptions4Apply"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="提车分公司" prop="liftCompany">
					<el-autocomplete
						class="inline-input"
						v-model="form4Apply.state3"
						:fetch-suggestions="querySearch"
						placeholder="请输入内容"
						@select="handleSelect3"
						disabled
					></el-autocomplete>
				</el-form-item>
				<el-form-item label="还车分公司" prop="retCompany">
					<el-autocomplete
						class="inline-input"
						v-model="form4Apply.state4"
						:fetch-suggestions="querySearch"
						placeholder="请输入内容"
						@select="handleSelect4"
					></el-autocomplete>
				</el-form-item>
				<el-form-item label="使用人" prop="vehicleUsername">
					<el-input v-model="form4Apply.vehicleUsername" placeholder="请输入使用人"></el-input>
				</el-form-item>
				<el-form-item label="联系方式" prop="vehicleUserPhone">
					<el-input type="number" v-model="form4Apply.vehicleUserPhone" placeholder="请输入使用人联系方式"></el-input>
				</el-form-item>
				<el-form-item label="用途" prop="bookType">
					<el-select class="filter-item" v-model="form4Apply.bookType" placeholder="请选择用途">
						<el-option :key="undefined" label :value="undefined"></el-option>
						<el-option
							v-for="(val, index) in book_type_list "
							:key="index"
							:label="val.name"
							:value="val.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="保养项目" prop="upkeepIds" v-if="form4Apply.bookType==6">
					<el-checkbox-group v-model="form4Apply.upkeepIds">
						<el-checkbox v-for="item in allUpkeepItems" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="目的地" prop="destination">
					<el-input v-model="form4Apply.destination" placeholder="请输入目的地"></el-input>
				</el-form-item>
				<el-form-item
					label="随行物品"
					prop="selectedAccItem"
					v-if="form4Apply.bookType!=3&&form4Apply.bookType!=6&&form4Apply.bookType!=8&&form4Apply.bookType!=10"
				>
					<el-input
						type="textarea"
						v-model="getSelectedAccItemStr"
						:rows="5"
						icon="menu"
						@focus="handleAccItemSelect"
						clearable
						placeholder="请选择随行物品"
					></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="form4Apply.remark" placeholder="请输入备注信息"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel4Apply('form4Apply')">取 消</el-button>
				<el-button type="primary" @click="apply('form4Apply')">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="行驶证" :visible.sync="dialogForm4LicenceVisible">
			<img :style="{width:'100%'}" :src="licenceSrcUrl" />
		</el-dialog>

		<book-info-viewer ref="bookInfoViewer"></book-info-viewer>
		<acc-item-selector
			v-on:select="accItemSelected"
			:selectedAccItem="form4Apply.selectedAccItem"
			v-on:clear="accItemClear"
			ref="accItemSelector"
		></acc-item-selector>

		<!-- 收车信息弹窗 -->
		<el-dialog title="收车" :visible.sync="arrivalDialogVisible">
			<el-form :model="arrivalForm" :rules="rules" ref="form" label-width="90px">
				<el-form-item label="车牌号">
					<el-input v-model="arrivalForm.numberPlate" disabled></el-input>
				</el-form-item>
				<el-form-item label="出车时间" prop="arrivalDate">
					<el-date-picker
						v-model="arrivalForm.arrivalDate"
						type="date"
						disabled
						format="yyyy-MM-dd"
						placeholder="选择日期"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="收车人" prop="checkMan">
					<el-input v-model="arrivalForm.recycleMan" placeholder="请输入收车人"></el-input>
				</el-form-item>
				<el-form-item label="收车人联系方式" prop="checkManTel">
					<el-input v-model="arrivalForm.recycleManTel" placeholder="请输入收车人联系方式"></el-input>
				</el-form-item>
				<el-form-item label="公里数" prop="mileage">
					<el-input v-model="arrivalForm.mileage" placeholder="请输入收车时公里数"></el-input>
				</el-form-item>
				<el-form-item label="还车分公司" prop="arrivalBranchCompanyId">
					<el-autocomplete
						class="inline-input"
						v-model="arrivalForm.arrivalBranchCompanyName"
						:fetch-suggestions="querySearch"
						placeholder="请输入内容"
						@select="handleSelectArrivalCompanyName"
					></el-autocomplete>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelArrival">取 消</el-button>
				<el-button type="primary" @click="arrivalVehicleHandler">确 定</el-button>
			</div>
		</el-dialog>

		<!--出车弹框-->
		<departureDialog
			v-if="departureDialogVisible"
			:departureRow="departureRow"
			v-on:departureDialogEvent="departureDialogEvent"
		></departureDialog>
		<!-- 车辆保养弹窗 -->
		<upkeepDialog
			v-if="upkeepDialogVisible"
			:upkeepRow="upkeepRow"
			v-on:upkeepDialogEvent="upkeepDialogEvent"
		></upkeepDialog>
	</div>
</template>

<script>
import axios from 'axios'
import upkeepDialog from '../../modal/upkeepDialogVisible' // 保养弹框
import departureDialog from '../../modal/departureDialog' // 出车弹框
import 'static/css/uploadImg.css' // 引入图片上传组件对话框
import {
	page,
	addObj,
	getObj,
	book,
	getBookedInfoIn2Month,
	getBookedInfo,
	putObj,
	delObj,
	getSysRegionByIds,
	checkCode,
	downloadExcel,
	checkVin,
	checkEngineNum,
	getArea,
	exportExcel
} from '../../../api/vehicle/vehicleInfo/'

import {
	getAllVehicleModelList,
	getAllVehicleList
} from '../../../api/vehicleType'

import {
	getConstantByTypeAndCode,
	getConstantListByType,
	getAllInsuranceCompany,
	getInsuranceCompany
} from 'api/base_info/constant/'

import {
	departureVehicle,
	arrivalVehicle,
	upkeepVehicle,
	upkeepEndVehicle
} from 'api/vehicle/active'

import { getAllUpkeepItem, getUpkeepAll } from 'api/vehicle/upkeep'

import { getSonRegionByCodes, getRegionByCodes } from 'api/base_info/region/'

import {
	VEHICLE_CONSTANT_VEHICLE_BRAND,
	VEHICLE_CONSTANT_VEHICLE_USE,
	VEHICLE_CONSTANT_BRAND_CODE_UNKOWN,
	BELONG_TO_TYPE_OWN,
	VEHICLE_CONSTANT_USE_TYPE_UNKOWN,
	VEHICLE_CONSTANT_STATUS_NORMAL
} from '../../../store/modules/baseInfo'

import { getAllCompany, getAll } from 'api/base_info/branch_company/'

import { formatDate } from 'utils/dateFormattor'

import {
	toEast8Date,
	deepCopyDate,
	newEast8Date,
	convertDate2Str
} from 'utils/dateUtils'

import rsCode from '../../../utils/rsCode'

import { mapGetters } from 'vuex'
import { getToken } from 'utils/auth'

import bookInfoViewer from '../bookInfoViewer'
import accItemSelector from '../accompanyingItem/accItemSelector.vue'
import Element1 from '../../admin/menu/components/element'
import ElRow from 'element-ui/packages/row/src/row'
import ElCol from 'element-ui/packages/col/src/col'
import { getAllZone } from 'api/base_info/constant/'
import ElFormItem from '../../../../node_modules/element-ui/packages/form/src/form-item.vue'

export default {
	name: 'vehicleInfo',
	components: {
		ElFormItem,
		ElCol,
		ElRow,
		Element1,
		bookInfoViewer,
		accItemSelector,
		upkeepDialog,
		departureDialog
	},
	data() {
		return {
			upkeepRow: {}, //保养数据
			departureRow: {}, //出车数据
			state1: '',
			vehicleArr: '',
			BASE_API: process.env.BASE_API,
			dialogForm4LicenceVisible: false,
			licenceSrcUrl: undefined,
			showLoadingBody: false,
			allVehicleList: [], //全部车型
			pdfList:[],
			form: {
				insuranceEndDate: null, //商业险日期
				vehicleModelName: '', //车型
				subordinateBranchName: '', //所属分公司
				subordinateBranch: undefined,
				parkBranchCompanyName: '', //停靠分公司
				parkBranchCompanyId: undefined,
				modelId: undefined, //车型id
				status: undefined, //车辆状态
				code: undefined, //车辆编码
				numberPlate: undefined, //车牌
				brand: undefined, //车辆品牌
				useType: undefined, //用途
				vin: undefined, //车架号
				insuranceNo: undefined, //商业线单号
				insuranceCompany: undefined, //商业险公司
				insuranceDateRange4form: undefined,
				annualVerificationDate: undefined,
				maintenanceDate: undefined,
				belongTo: undefined, //所属人
				belongToName: undefined,
				engineNum: undefined, //发动机号
				manufacturer: undefined, //生产商
				mileageLastUpdate: undefined, //公里数
				//          receiveTime: undefined,
				drivingLicensePath: undefined,
				remark: undefined,
				terminalNumber: undefined, //终端号
				simNumber: undefined, //sim卡
				communicationType: undefined, //通讯类型
				strongInsuranceCompany: undefined,
				strongInsuranceEndDate: undefined,
				strongInsuranceNo: undefined,
				strongInsuranceCompany: undefined,
				insurancePDF:undefined
			},
			rules: {
				subordinateBranchName: [
					{
						required: true,
						message: '请选择所属分公司',
						trigger: 'change'
					}
				],
				vehicleModelName: [
					{
						required: true,
						message: '请选择车型',
						trigger: 'change'
					}
				],
				parkBranchCompanyName: [
					{
						required: true,
						message: '请选择停靠分公司',
						trigger: 'change'
					}
				],
				maintenanceMileage: [this.integerValidator()],
				code: [
					{
						validator: (rule, value, callback) => {
							if (
								this.$utils.isUndefined(value) ||
								this.$utils.isNull(value) ||
								this.$utils.isEmpty('' + value)
							) {
								return callback(new Error('请输入车辆编码'))
							}
							if (!this.$utils.isInteger(value)) {
								return callback(new Error('编码必须为整数'))
							}
							if (value < 1 || value > 9999999999) {
								return callback(
									new Error('编码合法范围：[1 - 9999999999]')
								)
							}
							//检验code码
							checkCode(value, this.form.id).then(response => {
								// console.log(response.data);
								if (response.data === true) {
									return callback(
										new Error(
											'该车辆编码已经被占用，请重新输入'
										)
									)
								} else {
									callback()
								}
							})
						},
						trigger: 'blur',
						required: true
					}
				],
				vin: [
					{
						validator: (rule, value, callback) => {
							//检验code码
							if (
								this.$utils.isUndefined(value) ||
								this.$utils.isNull(value) ||
								this.$utils.isEmpty('' + value)
							) {
								return callback(new Error('请输入车架号'))
							}
							if (value.length < 1 || value.length > 17) {
								return callback(
									new Error('车架号长度小于17 个字符')
								)
							}
							checkVin(value, this.form.id).then(response => {
								// console.log(response.data);
								if (response.data === true) {
									return callback(
										new Error(
											'该车架号已经被占用，请重新输入'
										)
									)
								} else {
									callback()
								}
							})
						},
						trigger: 'blur',
						required: true
					}
				],
				engineNum: [
					{
						validator: (rule, value, callback) => {
							//检验code码
							checkEngineNum(value, this.form.id).then(
								response => {
									// console.log(response.data);
									if (response.data === true) {
										return callback(
											new Error(
												'该发动机号已经被占用，请重新输入'
											)
										)
									} else {
										callback()
									}
								}
							)
						},
						trigger: 'blur'
					}
				],
				numberPlate: [
					{
						min: 0,
						max: 20,
						trigger: 'blur',
						message: '车牌不能为空且长度小于20个字符',
						required: true
					}
				],
				remark: [
					{
						min: 0,
						max: 2000,
						message: '长度小于 2000 个字符',
						trigger: 'blur'
					}
				]
			},
			book_type_list: [
				{
					name: '维修',
					id: 3
				},
				{
					name: '展览',
					id: 4
				},
				{
					name: '旅游',
					id: 5
				},
				{
					name: '保养',
					id: 6
				},
				{
					name: '禁用',
					id: 8
				},
				{
					name: '客户用车',
					id: 9
				},
				{
					name: '其他',
					id: 10
				}
			],
			form4Apply: {
				bookStartDate: undefined,
				bookEndDate: undefined,
				vehicle: undefined,
				liftAddr: undefined,
				state3: '',
				retCompany: undefined,
				state4: '',
				liftCompany: undefined,
				destination: undefined,
				selectedAccItem: undefined,
				remark: undefined,
				vehicleId: undefined,
				bookType: undefined,
				vehicleUsername: undefined,
				vehicleUserPhone: undefined,
				upkeepIds: []
			},
			pickerOptions4Apply: {
				disabledDate: this.checkBookDate
			},
			rules4Query: {
				vin: [
					{
						min: 0,
						max: 200,
						message: '长度小于 200 个字符',
						trigger: 'blur'
					}
				],
				subordinateBranch: [
					{
						validator: (rule, value, callback) => {
							if (
								(this.$utils.isString(
									this.listQuery.bookedStartDate
								) &&
									this.listQuery.bookedStartDate !== '') ||
								(this.$utils.isString(
									this.listQuery.bookedEndDate
								) &&
									this.listQuery.bookedEndDate !== '') ||
								(this.$utils.isString(
									this.listQuery.notBookedStartDate
								) &&
									this.listQuery.notBookedStartDate !== '') ||
								(this.$utils.isString(
									this.listQuery.notBookedEndDate
								) &&
									this.listQuery.notBookedEndDate !== '')
							) {
								if (!this.listQuery.subordinateBranch) {
									return callback(
										new Error(
											'若需按预定日期查询车辆，选择分公司'
										)
									)
								}
							}
							callback()
						},
						trigger: 'blur'
					}
				],
				notBookDateRange: [
					{
						validator: (rule, value, callback) => {
							if (this.notBookDateRange) {
								let startDate = toEast8Date(
									this.listQuery.notBookedStartDate
								)
								let endDate = toEast8Date(
									this.listQuery.notBookedEndDate
								)
								if (
									this.$utils.isDate(startDate) &&
									startDate.setMonth(
										startDate.getMonth() + 2
									) < endDate
								) {
									return callback(
										new Error('日期范围不能超过2个月')
									)
								}
							}
							callback()
						},
						trigger: 'blur'
					}
				],
				bookDateRange: [
					{
						validator: (rule, value, callback) => {
							if (this.bookDateRange) {
								let startDate = toEast8Date(
									this.listQuery.bookedStartDate
								)
								let endDate = toEast8Date(
									this.listQuery.bookedEndDate
								)
								if (
									this.$utils.isDate(startDate) &&
									startDate.setMonth(
										startDate.getMonth() + 2
									) < endDate
								) {
									return callback(
										new Error('日期范围不能超过2个月')
									)
								}
							}
							callback()
						},
						trigger: 'blur'
					}
				]
			},
			rules4Apply: {
				bookDateRange4Apply: [
					{
						validator: (rule, value, callback) => {
							if (
								!this.$utils.isArray(
									this.bookDateRange4Apply
								) ||
								this.bookDateRange4Apply.length === 0
							) {
								return callback(new Error('请输入预定时间。'))
							}
							let [
								oriStartDate,
								ortEndDate
							] = this.bookDateRange4Apply
							if (
								!this.$utils.isDate(oriStartDate) ||
								!this.$utils.isDate(ortEndDate)
							) {
								return callback(new Error('请输入预定时间。'))
							}
							let [startDate, endDate] = [
								deepCopyDate(oriStartDate),
								deepCopyDate(ortEndDate)
							]
							if (
								!this.$utils.isDate(oriStartDate) ||
								!this.$utils.isDate(ortEndDate)
							) {
								return callback()
							}
							for (
								let curDate = startDate;
								curDate <= endDate;
								curDate.setDate(curDate.getDate() + 1)
							) {
								if (this.checkBookDate(curDate)) {
									return callback(
										new Error(
											'请选择从今天起两个月内，未预定的时间。'
										)
									)
								}
							}
							callback()
						},
						required: true,
						trigger: 'blur'
					}
				],
				vehicleUsername: [
					{
						required: true,
						message: '请输入使用人',
						trigger: 'blur'
					}
				],
				vehicleUserPhone: [
					{
						required: true,
						message: '请输入使用人联系方式',
						trigger: 'blur'
					},
					{
						pattern: /^1[3456789]\d{9}$/,
						message: '请输入正确的手机号'
					}
				],
				bookType: [
					{
						required: true,
						message: '请选择用途'
					}
				],
				liftCompany: [
					{
						required: true,
						message: '请选择提车分公司',
						trigger: 'blur',
						type: 'integer'
					}
				],
				retCompany: [
					{
						required: true,
						message: '请选择还车分公司',
						trigger: 'blur',
						type: 'integer'
					}
				],
				destination: [
					{
						min: 0,
						max: 200,
						message: '长度小于 200 个字符',
						trigger: 'blur'
					}
				],
				remark: [
					{
						min: 0,
						max: 2000,
						message: '长度小于 2000 个字符',
						trigger: 'blur'
					}
				]
			},
			selectArry: [],
			selectVehicleModelArray: [],
			list: [],
			total: null,
			listLoading: true,
			listQuery: {
				page: 1,
				limit: 20,
				zoneId: undefined,
				addrProvince: undefined, //省份编号
				addrProvinceName: '', //省份名称
				addrCity: undefined, //城市编号
				addrCityName: '', //城市名称
				addrTown: undefined,
				vin: undefined,
				insuranceCompany: undefined,
				mileageRangeStart: undefined,
				mileageRangeEnd: undefined,
				insuranceDateRange: undefined,
				mRange: undefined,
				aVRange: undefined,
				subordinateBranch: undefined,
				numberPlate: undefined,
				status: undefined,
				bookedStartDate: undefined,
				bookedEndDate: undefined,
				notBookedStartDate: undefined,
				notBookedEndDate: undefined,
				code: undefined,
				modelId: undefined,
				belongToName: undefined,
				useType: undefined
			},
			showMoreQueryFilter: false,
			showMoreMoreCol: false,
			inline: true,
			dialogFormVisible: false,
			dialogForm4ApplyVisible: false,
			curBookedInfo3Month: undefined,
			curBookedInfo: undefined,
			dialogStatus: '',
			allCompanies: {},
			allCompaniesArr: [],
			textMap: {
				update: '编辑',
				create: '创建',
				apply: '预定申请'
			},
			tableKey: 0,
			departureDialogVisible: false, //出车弹框
			departureForm: {
				vehicleId: null,
				numberPlate: null,
				departureDate: null,
				departureBranchCompanyId: null,
				departureBranchCompanyName: '',
				use: null,
				user: null,
				userTel: null,
				checkMan: null,
				checkManTel: null,
				expectArrivalBranchCompanyId: null,
				expectArrivalBranchCompanyName: '',
				mileage: null
			},
			arrivalDialogVisible: false,
			arrivalForm: {
				vehicleId: null,
				numberPlate: null,
				arrivalDate: null,
				recycleMan: null,
				recycleManTel: null,
				mileage: null,
				arrivalBranchCompanyId: null,
				arrivalBranchCompanyName: ''
			},
			upkeepDialogVisible: false,
			allUpkeepItems: null,
			allZoneArr: [], //全部片区
			provinceRegions: [], //片区下省份数据
			cityList: [],
			vehicleInfo_btn_edit: false, //编辑
			vehicleInfo_btn_add: false, //新增
			vehicleInfo_btn_apply: false, //申请预定
			vehicleInfo_btn_ride: false, //出车
			vehicleInfo_btn_ret: false, //删除
			cityArr: [], //城市编码
			provinceArr: [] //省份编码
		}
	},
	created() {
		let t = this
		axios.get('../../static/city.json').then(response => {
			t.cityArr = response.data.RECORDS
		})
		axios.get('../../static/province.json').then(response => {
			t.provinceArr = response.data.RECORDS
		})
		getAll().then(response => {
			this.allCompaniesArr = response.data
			let query = localStorage.getItem('vehicleInfo')
			if (query != 'null' && query) {
				let queryJson = JSON.parse(query)
				if (queryJson.page) {
					t.listQuery.page = queryJson.page
				}
				if (queryJson.limit) {
					t.listQuery.limit = queryJson.limit
				}
				if (queryJson.addrCityName) {
					t.listQuery.addrCityName = queryJson.addrCityName
				}
				if (queryJson.addrProvinceName) {
					t.listQuery.addrProvinceName = queryJson.addrProvinceName
				}
				if (queryJson.addrCity) {
					t.listQuery.addrCity = queryJson.addrCity
				} else {
					t.listQuery.addrCityName = ''
				}
				if (queryJson.addrProvince) {
					t.listQuery.addrProvince = queryJson.addrProvince
				} else {
					t.listQuery.addrProvinceName = ''
				}

				// if (queryJson.vin) {
				// 	t.listQuery.vin = queryJson.vin
				// }
				if (queryJson.insuranceCompany) {
					t.listQuery.insuranceCompany = queryJson.insuranceCompany
				}
				if (queryJson.mileageRangeStart) {
					t.listQuery.mileageRangeStart = queryJson.mileageRangeStart
				}
				if (queryJson.mileageRangeEnd) {
					t.listQuery.mileageRangeEnd = queryJson.mileageRangeEnd
				}
				if (queryJson.insuranceDateRange) {
					t.listQuery.insuranceDateRange =
						queryJson.insuranceDateRange
				}
				if (queryJson.mRange) {
					t.listQuery.mRange = queryJson.mRange
				}
				if (queryJson.aVRange) {
					t.listQuery.aVRange = queryJson.aVRange
				}
				if (queryJson.subordinateBranch) {
					t.listQuery.subordinateBranch = queryJson.subordinateBranch
				}
				if (queryJson.numberPlate) {
					t.listQuery.numberPlate = queryJson.numberPlate
				}
				if (queryJson.status) {
					t.listQuery.status = queryJson.status
				}
				if (queryJson.bookedStartDate) {
					t.listQuery.bookedStartDate = queryJson.bookedStartDate
				}
				if (queryJson.bookedEndDate) {
					t.listQuery.bookedEndDate = queryJson.bookedEndDate
				}
				if (queryJson.notBookedStartDate) {
					t.listQuery.notBookedStartDate =
						queryJson.notBookedStartDate
				}
				if (queryJson.notBookedEndDate) {
					t.listQuery.notBookedEndDate = queryJson.notBookedEndDate
				}
				if (queryJson.code) {
					t.listQuery.code = queryJson.code
				}
				if (queryJson.modelId) {
					t.listQuery.modelId = queryJson.modelId
				}
				if (queryJson.subordinateBranch) {
					t.allCompaniesArr.map(function(item) {
						if (item.id == queryJson.subordinateBranch) {
							t.state1 = item.name
						}
					})
				}
				if (queryJson.useType) {
					t.listQuery.useType = queryJson.useType
				}
				if (queryJson.belongToName) {
					t.listQuery.belongToName = queryJson.belongToName
				} else {
					t.listQuery.belongToName = undefined
				}
			}
			t.getAllVehicleType() //获取全部车型
		})
		getUpkeepAll().then(response => {
			this.allUpkeepItems = response.data
		})
		
		this.vehicleInfo_btn_edit = this.elements['vehicleInfo:btn_edit']
		this.vehicleInfo_btn_add = this.elements['vehicleInfo:btn_add']
		this.vehicleInfo_btn_apply = this.elements['vehicleInfo:btn_apply']
		this.vehicleInfo_btn_ride = this.elements['vehicleInfo:btn_ride']
		this.vehicleInfo_btn_ret = this.elements['vehicleInfo:btn_ret']
	},
	computed: {
		...mapGetters(['elements', 'belong2Type', 'vehicleStatus']),
		cityRegions() {
			if (!this.$utils.isInteger(this.form.addrProvince)) {
				return null
			}
			return getSonRegionByCodes(this.form.addrProvince)
		},
		townRegions() {
			if (!this.$utils.isInteger(this.form.addrCity)) {
				return null
			}
			return getSonRegionByCodes(this.form.addrCity)
		},

		getAllZoneList() {
			let that = this
			that.allZoneArr = getAllZone()
			return that.allZoneArr
		},

		townRegions4Query() {
			if (!this.$utils.isInteger(this.listQuery.addrCity)) {
				return null
			}
			return getSonRegionByCodes(this.listQuery.addrCity)
		},
		getHeaderWithToken() {
			return { Authorization: getToken() }
		},
		getSelectedAccItemStr() {
			if (!this.$utils.isEmpty(this.form4Apply.selectedAccItem)) {
				let rsStr = ''
				for (let key in this.form4Apply.selectedAccItem) {
					rsStr =
						rsStr +
						this.$refs.accItemSelector.getNameById(key) +
						' : ' +
						this.form4Apply.selectedAccItem[key] +
						'\n'
				}
				return rsStr
			}
			return ''
		},
		getUnkownBrandCode: () => VEHICLE_CONSTANT_BRAND_CODE_UNKOWN,
		getCurBookedInfo: function() {
			if (
				!this.$utils.isEmpty(this.curBookedInfo3Month) &&
				this.curBookedInfo3Month.length > 0
			) {
				let rs = {}
				for (let index in this.curBookedInfo3Month) {
					rs[
						this.curBookedInfo3Month[index].yearMonth
					] = this.curBookedInfo3Month[index].bookedDate
				}
				return rs
			}
			return undefined
		},
		bookDateRange: {
			get: function() {
				let startDate = undefined
				let endDate = undefined
				if (
					this.$utils.isString(this.listQuery.bookedStartDate) &&
					this.listQuery.bookedStartDate !== ''
				) {
					startDate = toEast8Date(this.listQuery.bookedStartDate)
				}
				if (
					this.$utils.isString(this.listQuery.bookedEndDate) &&
					this.listQuery.bookedEndDate !== ''
				) {
					endDate = toEast8Date(this.listQuery.bookedEndDate)
				}
				return [startDate, endDate]
			},
			set: function([startDate, endDate]) {
				if (this.$utils.isDate(startDate)) {
					this.listQuery.bookedStartDate = formatDate(
						startDate,
						'yyyy-MM-dd'
					)
				} else {
					this.listQuery.bookedStartDate = undefined
				}
				if (this.$utils.isDate(endDate)) {
					this.listQuery.bookedEndDate = formatDate(
						endDate,
						'yyyy-MM-dd'
					)
				} else {
					this.listQuery.bookedEndDate = undefined
				}
			}
		},
		notBookDateRange: {
			get: function() {
				let startDate = undefined
				let endDate = undefined
				if (
					this.$utils.isString(this.listQuery.notBookedStartDate) &&
					this.listQuery.notBookedStartDate !== ''
				) {
					startDate = toEast8Date(this.listQuery.notBookedStartDate)
				}
				if (
					this.$utils.isString(this.listQuery.notBookedEndDate) &&
					this.listQuery.notBookedEndDate !== ''
				) {
					endDate = toEast8Date(this.listQuery.notBookedEndDate)
				}
				return [startDate, endDate]
			},
			set: function([startDate, endDate]) {
				if (this.$utils.isDate(startDate)) {
					this.listQuery.notBookedStartDate = formatDate(
						startDate,
						'yyyy-MM-dd'
					)
				} else {
					this.listQuery.notBookedStartDate = undefined
				}
				if (this.$utils.isDate(endDate)) {
					this.listQuery.notBookedEndDate = formatDate(
						endDate,
						'yyyy-MM-dd'
					)
				} else {
					this.listQuery.notBookedEndDate = undefined
				}
			}
		},
		bookDateRange4Apply: {
			get: function() {
				let startDate = undefined
				let endDate = undefined
				if (
					this.$utils.isString(this.form4Apply.bookStartDate) &&
					this.form4Apply.bookStartDate !== ''
				) {
					startDate = toEast8Date(this.form4Apply.bookStartDate)
				}
				if (
					this.$utils.isString(this.form4Apply.bookEndDate) &&
					this.form4Apply.bookEndDate !== ''
				) {
					endDate = toEast8Date(this.form4Apply.bookEndDate)
				}
				return [startDate, endDate]
			},
			set: function([startDate, endDate]) {
				if (this.$utils.isDate(startDate)) {
					this.form4Apply.bookStartDate = formatDate(
						startDate,
						'yyyy-MM-dd hh:mm:ss'
					)
				} else {
					this.form4Apply.bookStartDate = undefined
				}
				if (this.$utils.isDate(endDate)) {
					this.form4Apply.bookEndDate = formatDate(
						endDate,
						'yyyy-MM-dd hh:mm:ss'
					)
				} else {
					this.form4Apply.bookEndDate = undefined
				}
			}
		}
	},
	methods: {
		
		handleInput(e){
				this.form.strongInsuranceNo=e.target.value.replace(/[^\d]/g,'');
		},
		cityRegions4Query() {
			let that = this
			if (!this.$utils.isInteger(this.listQuery.addrProvince)) {
				return that.getAllCities()
			}
			that.cityList = getSonRegionByCodes(this.listQuery.addrProvince)
			return that.cityList
		},
		getAllCities() {
			var cityStr = []
			var provinceIds = this.provinceRegions
			for (var index in provinceIds) {
				var sysregion = getSonRegionByCodes(provinceIds[index].id)
				for (var i in sysregion) {
					cityStr.push(sysregion[i])
				}
			}
			this.cityList = cityStr
			return cityStr
		},

		getValue(e) {
			this.listQuery.addrCity = undefined
		},
		/**
		 * 获取全部车型
		 * */
		getAllVehicleType() {
			let t = this
			getAllVehicleList().then(response => {
				let listRs = undefined
				if (!this.$utils.isEmpty(response.data)) {
					listRs = response.data
				}
				this.allVehicleList = listRs
				let query = localStorage.getItem('vehicleInfo')
				if (query != 'null' && query) {
					let queryJson = JSON.parse(query)
					if (queryJson.modelId) {
						t.allVehicleList.map(function(item) {
							if (item.id == queryJson.modelId) {
								t.vehicleArr = item.name
							}
						})
					}
				}
				t.getList()
			})
		},
		/**
		 * 重置
		 * */
		reloadPage() {
			this.state1 = ''
			this.vehicleArr = ''
			this.listQuery = {
				page: 1,
				limit: 20,
				zoneId: undefined,
				addrProvince: undefined,
				addrCity: undefined,
				addrProvinceName: '',
				addrCityName: '',
				addrTown: undefined,
				vin: undefined,
				insuranceCompany: undefined,
				mileageRangeStart: undefined,
				mileageRangeEnd: undefined,
				insuranceDateRange: undefined,
				mRange: undefined,
				aVRange: undefined,
				subordinateBranch: undefined,
				numberPlate: undefined,
				status: undefined,
				bookedStartDate: undefined,
				bookedEndDate: undefined,
				notBookedStartDate: undefined,
				notBookedEndDate: undefined,
				code: undefined
			}
			if (this.listQuery) {
				if (!this.listQuery.addrProvince) {
					this.listQuery.addrProvinceName = ''
				}
				if (!this.listQuery.addrCity) {
					this.listQuery.addrCityName = ''
				}
				localStorage.setItem(
					'vehicleInfo',
					JSON.stringify(this.listQuery)
				)
			}
			this.getList()
		},
		exportExcelInfo() {
			exportExcel().then(res => {
				const content = res
				const blob = new Blob([content])
				const fileName = 'vehicle.xlsx'
				if ('download' in document.createElement('a')) {
					// 非IE下载
					const elink = document.createElement('a')
					elink.download = fileName
					elink.style.display = 'none'
					elink.href = URL.createObjectURL(blob)
					document.body.appendChild(elink)
					elink.click()
					URL.revokeObjectURL(elink.href) // 释放URL 对象
					document.body.removeChild(elink)
				} else {
					// IE10+下载
					navigator.msSaveBlob(blob, fileName)
				}
			})
		},
		/**
		 *  下载车辆信息excel表
		 * */
		download() {
			this.listLoading = true
			let listQueryTemp = this.fillDateRange2Object(
				this.listQuery,
				'mRange',
				'mRangeDateStart',
				'mRangeDateEnd'
			)
			listQueryTemp = this.fillDateRange2Object(
				listQueryTemp,
				'aVRange',
				'aVRangeDateStart',
				'aVRangeDateEnd'
			)
			listQueryTemp = this.fillDateRange2Object(
				listQueryTemp,
				'insuranceDateRange',
				'insuranceDateRangeStart',
				'insuranceDateRangeEnd'
			)
			if (!this.state1) {
				listQueryTemp.subordinateBranch = undefined
			}
			if (!this.vehicleArr) {
				listQueryTemp.modelId = undefined
			}
			downloadExcel(listQueryTemp).then(res => {
				const content = res
				const blob = new Blob([content])
				const fileName = '车辆信息.xlsx'
				if ('download' in document.createElement('a')) {
					// 非IE下载
					const elink = document.createElement('a')
					elink.download = fileName
					elink.style.display = 'none'
					elink.href = URL.createObjectURL(blob)
					document.body.appendChild(elink)
					elink.click()
					URL.revokeObjectURL(elink.href) // 释放URL 对象
					document.body.removeChild(elink)
				} else {
					// IE10+下载
					navigator.msSaveBlob(blob, fileName)
				}
			})
		},
		/**
		 * 出车modal传递回来的数据
		 * */
		departureDialogEvent(e) {
			if (e) {
				this.getList()
			}
			this.departureDialogVisible = false
		},
		/**
		 * 保养modal传递回来的数据
		 * */
		upkeepDialogEvent(e) {
			if (e) {
				this.getList()
			}
			this.upkeepDialogVisible = false
		},
		/**
		 * 城市模糊查询
		 * */
		querySearchCityName(queryString, cb) {
			let selectArry = []
			let iitem = {
				value: '全部',
				name: '全部'
			}
			selectArry.push(iitem)
			this.cityArr.map(function(item) {
				item.value = item.name
				selectArry.push(item)
			})
			this.selectArry = selectArry
			var results = queryString
				? selectArry.filter(this.createFilter(queryString))
				: selectArry
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		/**
		 * 省份模糊查询
		 * */
		querySearchProvinceName(queryString, cb) {
			let selectArry = []
			let iitem = {
				value: '全部',
				name: '全部'
			}
			selectArry.push(iitem)
			this.provinceArr.map(function(item) {
				item.value = item.name
				selectArry.push(item)
			})
			this.selectArry = selectArry
			var results = queryString
				? selectArry.filter(this.createFilter(queryString))
				: selectArry
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		/**
		 * 分公司模糊查询
		 * */
		querySearch(queryString, cb) {
			let selectArry = []
			let iitem = {
				value: '全部',
				name: '全部'
			}
			selectArry.push(iitem)
			this.allCompaniesArr.map(function(item) {
				item.value = item.name
				selectArry.push(item)
			})
			this.selectArry = selectArry
			var results = queryString
				? selectArry.filter(this.createFilter(queryString))
				: selectArry
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		queryVehicleModelSearch(queryString, cb) {
			let selectArry = []
			//   let iitem = {
			//   value: "全部",
			//   name: "全部"
			// };
			//   selectArry.push(iitem);
			this.allVehicleList.map(function(item) {
				item.value = item.name
				selectArry.push(item)
			})
			this.selectVehicleModelArray = selectArry
			var results = queryString
				? selectArry.filter(this.createFilter(queryString))
				: selectArry
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.name.indexOf(queryString.toLowerCase()) != -1
			}
		},
		/**
		 * 还车分公司
		 */
		handleSelectArrivalCompanyName(item) {
			if (item.value == '全部') {
				this.arrivalForm.arrivalBranchCompanyId = undefined
			} else {
				this.arrivalForm.arrivalBranchCompanyId = item.id
			}
			console.log(item)
		},
		handleSelectDepartureForm(item) {
			if (item.value == '全部') {
				this.departureForm.departureBranchCompanyId = undefined
			} else {
				this.departureForm.departureBranchCompanyId = item.id
			}
			console.log(item)
		},
		handleSelectEexpectArrivalCompanyName(item) {
			if (item.value == '全部') {
				this.departureForm.expectArrivalBranchCompanyId = undefined
			} else {
				this.departureForm.expectArrivalBranchCompanyId = item.id
			}
			console.log(item)
		},
		/**
		 * 提车分公司
		 * */
		handleSelect3(item) {
			if (item.value == '全部') {
				this.form4Apply.liftCompany = undefined
			} else {
				this.form4Apply.liftCompany = item.id
			}
			console.log(item)
		},
		/**
		 * 还车分公司
		 * */
		handleSelect4(item) {
			if (item.value == '全部') {
				this.form4Apply.retCompany = undefined
			} else {
				this.form4Apply.retCompany = item.id
			}
			console.log(item)
		},
		/**
		 * 所属分公司
		 * */
		handleSelectSubordinate(item) {
			if (item.value == '全部') {
				this.form.subordinateBranch = undefined
				//          this.form.subordinateBranchName = "";
			} else {
				this.form.subordinateBranch = item.id
				//          this.form.subordinateBranchName = item.name;
			}
		},
		handleVehicleModelSelectSubordinate(item) {
			if (item.value == '全部') {
				this.form.modelId = undefined
			} else {
				this.form.modelId = item.id
			}
		},
		/**
		 * 停靠分公司
		 * */
		handleSelectPark(item) {
			if (item.value == '全部') {
				this.form.parkBranchCompanyId = undefined
				this.form.parkBranchCompanyName = ''
			} else {
				this.form.parkBranchCompanyId = item.id
				this.form.parkBranchCompanyName = item.name
			}
		},
		handleSelect1(item) {
			if (item.value == '全部') {
				this.form.subordinateBranch = undefined
			} else {
				this.form.subordinateBranch = item.id
			}
			console.log(item)
		},
		/**
		 * 选择省份
		 */
		handleSelectProvince(item) {
			if (item.value == '全部') {
				this.listQuery.addrProvince = undefined
			} else {
				this.listQuery.addrProvince = item.code
			}
		},
		/**
		 * 选择城市
		 */
		handleSelectCity(item) {
			if (item.value == '全部') {
				this.listQuery.addrCity = undefined
			} else {
				this.listQuery.addrCity = item.code
			}
		},
		handleSelect(item) {
			if (item.value == '全部') {
				this.listQuery.subordinateBranch = undefined
			} else {
				this.listQuery.subordinateBranch = item.id
			}
			console.log(item)
		},
		handleVehicleModelSelect(item) {
			if (item.value == '全部') {
				this.listQuery.modelId = undefined
			} else {
				this.listQuery.modelId = item.id
			}
		},
		/**
		 * 出车分公司
		 * */
		handleSelectPark1(item) {
			if (item.value == '全部') {
				this.departureForm.departureBranchCompanyId = undefined
				this.departureForm.departureBranchCompanyName = ''
			} else {
				this.departureForm.departureBranchCompanyId = item.id
				this.departureForm.departureBranchCompanyName = item.name
			}
		},
		/**
		 * 保养结束
		 * */
		upkeepEndHandler(row) {
			console.dir(row)
			this.$confirm('此操作将结束保养, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				upkeepEndVehicle({
					vehicleId: row.id
				}).then(() => {
					this.$notify({
						title: '成功',
						message: '操作成功',
						type: 'success',
						duration: 2000
					})
					this.getList()
				})
			})
		},
		/**
		 * 操作-保养-按钮
		 * */
		upkeepHandler(row) {
			this.upkeepRow = row
			this.upkeepDialogVisible = true
		},
		handleBookRecord(row) {
			this.$router.push({
				path: '/vehicle/vehicleSchedulManage',
				query: {
					numberPlate: row.numberPlate
				}
			})
		},
		handleDepartureLog(row) {
			this.$router.push({
				path: '/vehicle/vehicleDepartureLog',
				query: {
					numberPlate: row.numberPlate
				}
			})
		},
		arrivalHandler(row) {
			// open dialog
			this.arrivalDialogVisible = true
			this.clearArrivalForm()
			this.arrivalForm.vehicleId = row.id
			this.arrivalForm.mileage = row.mileage
			this.arrivalForm.arrivalBranchCompanyId = row.subordinateBranch
			let that = this
			let selectArry = []
			this.allCompaniesArr.map(function(item) {
				item.value = item.name
				selectArry.push(item)
			})
			selectArry.map(function(iitem) {
				if (row.subordinateBranch == iitem.id) {
					that.arrivalForm.arrivalBranchCompanyName = iitem.name
				}
			})
			this.arrivalForm.numberPlate = row.numberPlate
			this.arrivalForm.vehicleDate = Date()
		},
		cancelArrival() {
			this.arrivalDialogVisible = false
			this.clearArrivalForm()
		},
		/**
		 * 收车-确定
		 */
		arrivalVehicleHandler() {
			if (
				this.arrivalForm.arrivalBranchCompanyName == '' ||
				this.arrivalForm.arrivalBranchCompanyName == '全部'
			) {
				this.arrivalForm.arrivalBranchCompanyId = undefined
			}
			arrivalVehicle(this.arrivalForm).then(response => {
				if (response.code === rsCode.RS_CODE_SUC) {
					this.arrivalDialogVisible = false
					this.$notify({
						title: '成功',
						message: '收车成功',
						type: 'success',
						duration: 2000
					})
					this.getList()
				} else {
					this.$notify({
						title: '失败',
						message: rsCode.msg[response.code]
							? rsCode.msg[response.code]
							: '操作失败！',
						type: 'error',
						duration: 2000
					})
				}
			})
		},
		clearArrivalForm() {
			this.arrivalForm = {
				vehicleId: null,
				numberPlate: null,
				arrivalDate: null,
				recycleMan: null,
				recycleManTel: null,
				mileage: null,
				arrivalBranchCompanyId: null,
				arrivalBranchCompanyName: ''
			}
		},
		/**
		 * 出车-按钮
		 * */
		departureHandler(row) {
			this.departureRow = row
			this.departureDialogVisible = true
		},

		getAllBelong2Type: function() {
			return this.belong2Type
		},
		getBelongToNameStr(row) {
			if (!this.$utils.isInteger(row.belongTo)) {
				return undefined
			}
			if (BELONG_TO_TYPE_OWN === row.belongTo) {
				return this.belong2Type[row.belongTo].val
			}
			if (
				this.$utils.isString(row.belongToName) &&
				!this.$utils.isEmpty(row.belongToName)
			) {
				return row.belongToName
			}
			return undefined
		},
		showImgDialog(drivingLicensePath) {
			this.licenceSrcUrl = this.getDrivingLicenseUrl(drivingLicensePath)
			this.dialogForm4LicenceVisible = true
		},
		getDrivingLicenseUrl(drivingLicensePath) {
			if (drivingLicensePath.indexOf('https') > -1) {
				return drivingLicensePath
			}else{
				return (
					process.env.BASE_API +
					'/vehicle/vehicleInfo/download/drivingLicense?realFileRelPath=' +
					encodeURI(drivingLicensePath)
				)
			}
		},
		handleAvatarSuccess(res, file) {
			this.form.drivingLicensePath = res.data
			this.showLoadingBody = false
		},
		handleAvatarSuccessF(res, file) {
			this.form.drivingLicenseDuplicatePath = res.data
			this.showLoadingBody = false
		},
		handleAvatarSuccessPDF(res, file) {
			if (res.data) {
				if(this.pdfList.length >= 0) {
					var data = {
						"id": this.pdfList.length + 1,
						"name": "车辆保单" + (this.pdfList.length + 1),
						"url":res.data
					}
					this.pdfList.push(data)
				}
			}
			this.showLoadingBody = false
		},
		downloadPDF(i) {
			var data = this.pdfList[i].url;
			if(data) {
				window.open(data, '_blank');
			} else {
				alert("车辆保单不存在")
			}
		},
		beforeAvatarUpload(file) {
			const isJPG =
				file.type === 'image/jpeg' || file.type === 'image/gif'
				file.type === 'image/jpeg' || file.type === 'image/gif' || file.type === 'image/pdf'
			const isLt2M = file.size / 1024 / 1024 < 10

			if (!isJPG) {
				this.$message.error('上传图片只能是 JPG/GIF 格式!')
			}
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 10MB!')
			}
			// this.showLoadingBody = true
			return isJPG && isLt2M
		},
		accItemSelected(selected) {
			this.form4Apply.selectedAccItem = selected
		},
		accItemClear() {
			this.form4Apply.selectedAccItem = undefined
		},
		handleAccItemSelect() {
			this.$refs.accItemSelector.show()
		},
		getAllInsuranceCompany,
		getInsuranceCompany,
		integerValidator: function() {
			return {
				validator: (rule, value, callback) => {
					if (
						this.$utils.isUndefined(value) ||
						this.$utils.isNull()
					) {
						return callback()
					}
					if (!this.$utils.isInteger(value)) {
						return callback(new Error('必须为整数'))
					}
					if (value < 1 || value > 9999999999) {
						return callback(
							new Error('编码合法范围：[1 - 9999999999]')
						)
					}
					callback()
				},
				trigger: 'blur'
			}
		},
		fillDateRange2Object: function(
			realBelong,
			rangePropName,
			startDatePropName,
			endDatePropName
		) {
			if (
				this.$utils.isEmpty(realBelong) ||
				!this.$utils.isArray(realBelong[rangePropName])
			) {
				return realBelong
			}
			let belong = this.$utils.clone(realBelong, true)
			let [startDate, endDate] = belong[rangePropName]
			if (this.$utils.isDate(startDate)) {
				belong[startDatePropName] = formatDate(
					startDate,
					'yyyy-MM-dd hh:mm:ss'
				)
			} else {
				belong[startDatePropName] = undefined
			}
			if (this.$utils.isDate(endDate)) {
				belong[endDatePropName] = formatDate(
					endDate,
					'yyyy-MM-dd hh:mm:ss'
				)
			} else {
				belong[endDatePropName] = undefined
			}
			belong[rangePropName] = undefined
			return belong
		},
		fillDates2Range: function(
			belong,
			rangePropName,
			startDatePropName,
			endDatePropName
		) {
			if (
				this.$utils.isEmpty(belong) ||
				!this.$utils.isString(belong[startDatePropName]) ||
				belong[startDatePropName] === '' ||
				!this.$utils.isString(belong[endDatePropName]) ||
				belong[endDatePropName] === ''
			) {
				return
			}
			let [startDateStr, endDateStr] = [
				belong[startDatePropName],
				belong[endDatePropName]
			]
			belong[rangePropName] = [
				toEast8Date(startDateStr),
				toEast8Date(endDateStr)
			]
		},
		changeDate4BookInfo: function(date) {
			getBookedInfo(this.form4BookInfo.vehicle, date).then(response => {
				this.curBookedInfo = response.data
			})
		},
		checkBookDate: function(time) {
			let nowDate = newEast8Date()
			if (
				this.$utils.toDateString(time, 'yyyy-MM-dd') <
				this.$utils.toDateString(nowDate, 'yyyy-MM-dd')
			) {
				return true
			}
			if (nowDate.setMonth(nowDate.getMonth() + 2) < time) {
				//预定范围两个月内
				return true
			}
			let curYearMonth = formatDate(time, 'yyyy-MM')
			if (
				!this.$utils.isEmpty(this.getCurBookedInfo) &&
				this.$utils.isInteger(this.getCurBookedInfo[curYearMonth])
			) {
				let int4BitMap = this.getCurBookedInfo[curYearMonth]
				let dayOfMonth = time.getDate()
				return (int4BitMap & (1 << (dayOfMonth - 1))) != 0
			}
			return false
		},
		checkIfRuning: vehicle =>
			vehicle.status === VEHICLE_CONSTANT_STATUS_NORMAL,
		getVehicleStatus: function(code) {
			// console.log(this.getAllVehicleStatus()[1].val);
			// let demo = this.getAllVehicleStatus.filter(item => item)
			// console.log(this.vehicleStatus[code]);

			return this.getAllVehicleStatus()[code].val
		},
		getAllVehicleStatus: function() {
			return {
				1: {
					code: 1,
					val: '正常运行'
				},
				3: {
					code: 3,
					val: '报废'
				},
				4: {
					code: 4,
					val: '出车'
				},
				6: {
					code: 6,
					val: '维修中'
				},
				7: {
					code: 7,
					val: '保养中'
				},
				8: {
					code: 8,
					val: '上牌中'
				}
			}
		},
		getBrand: function(code) {
			if (
				!this.$utils.isInteger(code) ||
				code == VEHICLE_CONSTANT_BRAND_CODE_UNKOWN
			) {
				return '未知'
			}
			return getConstantByTypeAndCode(
				VEHICLE_CONSTANT_VEHICLE_BRAND,
				code
			)
				? getConstantByTypeAndCode(VEHICLE_CONSTANT_VEHICLE_BRAND, code)
						.val
				: '品牌不存在'
		},
		getAllBranch: () => {
			return getConstantListByType(VEHICLE_CONSTANT_VEHICLE_BRAND)
		},
		getUseType: function(code) {
			if (
				!this.$utils.isInteger(code) ||
				code == VEHICLE_CONSTANT_USE_TYPE_UNKOWN
			) {
				return '未知'
			}
			return getConstantByTypeAndCode(VEHICLE_CONSTANT_VEHICLE_USE, code)
				? getConstantByTypeAndCode(VEHICLE_CONSTANT_VEHICLE_USE, code)
						.val
				: '用途未知'
		},
		getAllUseType: () => {
			return getConstantListByType(VEHICLE_CONSTANT_VEHICLE_USE)
		},
		getList() {
			// this.listQuery.vin = null
			this.listLoading = true
			let listQueryTemp = this.fillDateRange2Object(
				this.listQuery,
				'mRange',
				'mRangeDateStart',
				'mRangeDateEnd'
			)
			listQueryTemp = this.fillDateRange2Object(
				listQueryTemp,
				'aVRange',
				'aVRangeDateStart',
				'aVRangeDateEnd'
			)
			listQueryTemp = this.fillDateRange2Object(
				listQueryTemp,
				'insuranceDateRange',
				'insuranceDateRangeStart',
				'insuranceDateRangeEnd'
			)
			if (!this.state1) {
				listQueryTemp.subordinateBranch = undefined
			}
			if (!this.vehicleArr) {
				listQueryTemp.modelId = undefined
			}
			if (!this.listQuery.belongToName) {
				this.listQuery.belongToName = undefined
			}

			page(listQueryTemp).then(response => {
				if (response.code == 1) {
					let totalCountRs = undefined
					let listRs = undefined
					// if (
					// 	!this.$utils.isEmpty(response.data.data) &&
					// 	this.$utils.isInteger(response.data.totalCount)
					// ) {
					// 	listRs = response.data.data
					// 	totalCountRs = response.data.totalCount
					// 	listRs.map(function(item) {
					// 		item.visible2 = false
					// 	})
					// }
					this.listLoading = false
					console.log(response.data.data)

					this.list = response.data.data
					this.total = response.data.totalCount
				} else {
					this.list = []
					this.listLoading = false
				}
			})
		},
		getAddrStr(branchCompany) {
			let regions = getRegionByCodes([
				branchCompany.addrProvince,
				branchCompany.addrCity,
				branchCompany.addrTown
			])
			return (
				regions[0].name +
				' ' +
				regions[1].name +
				' ' +
				regions[2].name +
				' '
			)
		},
		handleFilter(p) {
			let t = this
			this.listQuery.page = 1
			this.$refs.queryForm.validate(valid => {
				if (valid) {
					if (t.listQuery) {
						localStorage.setItem(
							'vehicleInfo',
							JSON.stringify(this.listQuery)
						)
					}
					//搜索
					if (p == 'search') {
						this.getList()
					}
					//下载
					if (p == 'download') {
						this.download()
					}
					if (p == 'export') {
						this.exportExcelInfo();
					}
				} else {
					return false
				}
			})
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			if (this.listQuery) {
				localStorage.setItem(
					'vehicleInfo',
					JSON.stringify(this.listQuery)
				)
			}
			this.getList()
		},
		handleCurrentChange(val) {
			this.listQuery.page = val
			if (this.listQuery) {
				localStorage.setItem(
					'vehicleInfo',
					JSON.stringify(this.listQuery)
				)
			}
			this.getList()
		},
		handleCreate() {
			this.resetTemp()
			this.dialogStatus = 'create'
			this.dialogFormVisible = true
		},
		handleUpdate(row) {

			let selectArry = []
			let selectVehicleModelArry = []
			let iitem = {
				value: '全部',
				name: '全部'
			}
			selectArry.push(iitem)
			this.allCompaniesArr.map(function(item) {
				item.value = item.name
				selectArry.push(item)
			})
			selectVehicleModelArry.push(iitem)
			this.allVehicleList.map(function(item) {
				item.value = item.name
				selectVehicleModelArry.push(item)
			})
			this.selectArry = selectArry
			this.selectVehicleModelArray = selectVehicleModelArry
			getObj(row.id).then(response => {
				let that = this
				this.resetTemp()
				this.$utils.objectEach(response.data, (item, key) => {
					this.form[key] = item
				})
				that.pdfList = []
				selectArry.map(function(iitem) {
					if (that.form['subordinateBranch'] == iitem.id) {
						that.form.subordinateBranchName = iitem.name
						that.form.subordinateBranch = iitem.id
					}
					if (that.form['parkBranchCompanyId'] == iitem.id) {
						that.form.parkBranchCompanyName = iitem.name
						that.form.parkBranchCompanyId = iitem.id
					}

					if (that.form.insurancePDF) {
						that.pdfList = JSON.parse(that.form.insurancePDF)
					}

				})
				selectVehicleModelArry.map(function(value) {
					if (that.form['modelId'] == value.id) {
						that.form.vehicleModelName = value.name
						that.form.modelId = value.id
					}
				})
				this.fillDates2Range(
					this.form,
					'insuranceDateRange4form',
					'insuranceStartDate',
					'insuranceEndDate'
				)
				this.dialogFormVisible = true
				this.dialogStatus = 'update'
			})
		},
		/**
		 * 操作-申请预定
		 * */
		handleApply(row) {
			this.resetTemp4Apply()
			let that = this
			let selectArry = []
			this.allCompaniesArr.map(function(item) {
				item.value = item.name
				selectArry.push(item)
			})
			this.form4Apply.liftCompany = row.parkBranchCompanyId
			this.form4Apply.vehicleId = row.id
			selectArry.map(function(iitem) {
				if (row.parkBranchCompanyId == iitem.id) {
					that.form4Apply.state3 = iitem.name
				}
			})
			this.form4Apply.vehicle = row.id
			getBookedInfoIn2Month(row.id).then(response => {
				this.curBookedInfo3Month = response.data
				this.dialogStatus = 'apply'
				this.dialogForm4ApplyVisible = true
			})
		},
		handleBookInfo(row) {
			this.$refs.bookInfoViewer.handleBookInfo(row.id)
		},
		create(formName) {
			const set = this.$refs
			set[formName].validate(valid => {
				if (valid) {
					let formTemp = this.fillDateRange2Object(
						this.form,
						'insuranceDateRange4form',
						'insuranceStartDate',
						'insuranceEndDate'
					)
					convertDate2Str(formTemp)
					addObj(formTemp).then(response => {
						if (response.code === rsCode.RS_CODE_SUC) {
							this.dialogFormVisible = false
							this.getList()
							this.$notify({
								title: '成功',
								message: '创建成功',
								type: 'success',
								duration: 2000
							})
							this.getList()
						} else {
							this.$notify({
								title: '失败',
								message: rsCode.msg[response.code]
									? rsCode.msg[response.code]
									: '操作失败！',
								type: 'error',
								duration: 2000
							})
						}
					})
				} else {
					this.$message('必填项不能为空')
					return false
				}
			})
		},
		cancel(formName) {
			this.dialogFormVisible = false
			this.dialogForm4ApplyVisible = false
			this.$refs[formName].resetFields()
			// this.listQuery.code = ''
		},
		closePop(formName) {
			this.$refs.form.resetFields()
		},
		cancel4Apply(formName) {
			this.dialogForm4ApplyVisible = false
			this.$refs[formName].resetFields()
		},
		update(formName) {
			const set = this.$refs
			set[formName].validate(valid => {
				if (valid) {
					this.form.insurancePDF = JSON.stringify(this.pdfList)
					let formTemp = this.fillDateRange2Object(
						this.form,
						'insuranceDateRange4form',
						'insuranceStartDate',
						'insuranceEndDate'
					)
					convertDate2Str(formTemp)
					putObj(formTemp).then(response => {
						if (response.code === rsCode.RS_CODE_SUC) {
							this.dialogFormVisible = false
							this.getList()
							this.$notify({
								title: '成功',
								message: '更新成功',
								type: 'success',
								duration: 2000
							})
							this.getList()
						} else {
							this.$notify({
								title: '失败',
								message: rsCode.msg[response.code]
									? rsCode.msg[response.code]
									: '操作失败！',
								type: 'error',
								duration: 2000
							})
						}
					})
				} else {
					return false
				}
			})
		},
		/**
		 * 申请预定-确定
		 * @param formName
		 */
		apply(formName) {
			if (!this.form4Apply.state3 || this.form4Apply.state3 == '全部') {
				this.form4Apply.liftCompany = undefined
				this.$notify({
					title: '失败',
					message: '请选择提车分公司',
					type: 'warning',
					duration: 2000
				})
				return
			}
			if (!this.form4Apply.state4 || this.form4Apply.state4 == '全部') {
				this.form4Apply.retCompany = undefined
				this.$notify({
					title: '失败',
					message: '请选择还车分公司',
					type: 'warning',
					duration: 2000
				})
				return
			}
			const set = this.$refs
			set[formName].validate(valid => {
				if (valid) {
					if (this.form4Apply.bookType == 6) {
						if (this.form4Apply.upkeepIds.length == 0) {
							this.$notify({
								title: '警告',
								message: '请选择保养项目',
								type: 'warning',
								duration: 2000
							})
							return false
						}
					}
					this.form4Apply.upkeepIds =
						this.form4Apply.bookType == 6
							? this.form4Apply.upkeepIds.join(',')
							: ''
					this.dialogFormVisible = false
					book(this.form4Apply).then(res => {
						if (res.status == 200) {
							this.dialogForm4ApplyVisible = false
							this.getList()
							this.$notify({
								title: '成功',
								message: '预定成功',
								type: 'success',
								duration: 2000
							})
						} else {
							this.$notify({
								title: '失败',
								message: res.message,
								type: 'error',
								duration: 2000
							})
						}
					})
				} else {
					return false
				}
			})
		},
		/**
		 * 删除
		 * */
		deleteHandler(row) {
			this.$confirm('确定删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				delObj(row.id).then(response => {
					if (response.status === 200) {
						this.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success',
							duration: 2000
						})
						this.bannerDialogVisible = false
						this.getList()
					} else {
						this.$notify({
							title: '删除失败',
							message: rsCode.msg[response.code]
								? rsCode.msg[response.code]
								: '操作失败！',
							type: 'error',
							duration: 2000
						})
					}
				})
			})
		},
		resetTemp() {
			this.form = {
				status: undefined,
				code: undefined,
				parkBranchCompanyName: '', //停靠分公司名称
				parkBranchCompanyId: undefined, //停靠分公司id
				modelId: undefined, //车型id
				numberPlate: undefined,
				brand: undefined,
				subordinateBranchName: '',
				vehicleModelName: '',
				subordinateBranch: undefined,
				useType: undefined,
				vin: undefined,
				insuranceNo: undefined,
				insuranceCompany: undefined,
				insuranceDateRange4form: undefined,
				annualVerificationDate: undefined,
				maintenanceDate: undefined,
				maintenanceMileage: undefined,
				belongTo: undefined,
				belongToName: undefined,
				engineNum: undefined,
				manufacturer: undefined,
				mileageLastUpdate: undefined,
				//          receiveTime: undefined,
				drivingLicensePath: undefined,
				drivingLicenseDuplicatePath: undefined,
				remark: undefined,
				strongInsuranceEndDate: undefined,
				strongInsuranceNo: undefined,
				strongInsuranceCompany: undefined,
				insuranceEndDate: null
			}
		},
		resetTemp4Apply() {
			this.form4Apply = {
				bookStartDate: undefined,
				bookEndDate: undefined,
				state3: '',
				state4: '',
				retCompany: undefined,
				vehicle: undefined,
				selectedAccItem: undefined,
				liftCompany: undefined,
				liftAddr: undefined,
				destination: undefined,
				remark: undefined,
				vehicleId: undefined,
				bookType: undefined,
				vehicleUsername: undefined,
				vehicleUserPhone: undefined,
				upkeepIds: []
			}
		},
		resetTemp4BookInfo() {
			this.form4BookInfo = {
				selectedMonth: this.$utils.toDateString(
					newEast8Date(),
					'yyyy-MM'
				),
				vehicle: undefined
			}
		}
	}
}
</script>
<style>
.driving-title {
	position: absolute;
	top: 34px;
	left: 140px;
	font-size: 14px;
}
</style>
