<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-row>
			<el-row>
				<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-select>
						  </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 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.username}}</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.startCityName}}{{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.endCityName}}{{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 > 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>
					</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.username}}</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;"/>
								</div>

								<div>
											<span class="label-text">拍照取证*:</span><br/>
											<img v-for="item in otherImg" :src="item" 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;"/>
											<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;"/>
								</div>
								<div v-if="returnVehicle">
									<span class="label-text">钥匙照片*:</span><br/>
									<img :src="orderReturnVehicleCrosstown.vehicleKey" style="width: 100px; height: 100px;margin-left:110px;"/>
								</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>



  </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
  } 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:'',
       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,
					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
        },
				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,
      }
    },
    created() {
	  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: {
      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 = '已完成';
				}
       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 = '';
				 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.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 = '已完成';
				}
			 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 = '';
				 this.costDetail.children.forEach(function(a) {
				 						 cost += a.key + ":" +a.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 = '已完成';
					}
				 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 = '';
					 this.costDetail.children.forEach(function(a) {
					 						 cost += a.key + ":" +a.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 = '已完成';
						}
					 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;
				console.log(this.listQuery)
				// if(this.listQuery.startTime){
				//   this.listQuery.startTime = this.listQuery.startTime.getTime();
				// }
				// if(this.listQuery.endTime){
				//   this.listQuery.endTime = this.listQuery.endTime.getTime();
				// }
        page(this.listQuery)
          .then(response => {
            this.list = response.data.data;
            this.total = response.data.totalCount;
            this.listLoading = false;
          })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        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;
        this.getList();
      }
    }
  }
</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>
