<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="车牌号">
              <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.vehicleCode" placeholder="请输入车辆编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="所属门店" prop="startCompanyId">
              <el-select
                v-model="listQuery.startCompanyId"
                filterable
                placeholder="请选择"
                getAllBranchCompanyChange
              >
                <el-option :key="undefined" label="无" :value="undefined"></el-option>
                <el-option
                  v-for="item in allBranchCompany"
                  :key="item.id"
                  :label="item.name"
                  :value="item.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.corporationId"
                clearable
                filterable
                placeholder="请选择公司"
              >
                <el-option label="全部" :key="undefined" :value="undefined"></el-option>
                <el-option
                  v-for="val in companys_list"
                  :key="val.id"
                  :label="val.name"
                  :value="val.id"
                ></el-option>
              </el-select>
            </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-input v-model="listQuery.keywords" placeholder="请输入手机号或者客户姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态" class="status">
              <el-select
                class="filter-item"
                v-model="listQuery.orderStatus"
                placeholder="请选择"
                @change="getOrderStatus"
              >
                <el-option
                  v-for="val in orderStatus"
                  :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 class="orderstatus">
              <el-select class="filter-item" v-model="listQuery.status" placeholder="请选择">
                <el-option
                  v-for="val in childrenStatus"
                  :key="val.id"
                  :label="val.name"
                  :value="val.id"
                ></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 slot-scope="scope">
          <span>{{scope.row.orderId}}</span>
        </template>
      </el-table-column>
      <el-table-column width="200" align="center" label="订单号">
        <template slot-scope="scope">
          <span>{{scope.row.orderNo}}</span>
          <!-- <br />
          <span>{{scope.row.crtTime}}</span>-->
        </template>
      </el-table-column>
      <el-table-column prop="status" label="订单状态" width="100" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.ststusName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="250" align="center" label="车型/车牌号">
        <template slot-scope="scope">
          <span>{{scope.row.vehicleName}}</span>
          <br />
          <span>{{scope.row.numberPlate}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150" align="center" label="姓名/手机号">
        <template slot-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 slot-scope="scope">
          <span>{{dateFormat(scope.row.startTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column width="200" align="center" label="还车时间">
        <template slot-scope="scope">
          <span>{{dateFormat(scope.row.endTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column width="200" align="center" label="出车门店">
        <template slot-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 slot-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 slot-scope="scope">
          <span>{{scope.row.vehicleCompanyName}}</span>
        </template>
      </el-table-column>
      <el-table-column width="110" align="center" label="车辆所属公司">
        <template slot-scope="scope">
          <span>{{scope.row. vehicleBranchName}}</span>
        </template>
      </el-table-column>
      <el-table-column width="110" align="center" label="订单金额">
        <template slot-scope="scope">
          <span>{{scope.row.realAmount}}元</span>
        </template>
      </el-table-column>
      <!-- <el-table-column width="110" align="center" label="支付方式">
        <template slot-scope="scope">
          <span>{{scope.row.payWay == 1 ? '微信支付' : scope.row.payWay == 2 ? '支付宝支付' : scope.row.payWay == 3 ? '银联支付' : '微信支付'}}</span>
        </template>
      </el-table-column>-->

      <!--      <el-table-column align="center" label="订单状态">-->
      <!--        <template slot-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 slot-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 slot-scope="scope">
          <el-button
            size="small"
            v-if="scope.row.status >4 || scope.row.status == '-1'"
            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 || scope.row.status == '-1'"
            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 > 4  || scope.row.status == '-1'"
            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  || scope.row.status == '-1'"
            class="el-button el-button--text el-button--small"
            @click="illegalInquiry(scope.row)"
          >违章查询</el-button>
          <el-button
            size="small"
            v-if="scope.row.status == 4"
            class="el-button el-button--text el-button--small"
            @click="handleViolatePrice(scope.row)"
          >取消订单</el-button>
          <el-button
            size="small"
            v-if="scope.row.status == 2"
            class="el-button el-button--text el-button--small"
            @click="breakRecord(scope.row)"
          >取消记录</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 违约金记录 -->
    <el-dialog title="取消记录" :visible.sync="breakRecordPop">
      <p>取消时间：{{breakRecordData.time}}</p>
      <p>违约金额：{{breakRecordData.violateAmount}}</p>
      <p>违约原因：{{breakRecordData.violateDesc}}</p>
    </el-dialog>

    <!--违章查询弹框-->
    <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
      :orderDetailInfo="orderDetailInfo"
      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 v-if="modalTitle=='交车记录'">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="客户姓名:">
                <span>{{form.username}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="手机号:">
                <span class="label-text">{{form.telephone}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="驾驶证:">
            <viewer>
              <img :src="orderReturnVehicleCrosstown.userLicenseImg" class="voucher" />
            </viewer>
          </el-form-item>
        </div>

        <div v-else-if="modalTitle=='还车记录'">
          <el-form-item label="实退押金:">
            <span>{{orderReturnVehicleCrosstown.actualDeposit}}</span>
          </el-form-item>
          <!-- {{orderReturnVehicleCrosstown.violateDetailList != ''}} -->
          <div v-show="orderReturnVehicleCrosstown.violateDetailList != ''">
            <!-- <div> -->
            <el-form-item label="消费超额:">
              <span
                v-for="(item,index) in orderReturnVehicleCrosstown.violateDetailList"
                :key="index"
              >{{item.excessCost}}</span>
            </el-form-item>

            <el-form-item
              label="违约赔款.:"
              v-for="(item,index) in orderReturnVehicleCrosstown.violateDetailList"
              :key="index"
            >
              <span>{{item.statusName}}</span>
              <span style="margin-left:10px">{{item.cost}}</span>元
              <br />
              <span style="color:#999">{{item.deductions}}</span>
            </el-form-item>
            <el-form-item label="优惠券返还:">
              <span
                v-for="(item,index) in orderReturnVehicleCrosstown.backCoupons"
                :key="index"
              >{{item.title}} {{item.usedAmount}}</span>
            </el-form-item>
          </div>
        </div>

        <div v-show="modalTitle=='还车记录' || modalTitle=='交车记录'">
          <el-form-item label="公里数:">
            <p
              style="line-height: 1;position: relative;top: -3px;"
            >{{orderReturnVehicleCrosstown.mileage}}km/h</p>
            <viewer>
              <img :src="orderReturnVehicleCrosstown.mileageImg" class="voucher" />
            </viewer>
          </el-form-item>
          <el-form-item label="车辆取证:">
            <viewer :images="otherImg">
              <img v-for="src in otherImg" :src="src" :key="src" class="voucher" />
            </viewer>
          </el-form-item>
          <el-form-item label="备注:">
            <span>{{orderReturnVehicleCrosstown.remak}}</span>
          </el-form-item>
        </div>
        <div v-if="modalTitle=='交车记录'">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="交车操作人:">
                <span
                  class="label-text"
                >{{checkUserInfo.length > 0 && checkUserInfo[0].username? checkUserInfo[0].username : ""}} {{checkUserInfo.length > 0 && checkUserInfo[0].telephone? checkUserInfo[0].telephone : ""}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="交车时间:">
                <span
                  class="label-text"
                >{{orderReturnVehicleCrosstown.operatorTime ? dateFormat(orderReturnVehicleCrosstown.operatorTime) : ''}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-show="modalTitle=='还车记录'">
          <div v-show="orderReturnVehicleCrosstown.type == 3">
            <!-- <el-form-item label="定损类型:">
            <span></span>-->
            <!-- </el-form-item> -->
            <el-form-item label="定损总赔:">
              <span>{{dedDetailDTOListAll}}</span>
            </el-form-item>
            <el-form-item label="赔偿事项:">
              <div v-if="orderReturnVehicleCrosstown.dedDetailDTOList != ''">
                <div
                  v-for="(item,index) in orderReturnVehicleCrosstown.dedDetailDTOList"
                  :key="index"
                >
                  <p
                    style="line-height: 1;position: relative;top: -3px;"
                  >事项{{index+1}} {{item.deductions}} {{item.cost}}</p>
                  <viewer :images="item.picList">
                    <img v-for="src in item.picList" :src="src" :key="src" class="voucher" />
                  </viewer>
                </div>
              </div>
              <div v-else>暂无赔偿事项</div>
            </el-form-item>
            <el-form-item label="定损时间:">
              <span>{{dateFormat(orderReturnVehicleCrosstown.updTime)}}</span>
            </el-form-item>
          </div>

          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="收车操作人:">
                <span
                  class="label-text"
                >{{checkUserInfo.length > 0 && checkUserInfo[0].username? checkUserInfo[0].username : ""}} {{checkUserInfo.length > 0 && checkUserInfo[0].telephone? checkUserInfo[0].telephone : ""}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="收车时间:">
                <span
                  class="label-text"
                >{{orderReturnVehicleCrosstown.operatorTime ? dateFormat(orderReturnVehicleCrosstown.operatorTime): ''}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="stepBox" v-if="depositDetail">
          <div class="title" v-if="depositRefundRecord.length>0">押金退还进度</div>
          <ul>
            <li>
              <p class="inline successInline"></p>
              <p>
                成功收车
                <br />
                <span>{{dateFormat(crtTimeIndex)}}</span>
              </p>
            </li>
            <li v-show="form.status == -1">
              <p class="inline successInline"></p>
              <p>定损中</p>
            </li>
            <li
              v-for="(item,index) in depositRefundRecord"
              :class="{'active':item.iscomplete}"
              :key="index"
            >
              <p :class="{successInline:item.iscomplete}" class="inline"></p>
              <p class="stepTitle">
                <template v-if="item.status==1">
                  <div class="picBox">
                    <div>{{item.restAmount}}押金退还已申请</div>
                    <div style="color: #999">{{item.updTimeStr}}</div>
                  </div>
                </template>
                <template v-if="item.status==2">
                  <div class="picBox">
                    <div v-show="item.iscomplete">退还押金{{item.restAmount}}(扣除{{item.amount}}元)</div>
                    <div v-show="!item.iscomplete">退还押金{{item.restAmount}}元</div>
                    <div style="color: #999" v-show="item.iscomplete">
                      {{item.updTimeStr}}
                      <span>
                        详情可在
                        <el-button
                          type="text"
                          v-if="item.iscomplete"
                          style="color:#20a0ff !important"
                          @click="handleReturnOrderVehicle(activeInfo)"
                        >【还车记录】</el-button>中查看
                      </span>
                    </div>
                  </div>
                </template>
                <template v-if="item.status==3">
                  <div class="picBox">
                    <div
                      v-show="item.iscomplete"
                    >退还违章保证金{{activeRecord.refundOfRemainingDeposit}}元（扣除{{activeRecord.violationOfCharges}}元）</div>
                    <div v-show="!item.iscomplete">退还押金{{item.restAmount}}元</div>
                    <div style="color: #999" v-show="item.iscomplete">
                      {{item.updTimeStr}}
                      <span>
                        详情可在
                        <el-button
                          type="text"
                          v-if="item.iscomplete"
                          style="color:#20a0ff !important"
                          @click="illegalInquiry(activeInfo)"
                        >【违章记录】</el-button>中查看
                      </span>
                    </div>
                  </div>
                </template>
                <!-- <template v-if="item.status==5">
									<div class="picBox">
										<div>定损中</div>
										<div style="color: #999" v-if="item.iscomplete">{{item.updTimeStr}}</div>
									</div>
                </template>-->
                <template v-if="item.status==6">
                  <div class="picBox">
                    <div v-show="item.iscomplete">退还押金{{item.restAmount}}(扣除{{item.amount}}元)</div>
                    <div v-show="!item.iscomplete">退还押金{{item.restAmount}}元</div>
                    <div style="color: #999" v-show="item.iscomplete">
                      {{item.updTimeStr}}
                      <span>
                        详情可在
                        <el-button
                          type="text"
                          v-if="item.iscomplete"
                          style="color:#20a0ff !important"
                          @click="handleReturnOrderVehicle(activeInfo)"
                        >【还车记录】</el-button>中查看
                      </span>
                    </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>
      </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,
  orderDetail,
} from "api/order/rentVehicle";
import {
  toEast8Date,
  deepCopyDate,
  newEast8Date,
  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 { getAll, getAllCompany } from "api/base_info/branch_company";
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";
import { company_all_list, branchCompany_all_list } from "api/company.js";
export default {
  name: "branchCompanyStock",
  components: {
    ElButton,
    ElCol,
    ElRow,
    Illegal,
    Detail,
    rentOrderDetailModal,
  },
  data() {
    return {
      companys_list: [], //公司列表
      orderStatus: [
        {
          id: 1,
          name: "订单状态",
          children: [
            {
              id: null,
              name: "全部订单",
            },
            {
              id: 3,
              name: "待付款",
            },
            {
              id: 4,
              name: "待出行",
            },
            {
              id: 5,
              name: "出行中",
            },
            {
              id: 6,
              name: "已完成",
            },
            {
              id: 2,
              name: "已取消",
            },
            {
              id: -1,
              name: "定损中",
            },
          ],
        },
        {
          id: 2,
          name: "押金状态",
          children: [
            {
              id: 7,
              name: "违章待退",
            },
            {
              id: 8,
              name: "违章已退",
            },
          ],
        },
      ],
      childrenStatus: [],
      breakRecordData: {}, //违约金记录数据
      breakRecordPop: false, //违约金记录弹窗
      activeRecord: null,
      isInline: false,
      pictureList: [],
      dedDetail: [],
      depositRefundRecord: [],
      dedTotal: "",
      Tel: "",
      showDialog: false,
      changeViolateAmount: null,
      violateAmount: null,
      row: null,
      topAmount: null,
      activeInfo: null,
      form: {
        couponAmount: undefined,
        crtHost: undefined,
        crtName: undefined,
        crtTime: undefined,
        crtUser: undefined,
        detailId: undefined,
        endCompanyName: undefined,
        goodsAmount: undefined,
        hasDiscount: undefined,
        hasMemberRight: undefined,
        hasPay: undefined,
        orderId: undefined,
        name: undefined,
        username: undefined,
        orderNo: undefined,
        startTime: undefined,
        endTime: undefined,
        orderAmount: undefined,
        orderOrigin: undefined,
        positionName: 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,
        keywords: null,
        orderStatus: 1,
        refundStatus: null,
        corporationId: undefined,
        startTime: undefined,
        endTime: undefined,
        zoneId: undefined,
        startCompanyId: undefined,
        plateNumber: undefined,
        realName: undefined,
        vehicleCode: undefined,
        orderStartTime: undefined,
        orderEndTime: undefined,
      },
      crtTimeIndex: null,
      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,
        checkUserInfo: undefined,
      }, //还车记录
      tableKey: 0,
      dedDetailDTOListAll: undefined,
      otherImg: [],
      handover: false,
      returnVehicle: false,
      refundshow: false, //退款信息
      vehicleDetail: false, //交还车信息，默认全部显示
      order_btn_order_violcation_save: false,
      depositDetail: false,
      checkUserInfo: [],
      orderDetailInfo: {
        code: undefined,
        couponAmount: undefined,
        crtHost: undefined,
        crtName: undefined,
        crtTime: undefined,
        crtUser: undefined,
        damagesAmount: undefined,
        dedDetailDTO: undefined,
        detailId: undefined,
        endCompanyName: undefined,
        extraAmount: undefined,
        goodsAmount: undefined,
        hasDiscount: undefined,
        hasMemberRight: undefined,
        hasPay: undefined,
        id: undefined,
        illegalReserve: undefined,
        items: [],
        memberLevel: undefined,
        memberName: undefined,
        name: undefined,
        no: undefined,
        orderAmount: undefined,
        orderOrigin: undefined,
        positionName: undefined,
        // useAmountList:undefined,
        orderRentVehicleDetail: {
          bookRecordId: undefined,
          costDetail: undefined,
          crtTime: undefined,
          damageSafe: undefined,
          dayNum: 0,
          deposit: undefined,
          driverType: undefined,
          endAddr: undefined,
          endCity: undefined,
          endCityName: undefined,
          endCompanyId: undefined,
          endTime: undefined,
          fixedLossStatus: undefined,
          freeDays: undefined,
          handelViolation: undefined,
          id: undefined,
          modelId: undefined,
          orderId: undefined,
          rebate: undefined,
          score: undefined,
          startAddr: undefined,
          startCity: undefined,
          startCityName: undefined,
          startCompanyId: undefined,
          startTime: undefined,
          stime: undefined,
          suserid: undefined,
          updTime: undefined,
          usedDay: undefined,
          vehicleId: undefined,
          violateTrafficAmount: undefined,
        },
        orderVehicleCrosstownDto: {
          licenseIdCard: "",
          licenseImg: "",
          licenseName: "",
          licensePhone: "",
        },
        outTradeNo: undefined,
        payOrigin: undefined,
        payTime: undefined,
        picture: undefined,
        realAmount: undefined,
        refundStatus: undefined,
        rentVehiclePriceVO: undefined,
        startCompanyName: undefined,
        status: undefined,
        telephone: undefined,
        type: undefined,
        updTime: undefined,
        userCompanyStatus: undefined,
        userId: undefined,
        username: undefined,
        vehicalNumberPlat: undefined,
        vehicleUserLicenses: undefined,
        version: undefined,
        violateAmount: undefined,
        costDetail: {
          key: undefined,
          val: undefined,
          children: [
            {
              key: undefined,
              detail: undefined,
              val: undefined,
            },
          ],
        },
      },
    };
  },
  created() {
    let t = this;
    t.childrenStatus = t.orderStatus[0].children;
    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.get_all_companys(); //公司列表
    // this.getAllFn()
    getAllCompany((codeAndBranchCompany) => {
      this.allBranchCompany = codeAndBranchCompany;
    });
    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();
    },
    bookStartDate4Query: {
      get: function () {
        if (
          this.$utils.isString(this.listQuery.orderStartTime) &&
          this.listQuery.orderStartTime !== ""
        ) {
          return toEast8Date(this.listQuery.orderStartTime);
        }
        return undefined;
      },
      set: function (date) {
        if (this.$utils.isDate(date)) {
          this.listQuery.orderStartTime = formatDate(date, "yyyy-MM-dd");
        } else {
          this.listQuery.orderStartTime = undefined;
        }
      },
    },
    bookEndDate4Query: {
      get: function () {
        if (
          this.$utils.isString(this.listQuery.orderEndTime) &&
          this.listQuery.orderEndTime !== ""
        ) {
          return toEast8Date(this.listQuery.orderEndTime);
        }
        return undefined;
      },
      set: function (date) {
        if (this.$utils.isDate(date)) {
          this.listQuery.orderEndTime = formatDate(date, "yyyy-MM-dd");
        } else {
          this.listQuery.orderEndTime = undefined;
        }
      },
    },
    cityRegions() {
      if (!this.$utils.isInteger(this.form.addrProvince)) {
        return null;
      }
      return getSonRegionByCodes(this.form.addrProvince);
    },
  },
  methods: {
    //所有公司
    get_all_companys() {
      company_all_list().then((res) => {
        if (res.status == 200) {
          this.companys_list = res.data;
        }
      });
    },
    //违约金记录
    breakRecord(row) {
      let param = {
        orderNo: row.orderNo,
        flag: true,
      };
      orderDetail(param).then((data) => {
        if (data.status == 200) {
          if (!!data.data.orderRentVehicleDetail.costDetailExtend) {
            let info = JSON.parse(
              data.data.orderRentVehicleDetail.costDetailExtend
            );
            (this.breakRecordData.time = data.data.updTime),
              (this.breakRecordData.violateAmount = info.violateAmount + "元");
            this.breakRecordData.violateDesc = info.violateDesc;
            this.breakRecordPop = true;
          } else {
            (this.breakRecordData.time = data.data.updTime),
              (this.breakRecordData.violateAmount = "0元");
            this.breakRecordData.violateDesc = "无";
            this.breakRecordPop = true;
          }
        }
      });
    },
    //取消订单
    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.orderNo, 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;
      }
    },
    getOrderDetail() {
      if (this.form.orderNo) {
        var param = {
          orderNo: this.form.orderNo,
          flag: true,
        };
        orderDetail(param).then((response) => {
          this.orderDetailInfo = response.data;
          if (this.orderDetailInfo) {
            if (this.orderDetailInfo.memberLevel == 1) {
              this.orderDetailInfo.memberName = "普通会员";
            }
            if (this.orderDetailInfo.memberLevel == 2) {
              this.orderDetailInfo.memberName = "黄金会员";
            }
            if (this.orderDetailInfo.memberLevel == 3) {
              this.orderDetailInfo.memberName = "钻石会员";
            }
            if (this.orderDetailInfo.orderRentVehicleDetail.costDetail) {
              this.orderDetailInfo.costDetail = JSON.parse(
                this.orderDetailInfo.orderRentVehicleDetail.costDetail
              );
            }
            if (this.orderDetailInfo.costDetail.paramJson) {
              this.orderDetailInfo.rentVehiclePriceVO = JSON.parse(
                this.orderDetailInfo.costDetail.paramJson
              );
            }
            if (this.orderDetailInfo.items) {
              for (var i = 0; i < this.orderDetailInfo.items.length; i++) {
                if (this.orderDetailInfo.items[i].type == 104) {
                  this.orderDetailInfo.carArticlesJson = this.orderDetailInfo.items[
                    i
                  ].detail;
                }
              }
            }
            if (this.form.positionName) {
              this.orderDetailInfo.positionName = this.form.positionName;
            } else {
              this.orderDetailInfo.positionName = "普通用户";
            }
            if (this.orderDetailInfo.status == 2) {
              this.orderDetailInfo.ststusName = "取消";
            }
            if (this.orderDetailInfo.status == -1) {
              this.orderDetailInfo.ststusName = "定损中";
            }
            if (this.orderDetailInfo.status == 3) {
              this.orderDetailInfo.ststusName = "待付款";
            }
            if (this.orderDetailInfo.status == 4) {
              this.orderDetailInfo.ststusName = "待出行";
            }
            if (this.orderDetailInfo.status == 5) {
              this.orderDetailInfo.ststusName = "出行中";
            }
            if (this.orderDetailInfo.status == 6) {
              this.orderDetailInfo.ststusName = "已完成";
            }
          }
          this.rentDialogVisible = true;
        });
      }
    },
    checkViolateAmount() {
      if (this.topAmount < this.violateAmount) {
        this.$notify({
          title: "失败",
          message: "违约金额不能大于最高限制金额" + this.topAmount,
          type: "fail",
          duration: 2000,
        });
      }
    },

    getOrderStatus(e) {
      if (e == 1) {
        //订单状态
        this.listQuery.status = null;
      } else if (e == 2) {
        this.listQuery.status = 7;
      }
      this.childrenStatus = this.orderStatus[e - 1].children;
    },

    handleConfirm() {
      let params = {
        cancelReason: "后台取消",
        appUserId: this.row.userId,
        changeViolateAmount: this.violateAmount,
      };
      calculate(this.row.orderNo, 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.orderNo).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.startTime = this.form.startTime
        ? timestamp2Date(this.form.startTime)
        : "";
      this.form.endTime = this.form.endTime
        ? timestamp2Date(this.form.endTime)
        : "";
      this.getOrderDetail();
    },
    /**
     * 租车订单详情弹框关闭
     * */
    rentOrderDetailDialogEvent(e) {
      this.rentDialogVisible = false;
      if (e) {
        this.getList();
      }
    },
    /**
     * 操作-违章查询按钮，显示违章弹框
     */
    illegalInquiry(row) {
      this.activeInfo = row;
      this.currentRow = row;
      this.illegalVisible = true;
    },
    /**
     * 操作-查看详情按钮，显示详情弹框
     */
    detailInquiry(row) {
      this.currentRow = row;
      this.detailVisible = true;
    },
    /**
     * 关闭违章查询弹框
     * */
    illegalEvent(params) {
      this.illegalVisible = false;
      console.log(params);
      if (params) {
      }
    },
    /**
     * 关闭违章查询弹框
     * */
    detailEvent(params) {
      this.detailVisible = false;
      if (params) {
      }
    },
    handleHandoverOrderVehicle(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.orderVehicleQuery.orderId = this.form.orderId;
      this.orderVehicleQuery.type = 1;
      this.orderVehicleQuery.types = null;
      this.getAllOrderVehicleCrosstown();
      this.handover = true;
      this.returnVehicle = false;
      this.vehicleDetail = true;
      this.depositDetail = false;
    },
    getAllOrderVehicleCrosstown() {
      getOrderVehicleCrosstown(this.orderVehicleQuery).then((response) => {
        if (response.data.length <= 0) {
          alert("交还车记录不存在");
        } else {
          this.orderVehicleCrosstownVisible = true;
          this.orderReturnVehicleCrosstown = response.data[0];
          var sum = 0;
          if (this.orderReturnVehicleCrosstown.dedDetailDTOList) {
            this.orderReturnVehicleCrosstown.dedDetailDTOList.forEach(
              (element) => {
                sum += element.cost;
              }
            );
            this.dedDetailDTOListAll = sum;
          }
          if (this.orderReturnVehicleCrosstown.checkUserInfo) {
            this.checkUserInfo = JSON.parse(
              this.orderReturnVehicleCrosstown.checkUserInfo
            );
          } else {
            this.checkUserInfo = [];
          }
          if (response.data[0].imgs) {
            this.otherImg = response.data[0].imgs.split(",");
          }
        }
      });
    },

    handleReturnOrderVehicle(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.startTime = timestamp2Date(this.form.startTime);
      this.form.endTime = timestamp2Date(this.form.endTime);

      this.orderVehicleQuery.orderId = this.form.orderId;
      this.orderVehicleQuery.types = "2,3";
      this.orderVehicleQuery.type = null;
      this.getAllOrderVehicleCrosstown();
      this.returnVehicle = true;
      this.handover = false;
      this.vehicleDetail = true;
      this.depositDetail = false;
    },
    handleRefundVehicle(row) {
      this.activeInfo = row;
      var that = this;
      that.pictureList = [];
      that.dedDetail = [];
      that.depositRefundRecord = [];
      that.dedTotal = 0;
      that.Tel = "";
      getStep(row.orderNo + "&address=1").then((response) => {
        this.activeRecord = response.data[0];
        response.data.forEach(function (item) {
          if (item.type != 1) {
            that.Tel = item.customerPhone;
            that.type = item.type;
            that.crtTimeIndex = item.crtTime;
            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;
          }
        });
      });
      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.startTime = timestamp2Date(this.form.startTime);
      this.form.endTime = timestamp2Date(this.form.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,
        keywords: null,
        corporationId: undefined,
        orderStatus: 1,
        refundStatus: null,
        startTime: undefined,
        endTime: undefined,
        zoneId: undefined,
        orderEndTime: undefined,
        orderStartTime: undefined,
        startCompanyId: undefined,
      };
      this.getList();
    },
    /**
     * 获取订单列表
     */
    getList() {
      this.listLoading = true;
      if (this.listQuery.orderStartTime) {
        this.listQuery.startTime = toEast8Date(
          this.listQuery.orderStartTime
        ).getTime();
      }
      if (this.listQuery.orderEndTime) {
        this.listQuery.endTime =
          toEast8Date(this.listQuery.orderEndTime).getTime() +
          1000 * 3600 * 24 -
          1;
      }
      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) {
            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>
.voucher {
  width: 100px;
  height: 100px;
  border: 1px solid #d9d9d9;
  margin-right: 20px;
}
.label-text {
  margin-left: 10px;
  margin-right: 20px;
}

.label-title {
  margin-top: 15px;
  display: inline-block;
  width: 49%;
  color: #333;
}

.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 {
  /* border:1px solid red; */
}
.stepBox li {
  list-style: none;
  margin-bottom: 40px;
  /* position: absolute; */
}
.stepBox li p {
  display: inline-block;
  font-size: 14px;
  color: #333;
}
.stepBox li p span {
  /* color: #999; */
}
.successInline {
  background: rgb(0, 153, 255) !important;
}
.successInline::before {
  background: rgb(0, 153, 255) !important;
}
.stepBox li .inline:nth-child(1) {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* background: rgb(0, 153, 255); */
  background: #999;
  position: relative;
}
.stepBox li .inline:nth-child(1)::before {
  content: "";
  position: absolute;
  left: -40px;
  top: -51px;
  width: 100px;
  height: 1px;
  /* background: rgb(0, 153, 255); */
  background: #999;
  transform: rotate(90deg);
}
.stepBox li:first-child .inline::before {
  background: transparent !important;
}
.stepBox li p:nth-child(2) {
  margin-left: 30px;
  position: relative;
  top: -3px;
}
.title {
  font-size: 17px;
  color: #171413;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 10px;
  font-weight: 400;
  padding: 10px;
}

.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;
}
.el-form-item__content {
  display: block !important;
}
.orderstatus .el-form-item__content {
  margin-left: unset !important;
}
.status .el-form-item__content {
  margin-right: 10px;
}
</style>
