<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-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-form-item label="车辆编码">
						<el-input type="number" v-model.number="listQuery.code" placeholder="请输入车辆编码"></el-input>
					</el-form-item>
					<el-form-item label="车牌号">
						<el-input v-model="listQuery.numberPlate" 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, 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 :span="5"></el-col>
					<el-col :span="5"></el-col>
					<el-col :span="5"></el-col>
					<el-col :span="5"></el-col> -->
				</el-row>
				<el-row>
					<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-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-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-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 :span="5"></el-col>
					<el-col :span="5"></el-col>
					<el-col :span="5"></el-col>
					<el-col :span="5"></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 slot-scope="scope">
					<span>{{scope.row.numberPlate}}</span>
				</template>
			</el-table-column>

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

			<el-table-column align="center" label="使用人/联系方式">
				<template slot-scope="scope">
					<span>{{scope.row.vehicleUsername}}/{{scope.row.vehicleUserPhone}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="出车用途" width="120">
				<template slot-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>
					<span v-if="scope.row.bookType==11">调度</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="预定取/还时间" width="200">
				<template slot-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 slot-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 slot-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 slot-scope="scope">-->
			<!--          <span>{{scope.row.liftAddr}}</span>-->
			<!--        </template>-->
			<!--      </el-table-column>-->

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

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

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

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

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

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


      <el-table-column align="center" label="随车物品" width="120">
        <template slot-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 slot-scope="scope">
          <span>{{scope.row.mileageLift}}</span>
        </template>
      </el-table-column>

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

      <el-table-column width="65" align="center" label="是否违章">
        <template slot-scope="scope">
          <span>{{scope.row.haveViolation?'是':'否'}}</span>
        </template>
			</el-table-column>-->
			<el-table-column align="center" label="详情" width="100" fixed="right">
				<template slot-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 slot-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&&scope.row.bookType !=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&&scope.row.bookType !=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&&scope.row.bookType !=1"
							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&&scope.row.bookType !=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&&scope.row.bookType !=1"
							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: '其他'
				},
				{
					id: '11',
					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;
}
.voucher {
	width: 100px;
	height: 100px;
}
</style>
