<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.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!=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="cancel(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;"
            />
          </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,
  calculate
} 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,
        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() {
    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) {
      this.$confirm("此操作将取消该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let params = {
          cancelReason: "后台取消",
          appUserId: row.userId
        };
        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: "success",
              duration: 2000
            });
          }
        });
      });
    },
    handleOrderDetail(row) {
			debugger
      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();
      // }
      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;
      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();
    },
    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>
