<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container" ref="filter-container">
			<el-form :rules="rules4Query" ref="queryForm" :inline="inline" :model="listQuery">
				<el-row>
					<el-col :span="5">
						<el-form-item label="用途">
							<el-select class="filter-item" v-model="listQuery.bookType" placeholder="请选择">
								<el-option :key="undefined" label="全部" :value="undefined"></el-option>
								<el-option v-for="val in bookTypeList" :key="val.id" :label="val.name" :value="val.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="车辆编码">
							<el-input type="number" v-model.number="listQuery.code" placeholder="请输入车辆编码"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="车牌号">
							<el-input v-model="listQuery.numberPlate" placeholder="请输入车牌号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<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, key, index)   in statusList " :key="val.code" :label="val.val"
								:value="val.code"></el-option>-->
								<el-option
									v-for="(val, index)   in statusList "
									:key="index"
									:label="val.val"
									:value="val.code"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="5">
						<el-form-item label="所属大区">
							<el-select
									class="filter-item"
									v-model="listQuery.zoneId"
									placeholder="请选择"
									@change="getProvinceRegions"
							>
								<el-option :key="undefined" label="全部" :value="undefined"></el-option>
								<el-option v-for="val in getAllZoneList" :key="val.id" :label="val.name" :value="val.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="提车公司" prop="subordinateBranch">
							<el-autocomplete
								class="inline-input"
								v-model="listQuery.liftCompanyName"
								:fetch-suggestions="querySearch"
								placeholder="请输入内容"
								@select="handleSelect"
							></el-autocomplete>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="提车时间" prop="bookStartDate4Query">
							<el-date-picker
									v-model="bookStartDate4Query"
									type="month"
									:editable="true"
									format="yyyy-MM"
									placeholder="请选择预约提车时间"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="还车时间" prop="bookEndDate4Query">
							<el-date-picker
									v-model="bookEndDate4Query"
									type="month"
									:editable="true"
									format="yyyy-MM"
									placeholder="请选择预约还车时间"
							></el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
				<el-button class="filter-item" type="primary" v-waves @click="reloadPage">重置</el-button>
			</el-form>
		</div>

		<el-table
				:key="tableKey"
				:data="list"
				v-loading.body="listLoading"
				border
				fit
				highlight-current-row
				style="width: 100%"
		>
			<el-table-column align="center" label="车牌号" width="110">
				<template scope="scope">
					<span>{{scope.row.numberPlate}}</span>
				</template>
			</el-table-column>

			<el-table-column align="center" label="申请状态" width="100">
				<template scope="scope">
					<span>{{getBookRecordStatus(scope.row)}}</span>
				</template>
			</el-table-column>

			<el-table-column align="center" label="使用人/联系方式">
				<template scope="scope">
					<span>{{scope.row.vehicleUsername}}/{{scope.row.vehicleUserPhone}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="出车用途" width="120">
				<template scope="scope">
					<span v-if="scope.row.bookType==1">租车</span>
					<span v-if="scope.row.bookType==2">用户租赁</span>
					<span v-if="scope.row.bookType==3">维修</span>
					<span v-if="scope.row.bookType==4">展览</span>
					<span v-if="scope.row.bookType==5">旅游</span>
					<span v-if="scope.row.bookType==6">保养</span>
					<span v-if="scope.row.bookType==7">预约中</span>
					<span v-if="scope.row.bookType==8">禁用</span>
					<span v-if="scope.row.bookType==9">客户用车</span>
					<span v-if="scope.row.bookType==10">其他</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="预定取/还时间" width="200">
				<template scope="scope">
					<span>{{scope.row.bookStartDate}}</span>
					<br />
					<span>{{scope.row.bookEndDate}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="实际取/还时间" width="200">
				<template scope="scope">
					<span>{{scope.row.actualStartDate}}</span>
					<br />
					<span>{{scope.row.actualEndDate}}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column align="center" label="预定时间" width="220">
        <template scope="scope">
        <span
          v-if="checkIfApply(scope.row.status) && checkIfBooked(scope.row.bookedDate, [scope.row.bookStartDate, scope.row.bookEndDate])"
          style="color: red">
          {{getDatePeriodStr([scope.row.bookStartDate, scope.row.bookEndDate])}}(已被预订)
        </span>
          <span v-else>{{getDatePeriodStr([scope.row.bookStartDate, scope.row.bookEndDate])}}</span>

        </template>
			</el-table-column>-->

			<!--      <el-table-column align="center" label="提车地址" width="200">-->
			<!--        <template scope="scope">-->
			<!--          <span>{{scope.row.liftAddr}}</span>-->
			<!--        </template>-->
			<!--      </el-table-column>-->

			<!-- <el-table-column align="center" label="目的地" width="200">
        <template scope="scope">
          <span>{{scope.row.destination}}</span>
        </template>
      </el-table-column>

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

      <el-table-column align="center" label="申请审核人" width="120">
        <template scope="scope">
          <span>{{scope.row.reviewerNameApply}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="取消人" width="100">
        <template scope="scope">
          <span>{{scope.row.reviewerNameCancel}}</span>
        </template>
			</el-table-column>-->

			<el-table-column align="center" label="提车公司" width="200">
				<template scope="scope">
					<span>{{scope.row.liftCompanyName}}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column align="center" label="提车审核人" width="120">
        <template scope="scope">
          <span>{{scope.row.reviewerNameLift}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="提车时间" width="120">
        <template scope="scope">
          <span>{{scope.row.actualStartDate}}</span>
        </template>
			</el-table-column>-->

			<el-table-column align="center" label="还车公司" width="200">
				<template scope="scope">
					<span>{{scope.row.retCompanyName}}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column align="center" label="还车审核人" width="120">
        <template scope="scope">
          <span>{{scope.row.reviewerNameReturn}}</span>
        </template>
      </el-table-column>


      <el-table-column align="center" label="随车物品" width="120">
        <template scope="scope">
          <el-button size="small" type="success" @click="handleAccItemInfo(scope.row)">查看随车物品</el-button>
        </template>
      </el-table-column>


      <el-table-column align="center" label="提车里程数" width="100">
        <template scope="scope">
          <span>{{scope.row.mileageLift}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="还车里程数" width="100">
        <template scope="scope">
          <span>{{scope.row.mileageRet}}</span>
        </template>
      </el-table-column>

      <el-table-column width="65" align="center" label="是否违章">
        <template scope="scope">
          <span>{{scope.row.haveViolation?'是':'否'}}</span>
        </template>
			</el-table-column>-->
			<el-table-column align="center" label="详情" width="100" fixed="right">
				<template scope="scope">
					<span style="color: #13CE66;cursor: pointer;" @click="handleDetail(scope.row)">订单详情</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" width="200" fixed="right">
				<template scope="scope">
					<!-- <el-button size="small" type="success" @click="handleBookInfo(scope.row)">预订信息</el-button> -->
					<el-button
							size="small"
							class="el-button el-button--text el-button--small"
							v-if="scope.row.status==3"
							@click="illegalInquiry(scope.row)"
					>违章记录</el-button>
					<el-button
							v-if="bookRecord_btn_prove&&scope.row.status==1"
							size="small"
							class="el-button el-button--text el-button--small"
							@click="handleProve(scope.row)"
					>通过</el-button>
					<el-button
							v-if="bookRecord_btn_reject&&scope.row.status==1"
							size="small"
							class="el-button el-button--text el-button--small"
							style="color: red;"
							@click="handleReject(scope.row)"
					>驳回</el-button>
					<template v-if="scope.row.vehicleDepartureLogVo==undefined">
						<el-button
								v-if="bookRecord_btn_lift&&scope.row.liftStatus==1&&scope.row.status==2"
								size="small"
								class="el-button el-button--text el-button--small"
								@click="handleLift(scope.row)"
						>出车</el-button>
					</template>
					<template v-if="scope.row.vehicleDepartureLogVo!=undefined">
						<el-button
								v-if="bookRecord_btn_ret&&scope.row.vehicleDepartureLogVo.state==0&&scope.row.retStatus==1"
								size="small"
								class="el-button el-button--text el-button--small"
								@click="handleRet(scope.row)"
						>收车</el-button>
					</template>
					<template v-if="scope.row.vehicleDepartureLogVo==undefined">
						<el-button
								v-if="bookRecord_btn_unbook&&scope.row.status==2"
								size="small"
								class="el-button el-button--text el-button--small"
								style="color: red;"
								@click="handleUnbook(scope.row)"
						>取消预定</el-button>
					</template>
				</template>
			</el-table-column>
		</el-table>

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

		<book-info-viewer ref="bookInfoViewer"></book-info-viewer>
		<acc-item-selector :selectedAccItem="selectedAccItem" :isReadOnly="true" ref="accItemSelector"></acc-item-selector>

		<!-- 查看详情 -->
		<el-dialog title="预约详情" :visible.sync="dialogDetailVisible" class="order-details">
			<el-form label-width="100px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="申请状态">
							<span v-if="detailItem.status==1">申请中</span>
							<span v-if="detailItem.status==3">待出行</span>
							<span v-if="detailItem.status==4">驳回</span>
							<span v-if="detailItem.status==5">出行中</span>
							<span v-if="detailItem.status==6">取消预订</span>
							<span v-if="detailItem.status==7">已完成</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="5">
						<el-form-item label="车牌号">
							<span>{{detailItem.numberPlate}}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="车辆编号">
							<span>{{detailItem.code}}</span>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="7">
            <el-form-item label="当前停靠公司">
              <span>{{detailItem.liftCompanyName}}</span>
            </el-form-item>
					</el-col>-->
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="申请账号">
							<span>{{detailItem.bookUserName}}</span>
							<span style="margin-left:10px"></span>
						</el-form-item>
					</el-col>
				</el-row>
				<hr />
				<el-row>
					<el-col :span="24">
						<el-form-item label="使用人">
							<span>{{detailItem.vehicleUsername}}</span>
							<span style="margin-left:10px">{{detailItem.vehicleUserPhone}}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="预定时间">
							<span>{{detailItem.bookStartDate}}</span> 至
							<span>{{detailItem.bookEndDate}}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="出车用途">
							<span v-if="detailItem.bookType==1">租车</span>
							<span v-if="detailItem.bookType==3">维修</span>
							<span v-if="detailItem.bookType==4">展览</span>
							<span v-if="detailItem.bookType==5">旅游</span>
							<span v-if="detailItem.bookType==6">保养</span>
							<span v-if="detailItem.bookType==8">禁用</span>
							<span v-if="detailItem.bookType==9">客户用车</span>
							<span v-if="detailItem.bookType==10">其他</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="备注">
							<span>{{detailItem.remark}}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="随车物品">
							<span></span>
						</el-form-item>
					</el-col>
				</el-row>
				<hr />
				<el-row>
					<el-col :span="8">
						<el-form-item label="提车分公司">
							<span>{{detailItem.liftCompanyName}}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="操作人">
							<span v-if="detailItem.vehicleDepartureLogVo">{{detailItem.vehicleDepartureLogVo.checkMan}}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="操作时间">
							<span
									v-if="detailItem.vehicleDepartureLogVo"
							>{{detailItem.vehicleDepartureLogVo.departureTime}}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="提车公里数">
							<span
									v-if="detailItem.vehicleDepartureLogVo"
							>{{detailItem.vehicleDepartureLogVo.mileageStart?detailItem.vehicleDepartureLogVo.mileageStart+'KM':''}}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row style="margin-left: 20px;" v-if="departurePicList.length>0">
					<viewer :images="departurePicList">
						<img v-for="src in departurePicList" :src="src" :key="src" class="voucher" />
					</viewer>

					<!-- <el-col
						:span="3"
						v-for="(item, index) in departurePicList"
						:key="index"
						:offset="index%6 > 0 ? 1 : 0"
						style="margin-bottom:10px"
					>
						<el-card>
							<img :src="item" class="image" />
						</el-card>
					</el-col> -->
				</el-row>
				<hr />
				<el-row>
					<el-col :span="8">
						<el-form-item label="还车分公司">
							<span>{{detailItem.retCompanyName}}</span>
							<el-button
									size="mini"
									type="primary"
									style="padding: 7px 9px;"
									@click="resetReturn = true"
									v-show="detailItem.status == 2 || detailItem.status == 5"
							>更换</el-button>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="操作人">
							<span v-if="detailItem.vehicleDepartureLogVo">{{detailItem.vehicleDepartureLogVo.recycleMan}}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="操作时间">
							<span
									v-if="detailItem.vehicleDepartureLogVo"
							>{{detailItem.vehicleDepartureLogVo.arrivalTime}}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="还车公里数">
							<span
									v-if="detailItem.vehicleDepartureLogVo"
							>{{detailItem.vehicleDepartureLogVo.mileageEnd?detailItem.vehicleDepartureLogVo.mileageEnd+'KM':''}}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row style="margin-left: 20px;" v-if="arrivalPicList.length>0">
					<viewer :images="arrivalPicList">
						<img v-for="src in arrivalPicList" :src="src" :key="src" class="voucher" />
					</viewer>
					<!-- <el-col
						:span="3"
						v-for="(item, index) in arrivalPicList"
						:key="index"
						:offset="index%6 > 0 ? 1 : 0"
						style="margin-bottom:10px"
					>
						<el-card>
							<img :src="item" class="image" />
						</el-card>
					</el-col> -->
				</el-row>
				<hr />
				<el-row>
					<el-col :span="8">
						<el-form-item label="审核人操作">
							<span>{{detailItem.reviewerNameApply}}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="通过操作">
							<span></span>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button v-if="detailItem.status==1" @click="handleReject(detailItem)">驳回</el-button>
				<el-button v-if="detailItem.status==1" type="primary" @click="handleProve(detailItem)">通过</el-button>
			</div>
		</el-dialog>

		<!-- 更改还车地点 -->
		<div class="modal_modal" v-show="resetReturn"></div>
		<el-dialog title="更改还车地点" :visible.sync="resetReturn" :append-to-body="true" :modal="false">
			<el-form :model="returnForm" ref="returnForm" label-width="90px">
				<el-form-item label="还车地点:" prop="retCompany">
					<el-select clearable v-model="returnForm.retCompany" filterable placeholder="请选择/搜索还车地点">
						<el-option v-for="item in allCompaniesArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-button style="margin-top:20px" type="primary" @click="confirm('returnForm')">确定</el-button>
			</el-form>
		</el-dialog>

		<el-dialog title="驳回" :visible.sync="rejectVisible">
			<el-form :model="rejectFrom" :rules="rejectRules" ref="rejectDialogFrom" label-width="80px">
				<el-form-item label="驳回理由" prop="rejectRemark">
					<el-input type="textarea" v-model="rejectFrom.rejectRemark" placeholder="请输入驳回理由"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="rejectBtn('rejectDialogFrom')">确 定</el-button>
			</div>
		</el-dialog>

		<!--     出车对话框相关html元素  -->
		<el-dialog title="出车" :visible.sync="dialogForm4LiftVisible">
			<el-form
					:model="departureForm"
					:rules="departureFormrules"
					ref="departureForm"
					label-width="120px"
			>
				<el-form-item label="车牌号">
					<el-input v-model="departureForm.numberPlate" disabled></el-input>
				</el-form-item>
				<el-form-item label="出车时间">
					<el-date-picker
							v-model="departureForm.departureDate"
							type="date"
							disabled
							format="yyyy-MM-dd"
							placeholder="选择日期"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="出车分公司">
					<el-autocomplete
							class="inline-input"
							v-model="departureForm.departureBranchCompanyName"
							:fetch-suggestions="querySearch"
							placeholder="请输入内容"
							disabled
					></el-autocomplete>
				</el-form-item>
				<el-form-item label="目的地分公司" prop="expectArrivalBranchCompanyName">
					<el-autocomplete
							class="inline-input"
							v-model="departureForm.expectArrivalBranchCompanyName"
							:fetch-suggestions="querySearch"
							placeholder="请输入内容"
							disabled
					></el-autocomplete>
				</el-form-item>
				<el-form-item label="用途">
					<el-input v-model="departureForm.use" placeholder="请输入出车用途" disabled></el-input>
				</el-form-item>
				<el-form-item label="使用人">
					<el-input v-model="departureForm.user" placeholder="请输入出车使用人" disabled></el-input>
				</el-form-item>
				<el-form-item label="使用人联系方式">
					<el-input v-model="departureForm.userTel" placeholder="请输入出车使用人联系方式" disabled></el-input>
				</el-form-item>
				<el-form-item label="验车人" prop="checkMan">
					<el-input v-model="departureForm.checkMan" placeholder="请输入出车验车人"></el-input>
				</el-form-item>
				<el-form-item label="验车人联系方式" prop="checkManTel">
					<el-input v-model="departureForm.checkManTel" placeholder="请输入出车验车人联系方式"></el-input>
				</el-form-item>
				<el-form-item label="公里数" prop="mileage">
					<el-input v-model.number="departureForm.mileage" placeholder="请输入出车时公里数"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="departureForm.remark" placeholder="请输入备注"></el-input>
				</el-form-item>
				<el-row>
					<el-col>
						<el-form-item label="出车截图" :style="{display:'block'}" required>
							<el-upload
									class="upload-demo"
									:headers="getHeaderWithToken"
									:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
									:on-remove="handleDepartureRemove"
									:file-list="departurePicList"
									:on-success="handleDepartureSuccess"
									list-type="picture-card"
							>
								<i class="el-icon-plus"></i>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelDialog4Lift('departureForm')">取 消</el-button>
				<el-button type="primary" @click="liftOk('departureForm')">确 定</el-button>
			</div>
		</el-dialog>

		<!--     提车对话框相关html元素  -->
		<el-dialog title="收车" :visible.sync="dialogForm4RetVisible">
			<el-form :model="arrivalForm" :rules="arrivalFormrules" 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="收车时间">
					<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="还车分公司">
					<el-autocomplete
							class="inline-input"
							v-model="arrivalForm.arrivalBranchCompanyName"
							:fetch-suggestions="querySearch"
							placeholder="请输入内容"
							disabled
					></el-autocomplete>
				</el-form-item>
				<el-form-item label="收车人" prop="recycleMan">
					<el-input v-model="arrivalForm.recycleMan" placeholder="请输入收车人"></el-input>
				</el-form-item>
				<el-form-item label="收车人联系方式" prop="recycleManTel">
					<el-input v-model="arrivalForm.recycleManTel" placeholder="请输入收车人联系方式"></el-input>
				</el-form-item>
				<el-form-item label="公里数" prop="mileage">
					<el-input v-model.number="arrivalForm.mileage" placeholder="请输入收车时公里数"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="departureForm.remark" placeholder="请输入备注"></el-input>
				</el-form-item>
				<el-row>
					<el-col>
						<el-form-item label="收车截图" :style="{display:'block'}" required>
							<el-upload
									class="upload-demo"
									:headers="getHeaderWithToken"
									:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
									:on-remove="handleArrivalRemove"
									:file-list="arrivalPicList"
									:on-success="handleArrivalSuccess"
									list-type="picture-card"
							>
								<i class="el-icon-plus"></i>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelDialog4Ret('form')">取 消</el-button>
				<el-button type="primary" @click="ret('form')">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="违章查询" :visible.sync="illegalVisible">
			<el-form>
				<el-row>
					<el-col>
						<el-form-item label="违章截图" :style="{display:'block'}">
							<el-upload
									class="upload-demo"
									:headers="getHeaderWithToken"
									:action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
									:on-remove="handleRemove"
									:file-list="fileList2"
									:on-success="handleSuccess"
									list-type="picture-card"
							>
								<i class="el-icon-plus"></i>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col>
						<el-form-item label="违章罚款">
							<el-input
									v-model="price"
									type="number"
									placeholder="请输入违章罚款金额"
									style="width: 50%;margin-right:10px"
							></el-input>元
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="okHandler('form')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		page,
		prove,
		reject,
		getObj,
		lift,
		ret,
		unbook,
		getOneIllegalRow,
		saveOrderViolation,
		departureVehicle,
		arrivalVehicle
	} from 'api/vehicle/bookRecord'

	import {
		getAllCompany,
		getAll,
		updateById
	} from 'api/base_info/branch_company/'
	import { getAllZone } from 'api/base_info/constant/'
	import { getAllBranchCompanyByZoneId } from 'api/order/rentVehicle'
	import { formatDate } from 'utils/dateFormattor'

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

	import { mapGetters } from 'vuex'

	import { toEast8Date, deepCopyDate, newEast8Date } from 'utils/dateUtils'
	import { getToken } from '../../../utils/auth'
	import {
		BOOK_RECORD_STATUS_APPLY,
		BOOK_RECORD_STATUS_PROVED,
		BOOK_RECORD_STATUS_LIFT
	} from '../../../store/modules/baseInfo'

	import bookInfoViewer from '../bookInfoViewer'
	import accItemSelector from '../accompanyingItem/accItemSelector.vue'

	export default {
		name: 'bookRecord',
		components: {
			bookInfoViewer,
			accItemSelector
		},
		data() {
			return {
				returnForm: {
					retCompany: ''
				},
				allCompaniesArr: [],
				resetReturn: false, //更改换成地点loading
				rejectVisible: false,
				rejectFrom: {
					vehicleBookRecordId: '',
					rejectRemark: ''
				},
				rejectRules: {
					rejectRemark: {
						type: 'string',
						required: true,
						message: '请输入拒绝原因',
						trigger: 'blur'
					}
				},
				BASE_API: process.env.BASE_API,
				departureFormrules: {
					checkMan: {
						required: true,
						message: '请输入验车人',
						trigger: 'blur'
					},
					checkManTel: [
						{
							required: true,
							message: '请输入验车人联系方式',
							trigger: 'blur'
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: '请输入正确的手机号'
						}
					],
					mileage: {
						type: 'number',
						required: true,
						message: '请输入公里数',
						trigger: 'blur'
					}
				},
				departureForm: {
					vehicleId: null,
					departureBranchCompanyId: null, //出发地分公司id
					departureBranchCompanyName: '', //出发地分公司名称
					use: null,
					user: null,
					userTel: null,
					checkMan: null,
					checkManTel: null,
					mileage: null,
					numberPlate: null,
					expectArrivalBranchCompanyId: null, //目的地分公司id
					expectArrivalBranchCompanyName: '', //目的地分公司名称
					bookRecordId: null,
					departurePic: '',
					remark: null,
					bookStartDate: null
				},
				departurePicList: [],
				arrivalPicList: [],
				arrivalForm: {
					vehicleId: null,
					numberPlate: null,
					arrivalDate: null,
					recycleMan: null,
					recycleManTel: null,
					mileage: null,
					arrivalBranchCompanyId: null,
					arrivalBranchCompanyName: '',
					arrivalPic: '',
					remark: '',
					bookRecordId: null
				},
				arrivalFormrules: {
					recycleMan: {
						required: true,
						message: '请输入收车人',
						trigger: 'blur'
					},
					recycleManTel: [
						{
							required: true,
							message: '请输入收车人联系方式',
							trigger: 'blur'
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: '请输入正确的手机号'
						}
					],
					mileage: {
						type: 'number',
						required: true,
						message: '请输入收车公里数',
						trigger: 'blur'
					}
				},
				statusList: [
					{
						code: '1',
						val: '申请中'
					},
					{
						code: '3',
						val: '待出行'
					},
					{
						code: '4',
						val: '驳回'
					},
					{
						code: '5',
						val: '出行中'
					},
					{
						code: '6',
						val: '取消预订'
					},
					{
						code: '7',
						val: '已完成'
					}
				],
				activeId: '',
				bookTypeList: [
					{
						id: '1',
						name: '租车'
					},
					{
						id: '2',
						name: '用户租赁'
					},
					{
						id: '3',
						name: '维修'
					},
					{
						id: '4',
						name: '展览'
					},
					{
						id: '5',
						name: '旅游'
					},
					{
						id: '6',
						name: '保养'
					},
					{
						id: '7',
						name: '预约中'
					},
					{
						id: '8',
						name: '禁用'
					},
					{
						id: '9',
						name: '客户用车'
					},
					{
						id: '10',
						name: '其他'
					}
				],
				detailId: '',
				illegalVisible: false,
				price: undefined, //违章罚款金额
				fileList2: [], //违章截图
				detailItem: {},
				dialogDetailVisible: false,
				baranchQuery: {
					zoneId: null
				},
				allZoneArr: [], //全部片区
				allBranchCompany: [],
				state2: '', //搜索-分公司名称
				rules4Query: {},
				list: null,
				total: null,
				listLoading: true,
				listQuery: {
					page: 1,
					limit: 20,
					flag: false,
					zoneId: undefined,
					liftCompany: undefined,
					liftCompanyName: "",
					numberPlate: undefined,
					selectedMonth: undefined,
					status: undefined,
					bookType: undefined,
					bookStartDate: undefined,
					bookEndDate: undefined
				},
				inline: true,
				dialogFormVisible: false,
				dialogStatus: '',
				bookRecord_btn_prove: false,
				bookRecord_btn_unbook: false,
				bookRecord_btn_reject: false,
				bookRecord_btn_lift: false,
				bookRecord_btn_ret: false,
				dialogForm4LiftVisible: false,
				dialogForm4RetVisible: false,
				allCompanies: {},
				tableKey: 0,
				form4Lift: {
					state1: '',
					id: undefined,
					mileageLift: undefined,
					liftCompany: undefined,
					liftRemark: undefined
				},
				rules4Lift: {
					liftCompany: [
						{
							required: true,
							message: '请选择提车分公司',
							trigger: 'blur',
							type: 'integer'
						}
					],
					mileageLift: [
						{
							required: true,
							message: '请输入当前里程数',
							trigger: 'blur',
							type: 'integer'
						},
						{
							validator: (rule, value, callback) => {
								if (
										this.$utils.isUndefined(value) ||
										this.$utils.isNull(value)
								) {
									return callback()
								}
								if (!this.$utils.isInteger(value)) {
									return callback(new Error('里程数必须为整数'))
								}
								if (value < 0 || value > 9999999999) {
									return callback(
											new Error(
													'里程数合法范围：[0 - 9999999999]'
											)
									)
								}
								callback()
							},
							trigger: 'blur'
						}
					],
					retRemark: [
						{
							min: 0,
							max: 2000,
							message: '长度小于 2000 个字符',
							trigger: 'blur'
						}
					]
				},
				form4Ret: {
					id: undefined,
					mileageRet: undefined,
					haveViolation: undefined,
					retCompany: undefined,
					retRemark: undefined
				},
				rules4Ret: {
					retCompany: [
						{
							required: true,
							message: '请选择提车分公司',
							trigger: 'blur',
							type: 'integer'
						}
					],
					mileageRet: [
						{
							required: true,
							message: '请输入当前里程数',
							trigger: 'blur',
							type: 'integer'
						},
						{
							validator: (rule, value, callback) => {
								if (
										this.$utils.isUndefined(value) ||
										this.$utils.isNull(value)
								) {
									return callback()
								}
								if (!this.$utils.isInteger(value)) {
									return callback(new Error('里程数必须为整数'))
								}
								if (value < 0 || value > 9999999999) {
									return callback(
											new Error(
													'里程数合法范围：[0 - 9999999999]'
											)
									)
								}
								callback()
							},
							trigger: 'blur'
						}
					],
					retRemark: [
						{
							min: 0,
							max: 2000,
							message: '长度小于 2000 个字符',
							trigger: 'blur'
						}
					]
				},
				selectedAccItem: undefined
			}
		},
		created() {
			let t = this;
			getAll().then(response => {
				this.allCompaniesArr = response.data;
				let query =  localStorage.getItem("bookRecord");
				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.flag){
						t.listQuery.flag = queryJson.flag;
					}
					if(queryJson.zoneId){
						t.listQuery.zoneId = queryJson.zoneId;
					}
					if(queryJson.liftCompany){
						t.listQuery.liftCompany = queryJson.liftCompany;
					}
					if(queryJson.liftCompanyName){
						t.listQuery.liftCompanyName = queryJson.liftCompanyName;
					}
					if(queryJson.numberPlate){
						t.listQuery.numberPlate = queryJson.numberPlate;
					}
					if(queryJson.selectedMonth){
						t.listQuery.selectedMonth = queryJson.selectedMonth;
					}
					if(queryJson.status){
						t.listQuery.status = queryJson.status;
					}
					if(queryJson.bookType){
						t.listQuery.bookType = queryJson.bookType;
					}
//          if(queryJson.liftCompany){
//            t.allCompaniesArr.map(function (item) {
//              if(item.id == queryJson.liftCompany){
//                t.listQuery.liftCompanyName = item.name;
//              }
//            });
//          }
				}
				this.getList()
			});
			getAllCompany(codeAndBranchCompany => {
				//初始化公司列表
				this.allCompanies = codeAndBranchCompany
			});
			this.bookRecord_btn_prove = this.elements['bookRecord:btn_prove']
			this.bookRecord_btn_reject = this.elements['bookRecord:btn_reject']
			this.bookRecord_btn_unbook = this.elements['bookRecord:btn_unbook']
			this.bookRecord_btn_lift = this.elements['bookRecord:btn_lift']
			this.bookRecord_btn_ret = this.elements['bookRecord:btn_ret']
		},
		computed: {
			...mapGetters(['elements', 'bookRecordStatus']),
			getHeaderWithToken() {
				return { Authorization: getToken() }
			},
			//获取大区列表
			getAllZoneList() {
				return getAllZone()
			},
			selectedMonth4Query: {
				get: function() {
					if (
							this.$utils.isString(this.listQuery.selectedMonth) &&
							this.listQuery.selectedMonth !== ''
					) {
						return toEast8Date(this.listQuery.selectedMonth)
					}
					return undefined
				},
				set: function(date) {
					if (this.$utils.isDate(date)) {
						this.listQuery.selectedMonth = formatDate(date, 'yyyy-MM')
					} else {
						this.listQuery.selectedMonth = undefined
					}
				}
			},
			bookStartDate4Query: {
				get: function() {
					if (
							this.$utils.isString(this.listQuery.bookStartDate) &&
							this.listQuery.bookStartDate !== ''
					) {
						return toEast8Date(this.listQuery.bookStartDate)
					}
					return undefined
				},
				set: function(date) {
					if (this.$utils.isDate(date)) {
						this.listQuery.bookStartDate = formatDate(date, 'yyyy-MM')
					} else {
						this.listQuery.bookStartDate = undefined
					}
				}
			},
			bookEndDate4Query: {
				get: function() {
					if (
							this.$utils.isString(this.listQuery.bookEndDate) &&
							this.listQuery.bookEndDate !== ''
					) {
						return toEast8Date(this.listQuery.bookEndDate)
					}
					return undefined
				},
				set: function(date) {
					if (this.$utils.isDate(date)) {
						this.listQuery.bookEndDate = formatDate(date, 'yyyy-MM')
					} else {
						this.listQuery.bookEndDate = undefined
					}
				}
			}
		},
		methods: {
			/**
			 * 重置
			 * */
			reloadPage() {
				this.listQuery = {
					page: 1,
					limit: 20,
					flag: false,
					zoneId: undefined,
					liftCompany: undefined,
					liftCompanyName: "",
					numberPlate: undefined,
					selectedMonth: undefined,
					status: undefined,
					bookType: undefined,
					bookStartDate: undefined,
					bookEndDate: undefined
				};
				if(this.listQuery){
					localStorage.setItem("bookRecord", JSON.stringify(this.listQuery));
				}
				this.getList();
			},
			confirm() {
				if (this.returnForm.retCompany == '') {
					this.$notify({
						title: '失败',
						message: '还车地点不能为空',
						type: 'error',
						duration: 2000
					})
				} else {
					this.returnForm.id = this.activeId
					updateById(this.returnForm).then(data => {
						if (data.status == 200) {
							this.$notify({
								title: '成功',
								message: '修改还车地点成功',
								type: 'success',
								duration: 2000
							})
							this.resetReturn = false;
							this.dialogDetailVisible = false;
							this.getList();
						} else {
							this.$notify({
								title: '失败',
								message: data.message,
								type: 'error',
								duration: 2000
							})
						}
					})
				}
			},
			/**
			 * 确定
			 * */
			okHandler() {
				let arr = []
				this.fileList2.map(function(item) {
					arr.push(item.url)
				})
				let params = {
					illegalPic: arr.join(','),
					illegalAmount: this.price,
					id: this.detailId
				}
				saveOrderViolation(params).then(response => {
					if (response.status === 200) {
						this.$notify({
							title: '成功',
							message: '创建成功',
							type: 'success',
							duration: 2000
						})
						this.illegalVisible = false
						this.getList()
					} else {
						this.$notify({
							title: '创建失败',
							message: '操作失败！',
							type: 'error',
							duration: 2000
						})
					}
				})
			},
			/**
			 * 上传成功
			 * */
			handleSuccess(res, file) {
				let c = { url: res.data }
				this.fileList2.push(c)
				this.showLoadingBody = false
			},
			/**
			 * 删除违章图片
			 * */
			handleRemove(file, fileList1) {
				this.fileList2 = fileList1
			},
			/**
			 * 出车上传成功
			 * */
			handleDepartureSuccess(res, file) {
				let c = { url: res.data }
				this.departurePicList.push(c)
				this.showLoadingBody = false
			},
			/**
			 * 删除出车图片
			 * */
			handleDepartureRemove(file, fileList2) {
				this.departurePicList = fileList2
			},
			/**
			 * 上传成功
			 * */
			handleArrivalSuccess(res, file) {
				let c = { url: res.data }
				this.arrivalPicList.push(c)
				this.showLoadingBody = false
			},
			/**
			 * 删除违章图片
			 * */
			handleArrivalRemove(file, fileList3) {
				this.arrivalPicList = fileList3
			},
			/**
			 * 操作-违章查询按钮，显示违章弹框
			 */
			illegalInquiry(row) {
				var t = this
				this.fileList2 = []
				this.price = ''
				if (row.vehicleDepartureLogVo.illegalPic) {
					let arr = row.vehicleDepartureLogVo.illegalPic.split(',')
					let fileList2 = []
					let p = {}
					arr.map(function(item) {
						p = {
							url: item
						}
						fileList2.push(p)
					})
					t.fileList2 = fileList2
				}
				if (row.vehicleDepartureLogVo.illegalAmount) {
					t.price = parseFloat(row.vehicleDepartureLogVo.illegalAmount)
				}
				this.detailId = row.vehicleDepartureLogVo.id
				this.illegalVisible = true
			},
			/**
			 * 弹框-取消
			 * */
			cancel() {
				this.illegalVisible = false
			},
			handleDetail(row) {
				this.activeId = row.id
				var t = this
				this.detailItem = row
				if (row.vehicleDepartureLogVo != undefined) {
					if (
							row.vehicleDepartureLogVo.departurePic != undefined &&
							row.vehicleDepartureLogVo.departurePic != ''
					) {
						let arr = row.vehicleDepartureLogVo.departurePic.split(',')
						let departurePicList = []
						let p = {}
						arr.map(function(item) {
							departurePicList.push(item)
						})
						t.departurePicList = departurePicList
					} else {
						t.departurePicList = []
					}
					if (
							row.vehicleDepartureLogVo.arrivalPic != undefined &&
							row.vehicleDepartureLogVo.arrivalPic != ''
					) {
						let Arr = row.vehicleDepartureLogVo.arrivalPic.split(',')
						let arrivalPicList = []
						let p = {}
						Arr.map(function(item) {
							arrivalPicList.push(item)
						})
						t.arrivalPicList = arrivalPicList
					} else {
						t.arrivalPicList = []
					}
				} else {
					t.departurePicList = []
					t.arrivalPicList = []
				}
				this.dialogDetailVisible = true
			},
			//监听change事件
			getProvinceRegions(item) {
				this.listQuery.zoneId = item
				this.baranchQuery.zoneId = item
//			this.listQuery.liftCompany = undefined
//			getAllBranchCompanyByZoneId(this.baranchQuery).then(response => {
//				this.allBranchCompany = response.data
//			})
			},
			getAllBranchCompanyChange(item) {
				this.listQuery.liftCompany = item
			},
			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)
			},
			createFilter(queryString) {
				return restaurant => {
					return restaurant.name.indexOf(queryString.toLowerCase()) != -1
				}
			},
			/**
			 * 提车分公司
			 * */
			handleSelect(item) {
				if (item.value == "全部") {
					this.listQuery.liftCompany = undefined;
				} else {
					this.listQuery.liftCompany = item.id;
				}
			},
			cancelDialog4Lift(formName) {
				this.dialogForm4LiftVisible = false
				this.$refs[formName].resetFields()
			},
			cancelDialog4Ret(formName) {
				this.dialogForm4RetVisible = false
				this.$refs[formName].resetFields()
			},
			/**
			 * 出车弹框-确定
			 * */
			liftOk(formName) {
				const set = this.$refs
				set[formName].validate(valid => {
					if (valid) {
						if (Number(this.departureForm.mileage) > 999999) {
							this.$notify({
								title: '警告',
								message: '公里数不能大于999999',
								type: 'warning',
								duration: 2000
							})
							return false
						}
						var arr = []
						this.departurePicList.map(function(item) {
							arr.push(item.url)
						})
						this.departureForm.departurePic = arr.join(',')
						departureVehicle(this.departureForm).then(response => {
							if (response.status == 200) {
								this.dialogForm4LiftVisible = false
								this.$notify({
									title: '成功',
									message: '出车成功',
									type: 'success',
									duration: 2000
								})
								this.cleanDepartureForm()
								this.getList()
							} else {
								this.$notify({
									title: '失败',
									message: response.message,
									type: 'error',
									duration: 2000
								})
							}
						})
					} else {
						return false
					}
				})
			},
			handleBookInfo(row) {
				this.$refs.bookInfoViewer.handleBookInfo(row.vehicle)
			},
			handleAccItemInfo(row) {
				this.selectedAccItem = row.accItemAndAmount
				this.$refs.accItemSelector.show()
			},
			checkIfBooked(bookedDate, [startDateStr, endDateStr]) {
				if (
						this.$utils.isInteger(bookedDate) &&
						this.$utils.isString(startDateStr) &&
						startDateStr !== '' &&
						this.$utils.isString(endDateStr) &&
						endDateStr !== ''
				) {
					let startDate = toEast8Date(startDateStr)
					let endDate = toEast8Date(endDateStr)
					for (
							;
							this.$utils.toDateString(startDate, 'yyyy-MM-dd') <=
							this.$utils.toDateString(endDate, 'yyyy-MM-dd');
							startDate.setDate(startDate.getDate() + 1)
					) {
						if ((bookedDate & (1 << (startDate.getDate() - 1))) !== 0) {
							return true
						}
					}
				}
				return false
			},
			checkIfApply(code) {
				return code === BOOK_RECORD_STATUS_APPLY
			},
			checkIfProved(code) {
				return code === BOOK_RECORD_STATUS_PROVED
			},
			checkIfLift(code) {
				return code === BOOK_RECORD_STATUS_LIFT
			},
			getList() {
				this.listLoading = true
				for (var key in this.listQuery) {
					if (this.listQuery[key] === '') {
						this.listQuery[key] = undefined
					}
				}
				page(this.listQuery).then(response => {
					this.list = response.data.data
					this.total = response.data.totalCount
					this.listLoading = false
				})
			},
			getBookRecordStatus: function(data) {
				this.bookRecordStatus['3'].val = '待出行'
				this.bookRecordStatus['4'].val = '驳回'
				this.bookRecordStatus['5'].val = '出行中'
				this.bookRecordStatus['7'].val = '已完成'
				if (data) {
					if (!this.$utils.isInteger(data.status)) {
						return '未知'
					}
					if (
							data.status == 2 &&
							(data.vehicleDepartureLogVo == undefined ||
									data.vehicleDepartureLogVo == null)
					) {
						return this.bookRecordStatus['3'].val
					}
					if (
							data.status == 2 &&
							data.vehicleDepartureLogVo != undefined &&
							data.vehicleDepartureLogVo != null &&
							data.vehicleDepartureLogVo.state == 0
					) {
						return this.bookRecordStatus['5'].val
					}
					if (
							data.status == 2 &&
							data.vehicleDepartureLogVo != undefined &&
							data.vehicleDepartureLogVo != null &&
							data.vehicleDepartureLogVo.state == 1
					) {
						return this.bookRecordStatus['7'].val
					}
					return this.bookRecordStatus[data.status + ''].val
				}
				return ''
			},
			getAllBookRecordStatus: function() {
				console.log(this.bookRecordStatus)

				return this.bookRecordStatus
			},
			getDatePeriodStr([startDate, endDate]) {
				if (
						this.$utils.isString(startDate) &&
						startDate !== '' &&
						this.$utils.isString(endDate) &&
						endDate !== ''
				) {
					return (
							formatDate(toEast8Date(startDate), 'yyyy-MM-dd') +
							' 至 ' +
							formatDate(toEast8Date(endDate), 'yyyy-MM-dd')
					)
				}
				return '未知'
			},
			/**
			 * 清空出车弹框数据
			 */
			cleanDepartureForm() {
				this.departureForm = {
					vehicleId: null,
					departureBranchCompanyId: null, //出发地分公司id
					departureBranchCompanyName: '', //出发地分公司名称
					use: null,
					user: null,
					userTel: null,
					checkMan: null,
					checkManTel: null,
					mileage: null,
					numberPlate: null,
					expectArrivalBranchCompanyId: null, //目的地分公司id
					expectArrivalBranchCompanyName: '', //目的地分公司名称
					bookRecordId: null,
					departurePic: '',
					remark: null,
					bookStartDate: null
				}
			},
			cleanArrivalForm() {
				this.arrivalForm = {
					vehicleId: null,
					numberPlate: null,
					arrivalDate: null,
					recycleMan: null,
					recycleManTel: null,
					mileage: null,
					arrivalBranchCompanyId: null,
					arrivalBranchCompanyName: '',
					arrivalPic: '',
					remark: '',
					bookRecordId: null
				}
			},
			/**
			 * 搜索按钮
			 * */
			handleFilter() {
				this.listQuery.page = 1
				this.$refs.queryForm.validate(valid => {
					if (valid) {
						if(this.listQuery){
							localStorage.setItem("bookRecord", JSON.stringify(this.listQuery));
						}
						this.getList()
					} else {
						return false
					}
				})
			},
			handleSizeChange(val) {
				this.listQuery.limit = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.listQuery.page = val
				this.getList()
			},
			handleProve(row) {
				this.$confirm('确定批准申请?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					prove(row.id).then(response => {
						if (
								response.code ===
								rsCode.code.VEHICLE_BOOKED_INFO_ALREADY_CHANGED
						) {
							this.$notify({
								title: '失败',
								message:
										rsCode.msg[
												rsCode.code
														.VEHICLE_BOOKED_INFO_ALREADY_CHANGED
												],
								type: 'error',
								duration: 2000
							})
						} else if (
								response.code ===
								rsCode.code.VEHICLE_BOOKED_RECORD_ALREADY_CHANGED
						) {
							this.$notify({
								title: '失败',
								message:
										rsCode.msg[
												rsCode.code
														.VEHICLE_BOOKED_RECORD_ALREADY_CHANGED
												],
								type: 'error',
								duration: 2000
							})
						} else if (response.code === rsCode.RS_CODE_SUC) {
							this.$notify({
								title: '成功',
								message: '操作成功',
								type: 'success',
								duration: 2000
							})
							if (this.dialogDetailVisible) {
								this.dialogDetailVisible = false
							}
						}
						this.getList()
					})
				})
			},
			rejectBtn(formName) {
				const set = this.$refs
				set[formName].validate(valid => {
					if (valid) {
						reject(this.rejectFrom).then(response => {
							if (response.code == 1) {
								this.$notify({
									title: '成功',
									message: '操作成功',
									type: 'success',
									duration: 2000
								})
								this.getList()
								if (this.rejectVisible) {
									this.rejectVisible = false
								}
								if (this.dialogDetailVisible) {
									this.dialogDetailVisible = false
								}
							} else {
								this.$notify({
									title: '失败',
									message: response.message,
									type: 'error',
									duration: 2000
								})
							}
						})
					} else {
						return false
					}
				})
			},
			handleReject(row) {
				this.rejectVisible = true
				this.rejectFrom.vehicleBookRecordId = row.id
				this.rejectFrom.rejectRemark = ''
			},
			/**
			 * 操作-出车
			 * @param row
			 */
			handleLift(row) {
				this.cleanDepartureForm()
				this.departurePicList = []
				if (row.bookType == 1) {
					this.departureForm.use = '租车'
				} else if (row.bookType == 2) {
					this.departureForm.use = '用户租赁'
				} else if (row.bookType == 3) {
					this.departureForm.use = '维修'
				} else if (row.bookType == 4) {
					this.departureForm.use = '展览'
				} else if (row.bookType == 5) {
					this.departureForm.use = '旅游'
				} else if (row.bookType == 6) {
					this.departureForm.use = '保养'
				} else if (row.bookType == 7) {
					this.departureForm.use = '预约中'
				} else if (row.bookType == 8) {
					this.departureForm.use = '禁用'
				} else if (row.bookType == 9) {
					this.departureForm.use = '客户用车'
				} else if (row.bookType == 10) {
					this.departureForm.use = '其他'
				}
				this.departureForm.bookRecordId = row.id
				this.departureForm.vehicleId = row.vehicleId
				this.departureForm.numberPlate = row.numberPlate
				this.departureForm.departureDate = Date()
				this.departureForm.departureBranchCompanyId = row.liftCompany
				this.departureForm.departureBranchCompanyName = row.liftCompanyName
				this.departureForm.user = row.vehicleUsername
				this.departureForm.userTel = row.vehicleUserPhone
				// if(row.vehicleDepartureLogVo!=undefined){
				//   this.departureForm.user = row.vehicleDepartureLogVo.user?row.vehicleDepartureLogVo.user:''
				//   this.departureForm.userTel = row.vehicleDepartureLogVo.userTel?row.vehicleDepartureLogVo.userTel:''
				// }else{
				//   this.departureForm.user = ''
				//   this.departureForm.userTel = ''
				// }
				this.departureForm.expectArrivalBranchCompanyId = row.retCompany
				this.departureForm.expectArrivalBranchCompanyName =
						row.retCompanyName
				this.dialogForm4LiftVisible = true
			},
			/**
			 * 操作-收车
			 * @param row
			 */
			handleRet(row) {
				this.arrivalPicList = []
				this.arrivalForm.bookRecordId = row.id
				this.arrivalForm.vehicleId = row.vehicleId
				this.arrivalForm.numberPlate = row.numberPlate
				this.arrivalForm.arrivalDate = Date()
				this.arrivalForm.arrivalBranchCompanyId = row.retCompany
				this.arrivalForm.arrivalBranchCompanyName = row.retCompanyName
				this.dialogForm4RetVisible = true
			},
			ret(formName) {
				const set = this.$refs
				set[formName].validate(valid => {
					if (valid) {
						if (Number(this.arrivalForm.mileage) > 999999) {
							this.$notify({
								title: '警告',
								message: '公里数不能大于999999',
								type: 'warning',
								duration: 2000
							})
							return false
						}
						var arr = []
						this.arrivalPicList.map(function(item) {
							arr.push(item.url)
						})
						this.arrivalForm.arrivalPic = arr.join(',')
						arrivalVehicle(this.arrivalForm).then(response => {
							if (response.status == 200) {
								this.dialogForm4RetVisible = false
								this.$notify({
									title: '成功',
									message: '收车成功',
									type: 'success',
									duration: 2000
								})
								this.cleanArrivalForm()
								this.getList()
							} else {
								this.$notify({
									title: '失败',
									message: response.message,
									type: 'error',
									duration: 2000
								})
							}
						})
					} else {
						return false
					}
				})
			},
			handleUnbook(row) {
				this.$confirm('确定取消预定?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var obj = {
						vehicleBookRecordId: row.id
					}

					unbook(obj)
							.then(response => {
								if (response.code == 1) {
									this.$notify({
										title: '成功',
										message: '操作成功',
										type: 'success',
										duration: 2000
									})
									this.getList()
								} else {
									this.$notify({
										title: '失败',
										message: response.message,
										type: 'error',
										duration: 2000
									})
								}
							})
							.catch(response => {
								console.log(response)
							})
				})
			}
		}
	}
</script>

<style scoped>
	.order-details .el-form-item {
		margin-bottom: 0px !important;
	}
	.order-details hr {
		height: 1px;
		background-color: #ccc;
		border: none;
	}
	.image {
		width: 100%;
		height: 110px;
		display: block;
	}
	.el-card__body,
	.el-card {
		padding: 0px !important;
		width: 150px;
		text-align: center;
	}
	.modal_modal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0.5;
		background: #000;
		z-index: 2001;
	}
</style>
