<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container" ref="filter-container">
			<el-form ref="queryForm" :model="listQuery" label-width="100px">
				<el-row>
					<el-col :span="5">
						<el-form-item label="所属地区" prop="zoneId">
							<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="startCompanyId">
							<el-select
								class="filter-item"
								v-model="listQuery.startCompanyId"
								placeholder="请选择"
								@change="getAllBranchCompanyChange"
							>
								<el-option :key="undefined" label="无" :value="undefined"></el-option>
								<el-option v-for="val in allBranchCompany" :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 v-model="listQuery.phone" placeholder="请输入手机号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="姓名">
							<el-input v-model="listQuery.realName" placeholder="请输入客户姓名"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="5">
						<el-form-item label="车牌号">
							<el-input v-model="listQuery.plateNumber" placeholder="请输入车牌号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="订单号">
							<el-input v-model="listQuery.no" 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="请选择状态">
								<!--"0--删除"+"1--创建订单" +"2--取消" +"3--待付款" +"4--待出行" +"5--出行中（进行中）" +"6--已完成"-->
								<el-option :key="null" label="全部订单" :value="null"></el-option>
								<el-option :key="3" label="待付款" :value="3"></el-option>
								<el-option :key="4" label="待出行" :value="4"></el-option>
								<el-option :key="5" label="出行中" :value="5"></el-option>
								<el-option :key="6" label="已完成" :value="6"></el-option>
								<el-option :key="2" label="已取消" :value="2"></el-option>
								<el-option :key="-1" label="定损中" :value="-1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="车辆编号">
							<el-input v-model="listQuery.vehicleCode" placeholder="请输入车辆编号"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
			<el-button class="filter-item" type="primary" v-waves icon="delete" @click="clearSearch">清除搜索</el-button>
		</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="ID" width="70">
				<template scope="scope">
					<span>{{scope.row.id}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200" align="center" label="订单号/下单时间">
				<template scope="scope">
					<span>{{scope.row.no}}</span>
					<br />
					<span>{{scope.row.crtTime}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="订单状态" width="100" align="center">
				<template scope="scope">
					<span>{{scope.row.ststusName}}</span>
				</template>
			</el-table-column>
			<el-table-column min-width="250" align="center" label="名称/车牌号">
				<template scope="scope">
					<span>{{scope.row.name}}</span>
					<br />
					<span>{{scope.row.vehicleNumberPlat}}</span>
				</template>
			</el-table-column>
			<el-table-column width="150" align="center" label="姓名/手机号">
				<template scope="scope">
					<span>{{scope.row.realName}}</span>/
					<span>{{scope.row.telephone}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200" align="center" label="取车时间/还车时间">
				<template scope="scope">
					取:
					<span>{{dateFormat(scope.row.orderRentVehicleDetail.startTime)}}</span>
					<br />还:
					<span>{{dateFormat(scope.row.orderRentVehicleDetail.endTime)}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200" align="center" label="交车公司">
				<template scope="scope">
					<span>{{scope.row.startCompanyName}}</span>
					<br />
					<span>({{scope.row.orderRentVehicleDetail.startAddr}})</span>
				</template>
			</el-table-column>
			<el-table-column width="200" align="center" label="收车公司">
				<template scope="scope">
					<span>{{scope.row.endCompanyName}}</span>
					<br />
					<span>({{scope.row.orderRentVehicleDetail.endAddr}})</span>
				</template>
			</el-table-column>
			<el-table-column width="110" align="center" label="订单金额">
				<template scope="scope">
					<span>{{scope.row.orderAmount}}元</span>
				</template>
			</el-table-column>

			<!--      <el-table-column align="center" label="订单状态">-->
			<!--        <template scope="scope">-->
			<!--          <span v-if="scope.row.status == '2'">取消</span>-->
			<!--          <span v-if="scope.row.status == '3'">待付款</span>-->
			<!--          <span v-if="scope.row.status == '4'">待出行</span>-->
			<!--          <span v-if="scope.row.status == '5'">出行中</span>-->
			<!--          <span v-if="scope.row.status == '6'">已完成</span>-->
			<!--        </template>-->
			<!--      </el-table-column>-->

			<el-table-column width="100" align="center" label="订单详情" fixed="right">
				<template scope="scope">
					<span style="color: #13CE66;cursor: pointer;" @click="handleOrderDetail(scope.row)">订单详情</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" width="300" fixed="right">
				<template scope="scope">
					<el-button
						size="small"
						v-if="scope.row.status >=4"
						class="el-button el-button--text el-button--small"
						@click="handleHandoverOrderVehicle(scope.row)"
					>交车记录</el-button>
					<el-button
						size="small"
						v-if="scope.row.status == 6"
						class="el-button el-button--text el-button--small"
						@click="handleReturnOrderVehicle(scope.row)"
					>还车记录</el-button>
					<el-button
						size="small"
						v-if="scope.row.status!=5&&scope.row.status > 3"
						class="el-button el-button--text el-button--small"
						@click="handleRefundVehicle(scope.row)"
					>押金记录</el-button>
					<el-button
						size="small"
						v-if="scope.row.status == 6&&order_btn_order_violcation_save"
						class="el-button el-button--text el-button--small"
						@click="illegalInquiry(scope.row)"
					>违章查询</el-button>
					<el-button
						size="small"
						v-if="scope.row.status == 3 || scope.row.status == 4"
						class="el-button el-button--text el-button--small"
						@click="handleViolatePrice(scope.row)"
					>取消订单</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--违章查询弹框-->
		<Illegal :row="currentRow" v-if="illegalVisible" v-on:illegalEvent="illegalEvent"></Illegal>
		<!--查看详情弹框-->
		<Detail :row="currentRow" v-if="detailVisible" v-on:detailEvent="detailEvent"></Detail>

		<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, 50]"
				:page-size="listQuery.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</div>

		<!-- 订单详情 -->
		<rentOrderDetailModal
			:form="form"
			:rentCostDetail="tourCostDetail"
			v-if="rentDialogVisible"
			v-on:rentOrderDetailDialogEvent="rentOrderDetailDialogEvent"
		></rentOrderDetailModal>

		<el-dialog :title="modalTitle" :visible.sync="orderVehicleCrosstownVisible">
			<el-form :model="form" :rules="rules" ref="form" label-width="90px">
				<div class="label-title">
					<span>订单号:</span>
					<span class="label-text">{{form.no}}</span>
					<span>支付时间:</span>
					<span class="label-text">{{form.crtTime}}</span>
				</div>
				<div class="label-title">
					<span>订单状态:</span>
					<span class="label-text">{{form.ststusName}}</span>
				</div>
				<div class="label-title">
					<span>姓名/手机号:</span>
					<span class="label-text">
						<span>{{form.realName}}</span>/
						<span>{{form.telephone}}</span>
					</span>
				</div>
				<div class="label-title">
					<span>取车:</span>
					<span class="label-text">{{form.orderRentVehicleDetail.startTime}}</span>
					<span class="label-text">{{form.orderRentVehicleDetail.startAddr}}</span>
					<span class="label-text">交车公司:</span>
					<span>{{form.startCompanyName}}</span>
				</div>
				<div class="label-title">
					<span>还车:</span>
					<span class="label-text">{{form.orderRentVehicleDetail.endTime}}</span>
					<span class="label-text">{{form.orderRentVehicleDetail.endAddr}}</span>
					<span class="label-text">交车公司:</span>
					<span>{{form.endCompanyName}}</span>
				</div>
				<div class="stepBox" v-if="depositDetail">
					<div class="title" v-if="depositRefundRecord.length>0">押金退还进度</div>
					<ul>
						<li
							v-for="(item,index) in depositRefundRecord"
							:class="{'active':item.iscomplete}"
							:key="index"
						>
							<img class="activeImg" v-if="item.iscomplete" src="../../../assets/images/active.png" alt />
							<img class="activeImg" v-if="!item.iscomplete" src="../../../assets/images/doing.png" alt />
							<p class="stepTitle">
								<template v-if="item.status==1">
									<div class="picBox">
										<div style="flex: 1">{{item.restAmount}}押金退还已申请</div>
										<div style="font-size: 10px;color: #999">{{item.updTimeStr}}</div>
									</div>
								</template>
								<template v-if="item.status==2">
									<div class="picBox">
										<div style="flex: 1">{{item.restAmount}}元押金退还到账</div>
										<div style="font-size: 10px;color: #999">{{item.updTimeStr}}</div>
									</div>
								</template>
								<template v-if="item.status==3">
									<div class="picBox">
										<div style="flex: 1">{{item.restAmount}}元房车违章押金到账</div>
										<div style="font-size: 10px;color: #999">{{item.updTimeStr}}</div>
									</div>
								</template>
								<template v-if="item.status==4">
									<div class="picBox">
										<div style="flex: 1">房车定损评定中</div>
										<div style="font-size: 10px;color: #999">{{item.updTimeStr}}</div>
									</div>
								</template>
								<template v-if="item.status==5">
									<div class="picBox">
										<div style="flex: 1">完成定损，退还剩余押金</div>
										<div style="font-size: 10px;color: #999">{{item.updTimeStr}}</div>
									</div>
								</template>
								<template v-if="item.status==6">
									<div class="picBox">
										<div style="flex: 1">押金退还到账</div>
										<div style="font-size: 10px;color: #999">{{item.updTimeStr}}</div>
									</div>
								</template>
							</p>
							<p class="tip">
								<template v-if="item.status==1">成功还车，退还15000租车押金</template>
								<template v-if="item.status==2">{{item.updTimeStr}} 到账</template>
								<template v-if="item.status==3">预计{{item.endTimeStr}}之前到账</template>
								<template v-if="item.status==4">押金将在定损后退还，请耐心等待...</template>
								<template v-if="item.status==5">
									定损流程有疑问可联系滴房车 客服
									<a :href="'tel://'+Tel" style="color: #666666;">{{Tel}}</a>
								</template>
								<template v-if="item.status==6">
									定损流程有疑问可联系滴房车 客服
									<a :href="'tel://'+Tel" style="color: #666666;">{{Tel}}</a>
								</template>
							</p>
							<p
								class="detailTitle"
								v-if="item.orderViolation && item.status==3"
								style="margin-top: 15px"
							>违章罚款</p>
							<p class="detailTitle" v-if="item.orderViolation && item.status==3">违章截图：</p>
							<div class="picBox" v-if="dedDetail.length>0">
								<img class="picItem" :src="itm" alt v-for="(itm,idx) in item.pictureList" :key="idx" />
							</div>
							<p
								class="detailTitle"
								v-if="item.orderViolation && item.status==3"
								style="color: #666666;font-size: 13px"
							>
								如有疑问，可联系滴房车客服
								<a :href="'tel://'+Tel" style="color: #666666;">{{Tel}}</a>
							</p>
							<p
								class="detailTitle"
								v-if="dedDetail.length>0 && item.status==5"
								style="margin-top: 15px"
							>定损总罚款{{dedTotal}}元</p>
							<p class="detailTitle" v-if="dedDetail.length>0 && item.status==5">明细</p>
							<div v-if="dedDetail.length>0 && item.status==5" v-for="(itm,idx) in dedDetail" :key="idx">
								<p class="detailTitle">{{itm.id}}、{{itm.statusName}}扣{{itm.cost}}元</p>
								<div class="picBox">
									<img class="picItem" :src="it" alt v-for="(it,ix) in itm.picList" :key="ix" />
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div v-if="vehicleDetail" style="border: 1px solid;">
					<div style="border-bottom: 1px solid;">
						<span class="label-text">交车交接人:</span>
						<span class="label-text">{{orderReturnVehicleCrosstown.username}}</span>
					</div>
					<div>
						<span class="label-text">上传驾驶证*:</span>
						<span class="label-text">{{orderReturnVehicleCrosstown.licenseName}}</span>
						<span class="label-text">{{orderReturnVehicleCrosstown.licensePhone}}</span>
						<br />
						<span style="margin-left:110px;">身份证号:</span>
						<span class="label-text">{{orderReturnVehicleCrosstown.licenseIdCard}}</span>
						<br />
						<!-- <img
							:src="orderReturnVehicleCrosstown.licenseImg"
							style="width: 100px; height: 100px;margin-left:110px;"
							@click="lookPic(orderReturnVehicleCrosstown.licenseImg)"
						/>-->
						<viewer>
							<img
								:src="orderReturnVehicleCrosstown.licenseImg"
								style="width: 100px; height: 100px;margin-left:110px;"
							/>
						</viewer>
					</div>

					<div>
						<span class="label-text">拍照取证*:</span>
						<br />
						<!-- <img
							v-for="(item,index) in otherImg"
							:src="item"
							:key="index"
							style="width: 100px; height: 100px;margin-left:110px;"
              				@click="lookPic(item)"
						/>-->

						<viewer :images="otherImg">
							<img
								v-for="src in otherImg"
								:src="src"
								:key="src"
								style="width: 100px; height: 100px;margin-left:110px;"
							/>
						</viewer>

						<!-- 	<img src="../../../../dist/static/img/success.8304acb.png" style="width: 100px; height: 100px;margin-left:110px;"/>
              <img src="../../../../dist/static/img/success.8304acb.png" style="width: 100px; height: 100px;margin-left:110px;"/>
						<img src="../../../../dist/static/img/success.8304acb.png" style="width: 100px; height: 100px;margin-left:110px;"/>-->
					</div>
					<div v-if="handover">
						<span class="label-text">房车公里数*:</span>
						<span class="label-text">当前公里数:</span>
						<span class="label-text">{{orderReturnVehicleCrosstown.mileage}}Km</span>
						<br />
						<!-- <img
							:src="orderReturnVehicleCrosstown.mileageImg"
							style="width: 100px; height: 100px;margin-left:110px;"
              	@click="lookPic(orderReturnVehicleCrosstown.mileageImg)"
						/>-->
						<viewer>
							<img
								:src="orderReturnVehicleCrosstown.mileageImg"
								style="width: 100px; height: 100px;margin-left:110px;"
							/>
						</viewer>
					</div>
					<div v-if="returnVehicle">
						<span class="label-text">钥匙照片*:</span>
						<br />
						<!-- <img
							:src="orderReturnVehicleCrosstown.vehicleKey"
							style="width: 100px; height: 100px;margin-left:110px;"
              	@click="lookPic(orderReturnVehicleCrosstown.vehicleKey)"
						/>-->
						<viewer>
							<img
								:src="orderReturnVehicleCrosstown.vehicleKey"
								style="width: 100px; height: 100px;margin-left:110px;"
							/>
						</viewer>
					</div>
					<div v-if="returnVehicle">
						<span class="label-text">押金扣除项*:</span>
						<span>{{orderReturnVehicleCrosstown.deduction?'有扣除项':'没有扣除项'}}</span>
						<br />
					</div>
					<div>
						<span class="label-text">备注:</span>
						<span class="label-text">{{orderReturnVehicleCrosstown.remak}}</span>
					</div>
					<div></div>
				</div>
			</el-form>
		</el-dialog>

		<el-dialog title="取消订单" :visible.sync="showDialog">
			<el-form>
				<el-form-item label="违约金金额:">
					<el-input
						v-model="violateAmount"
						type="number"
						@blur="checkViolateAmount()"
						auto-complete="off"
					></el-input>
				</el-form-item>
				<el-form-item>
					<span class="label-text">实际违约金是{{changeViolateAmount}}元</span>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleCancelDialog()">取 消</el-button>
				<el-button type="primary" @click="handleConfirm()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>


<script>
import Illegal from './illegalModal' //违章查询
import Detail from './detail' //违章查询
import rentOrderDetailModal from '../modal/rentOrderDetailModal' //租车订单详情
import { formatDate } from '../../../utils/dateFormattor'
import {
	page,
	getAllBranchCompany,
	getAllBranchCompanyByZoneId,
	getOrderVehicleCrosstown,
	getStep,
	calculate,
	getViolatePrice
} from 'api/order/rentVehicle'
import { timestamp2Date } from 'utils/dateUtils'
import { mapGetters } from 'vuex'
import rsCode from '../../../utils/rsCode'
import { getSysRegionByIds } from 'api/vehicle/vehicleInfo/'
import { getAllZone } from 'api/base_info/constant/'
import ElRow from 'element-ui/packages/row/src/row'
import ElCol from 'element-ui/packages/col/src/col'
import ElButton from '../../../../node_modules/element-ui/packages/button/src/button.vue'

export default {
	name: 'branchCompanyStock',
	components: {
		ElButton,
		ElCol,
		ElRow,
		Illegal,
		Detail,
		rentOrderDetailModal
	},
	data() {
		return {
			pictureList: [],
			dedDetail: [],
			depositRefundRecord: [],
			dedTotal: '',
			Tel: '',
			showDialog: false,
			changeViolateAmount: null,
			violateAmount: null,
			row: null,
			topAmount: null,
			form: {
				couponAmount: undefined,
				crtHost: undefined,
				crtName: undefined,
				crtTime: undefined,
				crtUser: undefined,
				detailId: undefined,
				endCompanyName: undefined,
				goodsAmount: undefined,
				hasDiscount: undefined,
				hasMemberRight: undefined,
				hasPay: undefined,
				id: undefined,
				name: undefined,
				realName: undefined,
				no: undefined,
				orderAmount: undefined,
				orderOrigin: undefined,
				orderVehicleCrosstownDto: {
					licenseIdCard: '',
					licenseImg: '',
					licenseName: '',
					licensePhone: ''
				},
				orderRentVehicleDetail: {
					bookRecordId: undefined,
					costDetail: undefined,
					crtTime: undefined,
					dayNum: undefined,
					deposit: undefined,
					driverType: undefined,
					endAddr: undefined,
					endCity: undefined,
					endCityName: undefined,
					endCompanyId: undefined,
					endTime: undefined,
					freeDays: undefined,
					handelViolation: undefined,
					id: undefined,
					modelId: undefined,
					myDriverIds: undefined,
					orderId: undefined,
					score: undefined,
					startAddr: undefined,
					startCity: undefined,
					startCityName: undefined,
					startCompanyId: undefined,
					startTime: undefined,
					stime: undefined,
					suserid: undefined,
					updTime: undefined,
					vehicleId: undefined
				},
				payOrigin: undefined,
				picture: undefined,
				realAmount: undefined,
				refundStatus: undefined,
				startCompanyName: undefined,
				status: undefined,
				ststusName: undefined,
				telephone: undefined,
				type: undefined,
				updTime: undefined,
				userId: undefined,
				username: undefined,
				vehicleNumberPlat: undefined,
				version: undefined
			},
			orderVehicleCrosstownVisible: false,
			rentDialogVisible: false, //租车详情弹框
			modalTitle: '订单详情',
			illegalVisible: false, //违章查询弹框
			detailVisible: false,
			rules: {
				// companyName: [
				//   {
				//     required: true,
				//     message: '请输入用户',
				//     trigger: 'blur'
				//   }
				// ],
			},
			list: null,
			total: null,
			listLoading: true,
			listQuery: {
				page: 1,
				limit: 20,
				type: 1,
				no: null,
				status: null,
				startTime: undefined,
				endTime: undefined,
				zoneId: undefined,
				startCompanyId: undefined,
				plateNumber: undefined,
				realName: undefined,
				vehicleCode: undefined
			},
			baranchQuery: {
				zoneId: null
			},
			orderVehicleQuery: {
				orderId: null,
				type: undefined
			},
			dialogFormVisible: false,
			dialogStatus: '',
			btn_del: true,
			btn_buy: true,
			btn_cancel: true,
			allZoneArr: [], //全部片区
			allBranchCompany: [],
			tourCostDetail: '',
			damageSafe: '',
			serviceCost: 0,
			orderReturnVehicleCrosstown: {
				crtTime: undefined,
				deduction: undefined,
				id: undefined,
				imgs: undefined,
				isDel: undefined,
				mileage: undefined,
				mileageImg: undefined,
				orderId: undefined,
				orderNo: undefined,
				orperaterId: undefined,
				remak: undefined,
				status: undefined,
				statusId: undefined,
				statusTime: undefined,
				type: undefined,
				updTime: undefined,
				userLicenseId: undefined,
				username: undefined,
				licenseIdCard: undefined,
				licenseImg: undefined,
				licenseName: undefined,
				licensePhone: undefined
			}, //还车记录
			tableKey: 0,
			otherImg: [],
			handover: false,
			returnVehicle: false,
			refundshow: false, //退款信息
			vehicleDetail: false, //交还车信息，默认全部显示
			order_btn_order_violcation_save: false,
			depositDetail: false,
			costDetail: {
				key: undefined,
				val: undefined,
				children: [
					{
						key: undefined,
						detail: undefined,
						val: undefined
					}
				]
			}
		}
	},
	created() {
		let t = this
		let query = localStorage.getItem('rentVehicleInfo')
		this.listQuery.no = this.$route.query.id || null
		if (query != 'null' && query) {
			let queryJson = JSON.parse(query)
			if (queryJson.type) {
				t.listQuery.type = queryJson.type
			}
			if (queryJson.vehicleCode) {
				t.listQuery.vehicleCode = queryJson.vehicleCode
			}
			if (queryJson.page) {
				t.listQuery.page = queryJson.page
			}
			if (queryJson.limit) {
				t.listQuery.limit = queryJson.limit
			}
			if (queryJson.no) {
				t.listQuery.no = queryJson.no
			}
			if (queryJson.status) {
				t.listQuery.status = queryJson.status
			}
			if (queryJson.startTime) {
				t.listQuery.startTime = queryJson.startTime
			}
			if (queryJson.endTime) {
				t.listQuery.endTime = queryJson.endTime
			}
			if (queryJson.realName) {
				t.listQuery.realName = queryJson.realName
			}
			if (queryJson.plateNumber) {
				t.listQuery.plateNumber = queryJson.plateNumber
			}
		}
		this.getList()
		this.btn_del = this.elements['branchCompany/stockApply:btn_delete']
		this.order_btn_order_violcation_save = this.elements[
			'order:btn_order_violcation_save'
		]
	},
	computed: {
		...mapGetters(['elements']),
		provinceRegions() {
			return getSonRegionByCodes(1)
		},
		//获取大区列表
		getAllZoneList() {
			return getAllZone()
		},
		cityRegions() {
			if (!this.$utils.isInteger(this.form.addrProvince)) {
				return null
			}
			return getSonRegionByCodes(this.form.addrProvince)
		}
	},
	methods: {
		//取消订单
		cancel(row, changeViolateAmount) {
			let that = this
			if (changeViolateAmount == null || changeViolateAmount == 0) {
				this.$confirm('此操作将取消该订单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let params = {
						cancelReason: '后台取消',
						appUserId: row.userId,
						changeViolateAmount: null
					}
					calculate(row.no, params).then(data => {
						if (data.status == 200) {
							this.$notify({
								title: '成功',
								message: '取消订单成功',
								type: 'success',
								duration: 2000
							})
							this.getList()
						} else {
							this.$notify({
								title: '失败',
								message: '取消订单失败',
								type: 'fail',
								duration: 2000
							})
						}
					})
				})
			} else {
				//   this.$prompt('请输入违约金', '提示', {
				// 	  confirmButtonText: '确定',
				// 	  cancelButtonText: '取消',
				// 	  inputPattern: /^[0-9]*$/,
				// 	  inputErrorMessage: '只能输入数字'
				// }).then(({ value }) => {
				//   this.$message({
				// 	type: 'success',
				// 	message: '你的邮箱是: ' + value
				//   });
				// }).catch(() => {
				//   this.$message({
				// 	type: 'info',
				// 	message: '取消输入'
				//   });
				// });
				that.showDialog = true
				that.changeViolateAmount = changeViolateAmount
				that.violateAmount = changeViolateAmount
				that.row = row
			}
		},
		checkViolateAmount() {
			console.log(this.topAmount)
			console.log(this.violateAmount)
			if (this.topAmount < this.violateAmount) {
				this.$notify({
					title: '失败',
					message: '违约金额不能大于最高限制金额' + this.topAmount,
					type: 'fail',
					duration: 2000
				})
			}
		},
		handleConfirm() {
			let params = {
				cancelReason: '后台取消',
				appUserId: this.row.userId,
				changeViolateAmount: this.violateAmount
			}
			calculate(this.row.no, params).then(data => {
				if (data.status == 200) {
					this.$notify({
						title: '成功',
						message: '取消订单成功',
						type: 'success',
						duration: 2000
					})
					this.showDialog = false
					this.getList()
				} else {
					this.$notify({
						title: '失败',
						message: '取消订单失败',
						type: 'fail',
						duration: 2000
					})
				}
			})
		},
		handleCancelDialog() {
			this.showDialog = false
		},
		handleViolatePrice(row) {
			let that = this
			let params = {
				cancelReason: '后台取消',
				appUserId: row.userId
			}
			getViolatePrice(row.no).then(data => {
				if (data.status == 200) {
					that.topAmount = data.data.topAmount
					that.cancel(row, data.data.cutAmount)
				} else {
					this.$notify({
						title: '失败',
						message: '获取违约金失败',
						type: 'success',
						duration: 2000
					})
				}
			})
		},
		handleOrderDetail(row) {
			this.form = row
			if (this.form.status == 2) {
				this.form.ststusName = '取消'
			}
			if (this.form.status == 3) {
				this.form.ststusName = '待付款'
			}
			if (this.form.status == 4) {
				this.form.ststusName = '待出行'
			}
			if (this.form.status == 5) {
				this.form.ststusName = '出行中'
			}
			if (this.form.status == 6) {
				this.form.ststusName = '已完成'
			}
			if (this.form.status == -1) {
				this.form.ststusName = '定损中'
			}
			this.form.orderRentVehicleDetail.startTime = this.form
				.orderRentVehicleDetail.startTime
				? timestamp2Date(this.form.orderRentVehicleDetail.startTime)
				: ''
			this.form.orderRentVehicleDetail.endTime = this.form
				.orderRentVehicleDetail.endTime
				? timestamp2Date(this.form.orderRentVehicleDetail.endTime)
				: ''
			if (this.form.orderRentVehicleDetail.costDetail) {
				try {
					this.costDetail = JSON.parse(
						this.form.orderRentVehicleDetail.costDetail
					)
					var cost = ''
					if (this.costDetail.children) {
						this.costDetail.children.forEach(function(a) {
							var detail = a.detail == undefined ? '' : a.detail
							cost += a.key + ':' + detail + ' '
						})
					}
				} catch (e) {
					this.templateModel()
				}
			}
			this.tourCostDetail = cost
			if (this.form.orderRentVehicleDetail.driverType == 1) {
				this.serviceCost = this.form.orderRentVehicleDetail.dayNum * 600
			}
			this.rentDialogVisible = true
		},
		/**
		 * 租车订单详情弹框关闭
		 * */
		rentOrderDetailDialogEvent(e) {
			this.rentDialogVisible = false
			if (e) {
				this.getList()
			}
		},
		/**
		 * 操作-违章查询按钮，显示违章弹框
		 */
		illegalInquiry(row) {
			this.currentRow = row
			this.illegalVisible = true
		},
		/**
		 * 操作-查看详情按钮，显示详情弹框
		 */
		detailInquiry(row) {
			this.currentRow = row
			this.detailVisible = true
		},
		/**
		 * 关闭违章查询弹框
		 * */
		illegalEvent(params) {
			this.illegalVisible = false
			if (params) {
				// console.log(params);
			}
		},
		/**
		 * 关闭违章查询弹框
		 * */
		detailEvent(params) {
			this.detailVisible = false
			if (params) {
				// console.log(params);
			}
		},
		handleHandoverOrderVehicle(row) {
			// console.log(row);
			this.modalTitle = '交车记录'
			this.form = row
			if (this.form.status == 2) {
				this.form.ststusName = '取消'
			}
			if (this.form.status == 3) {
				this.form.ststusName = '待付款'
			}
			if (this.form.status == 4) {
				this.form.ststusName = '待出行'
			}
			if (this.form.status == 5) {
				this.form.ststusName = '出行中'
			}
			if (this.form.status == 6) {
				this.form.ststusName = '已完成'
			}
			if (this.form.status == -1) {
				this.form.ststusName = '定损中'
			}
			this.form.orderRentVehicleDetail.startTime = timestamp2Date(
				this.form.orderRentVehicleDetail.startTime
			)
			this.form.orderRentVehicleDetail.endTime = timestamp2Date(
				this.form.orderRentVehicleDetail.endTime
			)
			this.costDetail = JSON.parse(
				this.form.orderRentVehicleDetail.costDetail
			)
			var cost = ''
			if (this.costDetail.children) {
				this.costDetail.children.forEach(function(a) {
					var detail = a.detail == undefined ? '' : a.detail
					cost += a.key + ':' + detail + ' '
				})
			}
			this.tourCostDetail = cost
			if (this.form.orderRentVehicleDetail.driverType == 1) {
				this.serviceCost = this.form.orderRentVehicleDetail.dayNum * 600
			}
			this.orderVehicleQuery.orderId = this.form.id
			this.orderVehicleQuery.type = 1
			this.getAllOrderVehicleCrosstown()
			this.handover = true
			this.returnVehicle = false
			this.vehicleDetail = true
			this.depositDetail = false
		},
		getAllOrderVehicleCrosstown() {
			getOrderVehicleCrosstown(this.orderVehicleQuery).then(response => {
				// console.log(response);
				if (response.data.length <= 0) {
					alert('交还车记录不存在')
				} else {
					this.orderVehicleCrosstownVisible = true
					this.orderReturnVehicleCrosstown = response.data[0]
					if (response.data[0].imgs) {
						this.otherImg = response.data[0].imgs.split(',')
					}
				}
			})
		},

		handleReturnOrderVehicle(row) {
			// console.log(row);
			this.modalTitle = '还车记录'
			this.form = row
			if (this.form.status == 2) {
				this.form.ststusName = '取消'
			}
			if (this.form.status == 3) {
				this.form.ststusName = '待付款'
			}
			if (this.form.status == 4) {
				this.form.ststusName = '待出行'
			}
			if (this.form.status == 5) {
				this.form.ststusName = '出行中'
			}
			if (this.form.status == 6) {
				this.form.ststusName = '已完成'
			}
			if (this.form.status == -1) {
				this.form.ststusName = '定损中'
			}
			this.form.orderRentVehicleDetail.startTime = timestamp2Date(
				this.form.orderRentVehicleDetail.startTime
			)
			this.form.orderRentVehicleDetail.endTime = timestamp2Date(
				this.form.orderRentVehicleDetail.endTime
			)
			this.costDetail = JSON.parse(
				this.form.orderRentVehicleDetail.costDetail
			)
			var cost = ''
			if (this.costDetail.children) {
				this.costDetail.children.forEach(function(a) {
					var detail = a.detail == undefined ? '' : a.detail
					cost += a.key + ':' + detail + ' '
				})
			}
			this.tourCostDetail = cost
			if (this.form.orderRentVehicleDetail.driverType == 1) {
				this.serviceCost = this.form.orderRentVehicleDetail.dayNum * 600
			}
			this.orderVehicleQuery.orderId = this.form.id
			this.orderVehicleQuery.type = 2
			this.getAllOrderVehicleCrosstown()
			this.returnVehicle = true
			this.handover = false
			this.vehicleDetail = true
			this.depositDetail = false
		},
		handleRefundVehicle(row) {
			// console.log(row);
			var that = this
			that.pictureList = []
			that.dedDetail = []
			that.depositRefundRecord = []
			that.dedTotal = 0
			that.Tel = ''
			getStep(row.no).then(response => {
				response.data.forEach(function(item) {
					if (item.type != 1) {
						that.Tel = item.customerPhone
						that.type = item.type
						if (item.dedDetail) {
							var dedTotal = 0
							var dedDetail = JSON.parse(item.dedDetail)
							that.dedDetail = dedDetail
							dedDetail.forEach(function(item) {
								dedTotal += Number(item.cost)
							})
							that.dedTotal = dedTotal.toFixed(2)
						}
						item.depositRefundRecord.forEach(function(itm) {
							itm.updTimeStr = timestamp2Date(itm.updTime)
							if (itm.status == 3) {
								itm.endTimeStr = timestamp2Date(
									Number(itm.updTime) + 2592000000
								)
								if (itm.orderViolation) {
									if (itm.orderViolation.picture) {
										var Arr = itm.orderViolation.picture.split(
											','
										)
										var arrivalPicList = []
										Arr.map(function(it) {
											arrivalPicList.push(it)
										})
										itm.pictureList = arrivalPicList
									}
								}
							}
						})
						if (item.type == 3) {
							var arr = item.depositRefundRecord
							var item = arr.shift()
							arr.push(item)
						} else {
							var arr = item.depositRefundRecord
						}

						that.depositRefundRecord = arr
						// console.log(that.depositRefundRecord);
					}
				})
			})
			this.modalTitle = '押金记录'
			this.form = row
			if (this.form.status == 2) {
				this.form.ststusName = '取消'
			}
			if (this.form.status == 3) {
				this.form.ststusName = '待付款'
			}
			if (this.form.status == 4) {
				this.form.ststusName = '待出行'
			}
			if (this.form.status == 5) {
				this.form.ststusName = '出行中'
			}
			if (this.form.status == 6) {
				this.form.ststusName = '已完成'
			}
			if (this.form.status == -1) {
				this.form.ststusName = '定损中'
			}
			this.form.orderRentVehicleDetail.startTime = timestamp2Date(
				this.form.orderRentVehicleDetail.startTime
			)
			this.form.orderRentVehicleDetail.endTime = timestamp2Date(
				this.form.orderRentVehicleDetail.endTime
			)
			this.orderVehicleCrosstownVisible = true
			this.vehicleDetail = false
			this.depositDetail = true
		},
		//监听change事件
		getProvinceRegions(item) {
			this.listQuery.zoneId = item
			this.baranchQuery.zoneId = item
			this.listQuery.startCompanyId = undefined
			getAllBranchCompanyByZoneId(this.baranchQuery).then(response => {
				this.allBranchCompany = response.data
			})
		},
		getAllBranchCompanyChange(item) {
			this.listQuery.startCompanyId = item
		},
		handleCancel(row) {
			this.$confirm('此操作将放弃购买, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				cancelApply(row.id).then(() => {
					this.$notify({
						title: '成功',
						message: '操作成功',
						type: 'success',
						duration: 2000
					})
					this.getList()
				})
			})
		},

		handleDelete(row) {
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				delObj(row.id).then(() => {
					this.$notify({
						title: '成功',
						message: '删除成功',
						type: 'success',
						duration: 2000
					})
					const index = this.list.indexOf(row)
					this.list.splice(index, 1)
				})
			})
		},
		handleFilter() {
			this.listQuery.page = 1
			this.$refs.queryForm.validate(valid => {
				if (valid) {
					this.getList()
				} else {
					return false
				}
			})
		},
		clearSearch() {
			this.listQuery = {
				page: 1,
				limit: 20,
				type: 1,
				no: null,
				status: null,
				startTime: undefined,
				endTime: undefined,
				zoneId: undefined,
				startCompanyId: undefined
			}
			this.getList()
		},
		/**
		 * 获取订单列表
		 */
		getList() {
			this.listLoading = true

			// if(this.listQuery.startTime){
			//   this.listQuery.startTime = this.listQuery.startTime.getTime();
			// }
			// if(this.listQuery.endTime){
			//   this.listQuery.endTime = this.listQuery.endTime.getTime();
			// }
			if (this.listQuery) {
				localStorage.setItem(
					'rentVehicleInfo',
					JSON.stringify(this.listQuery)
				)
			}
			page(this.listQuery).then(response => {
				if (response.data.data) {
					response.data.data.map(function(el) {
						// console.log(el);
						if (el.status == 2) {
							el.ststusName = '取消'
						}
						if (el.status == 3) {
							el.ststusName = '待付款'
						}
						if (el.status == 4) {
							el.ststusName = '待出行'
						}
						if (el.status == 5) {
							el.ststusName = '出行中'
						}
						if (el.status == 6) {
							el.ststusName = '已完成'
						}
						if (el.status == -1) {
							el.ststusName = '定损中'
						}
					})
				}
				this.list = response.data.data

				this.total = response.data.totalCount
				this.listLoading = false
			})
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			if (this.listQuery) {
				localStorage.setItem(
					'rentVehicleInfo',
					JSON.stringify(this.listQuery)
				)
			}
			this.getList()
		},
		dateFormat(timestamp) {
			let date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
		},
		handleCurrentChange(val) {
			this.listQuery.page = val
			if (this.listQuery) {
				localStorage.setItem(
					'rentVehicleInfo',
					JSON.stringify(this.listQuery)
				)
			}
			this.getList()
		},
		templateModel() {
			this.costDetail = {
				key: undefined,
				val: undefined,
				children: [
					{
						key: undefined,
						detail: undefined,
						val: undefined
					}
				]
			}
		}
	}
}
</script>

<style scpoed>
.label-text {
	margin-left: 10px;
	margin-right: 20px;
}

.label-title {
	margin-top: 10px;
}

.orderDetail tr th {
	background: #eef1f6;
}

.orderDetail tr td,
.orderDetail tr th {
	width: 500px;
	text-align: center;
	border: 1px solid #dfe6ec;
	margin-left: 100px;
	margin-right: 100px;
	padding: 10px;
}

.label-value {
	margin-left: 80px;
	margin-right: 100px;
}

#license-img {
	width: 50px;
	height: 50px;
}

.order-details .el-form-item {
	margin-bottom: 10px !important;
}

.stepBox {
	background-color: #fff;
	width: 100%;
	margin-top: 10px;
}

.title {
	font-size: 17px;
	color: #171413;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 10px;
	font-weight: 400;
	padding: 10px;
}

.stepBox ul {
	margin-left: 10px;
	padding-left: 10px;
	padding-top: 20px;
}

.stepBox li {
	position: relative;
	padding: 0 20px 20px 20px;
	list-style: none;
	min-height: 40px;
	border-left: 1px solid #ccc;
	margin-top: -15px;
}

.stepBox li.active {
	border-color: #47e270;
}

.stepBox ul li:last-child {
	border: none;
}

.activeImg,
.doingImg {
	position: absolute;
	width: 28px;
	top: -18px;
	left: -14px;
	background: #fff;
}

.stepTitle {
	font-size: 15px;
	color: #171413;
	padding-bottom: 5px;
}

.tip {
	font-size: 10px;
	color: #999999;
}

.detailTitle {
	font-size: 10px;
	color: #171413;
}

.orderBox {
	width: 100%;
	padding: 0 10px;
	background: #fff;
}

.orderItem {
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	align-items: center;
	padding-bottom: 5px;
}

.orderItemLeft {
	font-size: 13px;
	color: #171413;
}

.orderItemRight {
	font-size: 13px;
	color: #666666;
}

.detailBox {
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	padding: 0 10px 10px 10px;
	align-items: center;
}

.detailBoxLeft {
	width: 80px;
	height: 80px;
	border-radius: 3px;
	margin-right: 7px;
}

.detailBoxRight {
	flex: 1;
}

.copy {
	font-size: 10px;
	color: #666666;
	background: #eeeeee;
	border-radius: 3px;
	padding: 3px;
	margin-left: 10px;
}

.picBox {
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	align-items: center;
	flex-wrap: wrap;
}

.picItem {
	width: calc(33.3% - 10px);
	margin-right: 10px;
	margin-bottom: 10px;
}

.bag {
	background: #171413;
	border-radius: 3px;
	padding: 0 2px;
	color: #fff;
	font-size: 10px;
	margin-right: 5px;
}
</style>
