<template>
  <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
    <div class="filter-container" ref="filter-container">
      <el-form :rules="rules4Query" ref="queryForm" :inline="inline" :model="listQuery" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="车牌">
              <el-input v-model="listQuery.numberPlate" placeholder="请输入车牌"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆编码">
              <el-input v-model.number="listQuery.code" placeholder="请输入车辆编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆状态">
              <el-select class="filter-item" v-model="listQuery.status" placeholder="请选择车辆状态">
                <el-option :key="undefined" label="无" :value="undefined"></el-option>
                <el-option v-for="(val, key, index) in getAllVehicleStatus() " :key="val.code" :label="val.val"
                           :value="val.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="未预订日期" prop="notBookDateRange">
              <el-date-picker
                v-model="notBookDateRange"
                type="daterange"
                :editable="true"
                format="yyyy-MM-dd"
                placeholder="请输入未预订日期范围">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预订日期" prop="bookDateRange">
              <el-date-picker
                v-model="bookDateRange"
                type="daterange"
                :editable="true"
                format="yyyy-MM-dd"
                placeholder="请输入已预订日期范围">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分公司" prop="subordinateBranch">
              <el-select class="filter-item" v-model="listQuery.subordinateBranch" placeholder="请选择分公司">
                <el-option :key="undefined" label="无" :value="undefined"></el-option>
                <el-option v-for="item in allCompanies" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button class="filter-item" type="primary" :icon=" showMoreQueryFilter ? 'caret-top' : 'caret-bottom' "
                   v-waves @click="showMoreQueryFilter=!showMoreQueryFilter">
          更多条件
        </el-button>

        <transition name="fade">
          <div v-if="showMoreQueryFilter">
            <el-row>
              <el-col :span="8">
                <el-form-item label="车架号" prop="vin">
                  <el-input v-model="listQuery.vin" placeholder="请输入车架号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="保险公司" prop="insuranceCompany">
                  <el-select class="filter-item" v-model="listQuery.insuranceCompany" placeholder="请选择保险公司">
                    <el-option :key="undefined" label="无" :value="undefined"></el-option>
                    <el-option v-for="(val, key, index)  in getAllInsuranceCompany() " :key="val.code" :label="val.val"
                               :value="val.code"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="保险结束日期" prop="insuranceDateRange">
                  <el-date-picker
                    v-model="listQuery.insuranceDateRange"
                    type="daterange"
                    :editable="true"
                    format="yyyy-MM-dd"
                    placeholder="请输入保险结束日期范围">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="年审日期" prop="aVRange">
                  <el-date-picker
                    v-model="listQuery.aVRange"
                    type="daterange"
                    :editable="true"
                    format="yyyy-MM-dd"
                    placeholder="请输入年审日期范围">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="保养日期" prop="mRange">
                  <el-date-picker
                    v-model="listQuery.mRange"
                    type="daterange"
                    :editable="true"
                    format="yyyy-MM-dd"
                    placeholder="请输入保养日期范围">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </transition>
      </el-form>
      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" v-if="vehicleInfo_btn_add" style="margin-left: 10px;" @click="handleCreate"
                 type="primary" icon="edit">添加
      </el-button>
      <el-button class="filter-item" type="primary" :icon=" showMoreMoreCol ? 'caret-left' : 'caret-right' " v-waves
                 @click="showMoreMoreCol=!showMoreMoreCol">
        更多列
      </el-button>
    </div>


    <el-table :key='tableKey' :data="list" border fit highlight-current-row
              style="width: 100%">

      <el-table-column align="center" label="编号" width="65">
        <template scope="scope">
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column width="120" align="center" label="车牌">
        <template scope="scope">
          <span>{{scope.row.numberPlate}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" align="center" label="车辆状态">
        <template scope="scope">
          <span>{{getVehicleStatus(scope.row.status)}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" align="center" label="车辆品牌">
        <template scope="scope">
          <span>{{getBrand(scope.row.brand)}}</span>
        </template>
      </el-table-column>

      <el-table-column width="180" align="center" label="所属子公司">
        <template scope="scope">
          <span>{{scope.row.subBranchName}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" align="center" label="用途">
        <template scope="scope">
          <span>{{getUseType(scope.row.useType)}}</span>
        </template>
      </el-table-column>

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


      <el-table-column width="200" align="center" v-if="showMoreMoreCol" label="车架号">
        <template scope="scope">
          <span>{{scope.row.vin}}</span>
        </template>
      </el-table-column>

      <el-table-column width="65" align="center" v-if="showMoreMoreCol" label="保险公司">
        <template scope="scope">
          <span>{{getInsuranceCompany(scope.row.insuranceCompany)}}</span>
        </template>
      </el-table-column>

      <el-table-column width="150" align="center" v-if="showMoreMoreCol" label="保险单号">
        <template scope="scope">
          <span>{{scope.row.insuranceNo}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" align="center" v-if="showMoreMoreCol" label="保险开始时间">
        <template scope="scope">
          <span>{{scope.row.insuranceStartDate}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" align="center" v-if="showMoreMoreCol" label="保险结束时间">
        <template scope="scope">
          <span>{{scope.row.insuranceEndDate}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" align="center" v-if="showMoreMoreCol" label="年审时间">
        <template scope="scope">
          <span>{{scope.row.annualVerificationDate}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" align="center" v-if="showMoreMoreCol" label="保养时间">
        <template scope="scope">
          <span>{{scope.row.maintenanceDate}}</span>
        </template>
      </el-table-column>

      <el-table-column width="65" align="center" v-if="showMoreMoreCol" label="保养里程数">
        <template scope="scope">
          <span>{{scope.row.maintenanceMileage}}</span>
        </template>
      </el-table-column>

      <el-table-column width="120" align="center" v-if="showMoreMoreCol" label="所属人">
        <template scope="scope">
          <span>{{getBelongToNameStr(scope.row)}}</span>
        </template>
      </el-table-column>


      <el-table-column width="80" align="center" v-if="showMoreMoreCol" label="行驶证">
        <template scope="scope">
          <el-button
            v-if="$utils.isString(scope.row.drivingLicensePath) && !$utils.isEmpty(scope.row.drivingLicensePath)"
            size="small" type="success" @click="showImgDialog(scope.row.drivingLicensePath)">查看
          </el-button>
        </template>
      </el-table-column>

      <el-table-column width="120" align="center" v-if="showMoreMoreCol" label="发动机号">
        <template scope="scope">
          <span>{{scope.row.engineNum}}</span>
        </template>
      </el-table-column>

      <el-table-column width="120" align="center" v-if="showMoreMoreCol" label="收车日期">
        <template scope="scope">
          <span>{{scope.row.receiveTime}}</span>
        </template>
      </el-table-column>

      <el-table-column width="120" align="center" v-if="showMoreMoreCol" label="生产商">
        <template scope="scope">
          <span>{{scope.row.manufacturer}}</span>
        </template>
      </el-table-column>

      <el-table-column width="180" align="center" v-if="showMoreMoreCol" label="最后更新时间">
        <template scope="scope">
          <span>{{scope.row.updateTime?scope.row.updateTime:scope.row.createTime}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="500">
        <template scope="scope">
          <el-button v-if="vehicleInfo_btn_edit" size="small" type="success" @click="handleUpdate(scope.row)">编辑
          </el-button>
          <el-button v-if="scope.row.status == 1" size="small" type="success" @click="departureHandler(scope.row)">出车
          </el-button>
          <el-button v-if="scope.row.status == 4" size="small" type="success" @click="arrivalHandler(scope.row)">收车
          </el-button>

          <el-button v-if="scope.row.status == 1" size="small" type="success" @click="upkeepHandler(scope.row)">保养
          </el-button>
          <el-button v-if="scope.row.status == 5" size="small" type="success" @click="upkeepEndHandler(scope.row)">
            保养结束
          </el-button>

          <el-button v-if="vehicleInfo_btn_apply && checkIfRuning(scope.row) " size="small" type="success"
                     @click="handleApply(scope.row)">申请预订
          </el-button>
          <el-button size="small" type="success" @click="handleBookInfo(scope.row)">预订信息</el-button>
          <el-button size="small" type="success" @click="handleDepartureLog(scope.row)">出车记录</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>


    <!--     对话框相关html元素  -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">

      <el-form :model="form" :rules="rules" ref="form" label-width="90px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="车辆编码" prop="code">
              <el-input v-model.number="form.code" placeholder="不填将自动生成"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌" prop="numberPlate">
              <el-input v-model="form.numberPlate" placeholder="输入车牌"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="车辆状态" prop="status">
              <el-select class="filter-item" v-model="form.status" placeholder="请选择车辆状态">
                <el-option v-for="(val, key, index)   in getAllVehicleStatus() " :key="val.code" :label="val.val"
                           :value="val.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="车辆品牌" prop="brand">
              <el-select class="filter-item" v-model="form.brand" placeholder="请选择车辆品牌">
                <el-option :key="getUnkownBrandCode" label="未知" :value="getUnkownBrandCode"></el-option>
                <el-option v-for="item  in getAllBranch() " :key="item.code" :label="item.val"
                           :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="分公司" prop="subordinateBranch">
              <el-select class="filter-item" v-model="form.subordinateBranch" placeholder="请选择分公司">
                <el-option :key="undefined" label="无" :value="undefined"></el-option>
                <el-option v-for="item in allCompanies" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用途" prop="useType">
              <el-select class="filter-item" v-model="form.useType" placeholder="请选择用途">
                <el-option :key="undefined" label="无" :value="undefined"></el-option>
                <el-option v-for="item  in getAllUseType() " :key="item.code" :label="item.val"
                           :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="车架号" prop="vin">
              <el-input v-model="form.vin" placeholder="请输入车架号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年审时间" prop="annualVerificationDate">
              <el-date-picker
                v-model="form.annualVerificationDate"
                type="date"
                :editable="true"
                format="yyyy-MM-dd"
                placeholder="请选择年审时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>


        </el-row>

        <el-row>

          <el-col :span="12">
            <el-form-item label="保险公司" prop="insuranceCompany">
              <el-select class="filter-item" v-model="form.insuranceCompany" placeholder="请选择保险公司">
                <el-option :key="undefined" label="无" :value="undefined"></el-option>
                <el-option v-for="(val, key, index)  in getAllInsuranceCompany() " :key="val.code" :label="val.val"
                           :value="val.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="保险单号" prop="insuranceNo">
              <el-input v-model="form.insuranceNo" placeholder="请输入保险单号"></el-input>
            </el-form-item>
          </el-col>

        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="保养时间" prop="annualVerificationDate">
              <el-date-picker
                v-model="form.maintenanceDate"
                type="date"
                :editable="true"
                format="yyyy-MM-dd"
                placeholder="请选择保养日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="保养里程数" prop="maintenanceMileage">
              <el-input v-model.number="form.maintenanceMileage" placeholder="请输入保养里程数"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="保险日期" prop="insuranceDateRange4form">
              <el-date-picker
                v-model="form.insuranceDateRange4form"
                type="daterange"
                :editable="true"
                format="yyyy-MM-dd"
                placeholder="请输入保险日期范围"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所属人" prop="maintenanceMileage">
              <el-select v-model.number="form.belongTo" placeholder="请选择所属人">
                <el-option v-for="(val, key, index)   in getAllBelong2Type() " :key="val.code" :label="val.val"
                           :value="val.code"></el-option>
              </el-select>
              <el-input v-if="typeof(form.belongTo) !== 'undefined' && form.belongTo != 1" v-model="form.belongToName"
                        placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="收车时间" prop="receiveTime">
              <el-date-picker
                v-model="form.receiveTime"
                type="date"
                :editable="true"
                format="yyyy-MM-dd HH:mm:dd"
                placeholder="请选择收车时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="生产商" prop="manufacturer">
              <el-input v-model.number="form.manufacturer" placeholder="请输入生产商"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="发动机号" prop="engineNum">
              <el-input v-model.number="form.engineNum" placeholder="请输入发动机号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" :rows="5" v-model="form.remark" placeholder="请输入备注信息"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="行驶证" prop="drivingLicensePath" :style="{display:'block'}">
              <el-upload
                class="avatar-uploader"
                :action="BASE_API + '/vehicle/vehicleInfo/upload/drivingLicense'"
                :show-file-list="false"
                :headers="getHeaderWithToken"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload" :style="{display:'block'}">
                <img v-if="$utils.isString(form.drivingLicensePath) && !$utils.isEmpty(form.drivingLicensePath)"
                     :src="getDrivingLicenseUrl(form.drivingLicensePath)" class="avatar" :style="{display:'block'}">
                <i v-else class="el-icon-plus avatar-uploader-icon" :style="{lineHeight:'350px'}"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
        <el-button v-else type="primary" @click="update('form')">确 定</el-button>
      </div>
    </el-dialog>


    <!--     申请对话框相关html元素  -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogForm4ApplyVisible">

      <el-form :model="form4Apply" :rules="rules4Apply" ref="form4Apply" label-width="120px">
        <el-form-item label="预订日期范围" prop="bookDateRange4Apply">
          <el-date-picker
            v-model="bookDateRange4Apply"
            type="daterange"
            :editable="true"
            format="yyyy-MM-dd"
            placeholder="请输入预订日期范围"
            :picker-options="pickerOptions4Apply"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="提车分公司" prop="liftCompany">
          <el-select class="filter-item" v-model.number="form4Apply.liftCompany" placeholder="请选择提车分公司">
            <el-option :key="undefined" label="无" :value="undefined"></el-option>
            <el-option v-for="item in allCompanies" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目的地" prop="destination">
          <el-input v-model="form4Apply.destination" placeholder="请输入目的地"></el-input>
        </el-form-item>
        <el-form-item label="随行物品" prop="selectedAccItem">
          <el-input type="textarea" v-model="getSelectedAccItemStr" :rows="5" icon="menu" @focus="handleAccItemSelect"
                    clearable placeholder="请选择随行物品"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form4Apply.remark" placeholder="请输入备注信息"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel4Apply('form4Apply')">取 消</el-button>
        <el-button type="primary" @click="apply('form4Apply')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="行驶证" :visible.sync="dialogForm4LicenceVisible">
      <img :style="{width:'100%'}" :src="licenceSrcUrl">
    </el-dialog>


    <book-info-viewer ref="bookInfoViewer"></book-info-viewer>
    <acc-item-selector v-on:select="accItemSelected" :selectedAccItem="form4Apply.selectedAccItem"
                       v-on:clear="accItemClear" ref="accItemSelector"></acc-item-selector>
    <!-- 出车信息弹窗 -->
    <el-dialog title="出车" :visible.sync="departureDialogVisible">
      <el-form :model="departureForm" :rules="rules" ref="form" label-width="90px">
        <el-form-item label="车牌号">
          <el-input v-model="departureForm.numberPlate" disabled></el-input>
        </el-form-item>
        <el-form-item label="出车时间" prop="departureDate">
          <el-date-picker v-model="departureForm.departureDate" type="date" disabled
                          format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="出车分公司" prop="departureBranchCompanyId">
          <el-select class="filter-item" v-model="departureForm.departureBranchCompanyId" placeholder="请选择分公司">
            <el-option v-for="item in allCompanies" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用途" prop="use">
          <el-input v-model="departureForm.use" placeholder="请输入出车用途"></el-input>
        </el-form-item>
        <el-form-item label="使用人" prop="user">
          <el-input v-model="departureForm.user" placeholder="请输入出车使用人"></el-input>
        </el-form-item>
        <el-form-item label="使用人联系方式" prop="userTel">
          <el-input v-model="departureForm.userTel" placeholder="请输入出车使用人联系方式"></el-input>
        </el-form-item>
        <el-form-item label="验车人" prop="checkMan">
          <el-input v-model="departureForm.checkMan" placeholder="请输入出车验车人"></el-input>
        </el-form-item>
        <el-form-item label="验车人联系方式" prop="checkManTel">
          <el-input v-model="departureForm.checkManTel" placeholder="请输入出车验车人联系方式"></el-input>
        </el-form-item>
        <el-form-item label="公里数" prop="mileage">
          <el-input v-model="departureForm.mileage" placeholder="请输入出车时公里数"></el-input>
        </el-form-item>
        <el-form-item label="预计还车分公司" prop="expectArrivalBranchCompanyId">
          <el-select class="filter-item" v-model="departureForm.expectArrivalBranchCompanyId" placeholder="请选择分公司">
            <el-option v-for="item in allCompanies" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDeparture">取 消</el-button>
        <el-button type="primary" @click="departureVehicleHandler">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 收车信息弹窗 -->
    <el-dialog title="收车" :visible.sync="arrivalDialogVisible">
      <el-form :model="arrivalForm" :rules="rules" ref="form" label-width="90px">
        <el-form-item label="车牌号">
          <el-input v-model="arrivalForm.numberPlate" disabled></el-input>
        </el-form-item>
        <el-form-item label="出车时间" prop="arrivalDate">
          <el-date-picker v-model="arrivalForm.arrivalDate" type="date" disabled
                          format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="收车人" prop="checkMan">
          <el-input v-model="arrivalForm.recycleMan" placeholder="请输入收车人"></el-input>
        </el-form-item>
        <el-form-item label="收车人联系方式" prop="checkManTel">
          <el-input v-model="arrivalForm.recycleManTel" placeholder="请输入收车人联系方式"></el-input>
        </el-form-item>
        <el-form-item label="公里数" prop="mileage">
          <el-input v-model="arrivalForm.mileage" placeholder="请输入收车时公里数"></el-input>
        </el-form-item>
        <el-form-item label="还车分公司" prop="arrivalBranchCompanyId">
          <el-select class="filter-item" v-model="arrivalForm.arrivalBranchCompanyId" placeholder="请选择分公司">
            <el-option v-for="item in allCompanies" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelArrival">取 消</el-button>
        <el-button type="primary" @click="arrivalVehicleHandler">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 车辆保养弹窗 -->
    <el-dialog title="保养" :visible.sync="upkeepDialogVisible">
      <el-form :model="upkeepForm" :rules="rules" ref="form" label-width="90px">
        <el-form-item label="车牌号">
          <el-input v-model="upkeepForm.numberPlate" disabled></el-input>
        </el-form-item>
        <el-form-item label="保养人" prop="operator">
          <el-input v-model="upkeepForm.operator" placeholder="请输入车辆保养人"></el-input>
        </el-form-item>
        <el-form-item label="公里数" prop="mileage">
          <el-input v-model="upkeepForm.mileage" placeholder="请输入保养时公里数"></el-input>
        </el-form-item>
        <el-form-item label="总费用" prop="amount">
          <el-input v-model="upkeepForm.amount" placeholder="请输入保养总费用"></el-input>
        </el-form-item>
        <el-form-item label="审批人" prop="approvers">
          <el-input v-model="upkeepForm.approvers" placeholder="请输入保养审批人"></el-input>
        </el-form-item>
        <el-form-item label="分公司" prop="branchCompanyId">
          <el-select class="filter-item" v-model="upkeepForm.branchCompanyId" placeholder="请选择分公司">
            <el-option v-for="item in allCompanies" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="保养项目" prop="upkeepItems">
          <el-checkbox-group v-model="upkeepForm.upkeepItems">
            <el-checkbox v-for="item in allUpkeepItems" :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUpkeep">取 消</el-button>
        <el-button type="primary" @click="upkeepVehicleHandler">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import 'static/css/uploadImg.css';// 引入图片上传组件对话框
  import {
    page,
    addObj,
    getObj,
    book,
    getBookedInfoIn2Month,
    getBookedInfo,
    putObj
  } from 'api/vehicle/vehicleInfo/';

  import {
    getConstantByTypeAndCode,
    getConstantListByType,
    getAllInsuranceCompany,
    getInsuranceCompany
  } from 'api/base_info/constant/';

  import {
    departureVehicle,
    arrivalVehicle,
    upkeepVehicle,
    upkeepEndVehicle
  } from 'api/vehicle/active';

  import {
    getAllUpkeepItem
  } from 'api/vehicle/upkeep';

  import {
    getSonRegionByCodes,
    getRegionByCodes,
  } from 'api/base_info/region/';

  import {
    VEHICLE_CONSTANT_VEHICLE_BRAND,
    VEHICLE_CONSTANT_VEHICLE_USE,
    VEHICLE_CONSTANT_BRAND_CODE_UNKOWN,
    BELONG_TO_TYPE_OWN,
    VEHICLE_CONSTANT_USE_TYPE_UNKOWN,
    VEHICLE_CONSTANT_STATUS_NORMAL
  } from '../../../store/modules/baseInfo';

  import {
    getAllCompany
  } from 'api/base_info/branch_company/';

  import {
    formatDate
  } from 'utils/dateFormattor';

  import {
    toEast8Date,
    deepCopyDate,
    newEast8Date,
    convertDate2Str
  } from 'utils/dateUtils';

  import rsCode from '../../../utils/rsCode';

  import {mapGetters} from 'vuex';
  import {
    getToken
  } from 'utils/auth';

  import bookInfoViewer from '../bookInfoViewer';
  import accItemSelector from '../accompanyingItem/accItemSelector.vue';
  import Element from "../../admin/menu/components/element";


  export default {
    name: 'vehicleInfo',
    components: {
      Element,
      bookInfoViewer,
      accItemSelector
    },
    data() {
      return {
        BASE_API: process.env.BASE_API,
        dialogForm4LicenceVisible: false,
        licenceSrcUrl: undefined,
        showLoadingBody: false,
        form: {
          status: undefined,
          code: undefined,
          numberPlate: undefined,
          brand: undefined,
          subordinateBranch: undefined,
          useType: undefined,
          vin: undefined,
          insuranceNo: undefined,
          insuranceCompany: undefined,
          insuranceDateRange4form: undefined,
          annualVerificationDate: undefined,
          maintenanceDate: undefined,
          belongTo: undefined,
          belongToName: undefined,
          engineNum: undefined,
          manufacturer: undefined,
          receiveTime: undefined,
          drivingLicensePath: undefined,
          remark: undefined
        },
        rules: {
          subordinateBranch: [
            {
              type: 'integer',
              required: true,
              message: '请选择公司',
              trigger: 'blur'
            }
          ],
          maintenanceMileage: [this.integerValidator()],
          code: [
            {
              validator: (rule, value, callback) => {
                if (this.$utils.isUndefined(value) || this.$utils.isNull(value)) {
                  return callback();
                }
                if (!this.$utils.isInteger(value)) {
                  return callback(new Error('编码必须为整数'));
                }
                if (value < 1 || value > 9999999999) {
                  return callback(new Error('编码合法范围：[1 - 9999999999]'));
                }
                callback();
              },
              trigger: 'blur'
            }
          ],
          vin: [
            {
              min: 0,
              max: 200,
              message: '长度小于 200 个字符',
              trigger: 'blur'
            }
          ],
          numberPlate: [
            {
              min: 0,
              max: 20,
              message: '长度小于 20 个字符',
              trigger: 'blur'
            }
          ],
          remark: [
            {
              min: 0,
              max: 2000,
              message: '长度小于 2000 个字符',
              trigger: 'blur'
            }
          ]
        },
        form4Apply: {
          bookStartDate: undefined,
          bookEndDate: undefined,
          vehicle: undefined,
          liftAddr: undefined,
          liftCompany: undefined,
          destination: undefined,
          selectedAccItem: undefined,
          remark: undefined
        },
        pickerOptions4Apply: {
          disabledDate: this.checkBookDate
        },
        rules4Query: {
          vin: [
            {
              min: 0,
              max: 200,
              message: '长度小于 200 个字符',
              trigger: 'blur'
            }
          ],
          subordinateBranch: [
            {
              validator: (rule, value, callback) => {
                if ((this.$utils.isString(this.listQuery.bookedStartDate) && this.listQuery.bookedStartDate !== '') ||
                  (this.$utils.isString(this.listQuery.bookedEndDate) && this.listQuery.bookedEndDate !== '') ||
                  (this.$utils.isString(this.listQuery.notBookedStartDate) && this.listQuery.notBookedStartDate !== '') ||
                  (this.$utils.isString(this.listQuery.notBookedEndDate) && this.listQuery.notBookedEndDate !== '')) {
                  if (!this.listQuery.subordinateBranch) {
                    return callback(new Error('若需按预定日期查询车辆，选择分公司'));
                  }
                }
                callback();
              },
              trigger: 'blur'
            }
          ],
          notBookDateRange: [
            {
              validator: (rule, value, callback) => {
                if (this.notBookDateRange) {
                  let startDate = toEast8Date(this.listQuery.notBookedStartDate);
                  let endDate = toEast8Date(this.listQuery.notBookedEndDate);
                  if (this.$utils.isDate(startDate) && startDate.setMonth(startDate.getMonth() + 2) < endDate) {
                    return callback(new Error('日期范围不能超过2个月'));
                  }
                }
                callback();
              },
              trigger: 'blur'
            }
          ],
          bookDateRange: [
            {
              validator: (rule, value, callback) => {
                if (this.bookDateRange) {
                  let startDate = toEast8Date(this.listQuery.bookedStartDate);
                  let endDate = toEast8Date(this.listQuery.bookedEndDate);
                  if (this.$utils.isDate(startDate) && startDate.setMonth(startDate.getMonth() + 2) < endDate) {
                    return callback(new Error('日期范围不能超过2个月'));
                  }
                }
                callback();
              },
              trigger: 'blur'
            }
          ]
        },
        rules4Apply: {
          bookDateRange4Apply: [
            {
              validator: (rule, value, callback) => {
                if (!this.$utils.isArray(this.bookDateRange4Apply) || this.bookDateRange4Apply.length === 0) {
                  return callback(new Error('请输入预定时间。'));
                }
                let [oriStartDate, ortEndDate] = this.bookDateRange4Apply;
                if (!this.$utils.isDate(oriStartDate) || !this.$utils.isDate(ortEndDate)) {
                  return callback(new Error('请输入预定时间。'));
                }
                let [startDate, endDate] = [deepCopyDate(oriStartDate), deepCopyDate(ortEndDate)];
                if (!this.$utils.isDate(oriStartDate) || !this.$utils.isDate(ortEndDate)) {
                  return callback();
                }
                for (let curDate = startDate; curDate <= endDate; curDate.setDate(curDate.getDate() + 1)) {
                  if (this.checkBookDate(curDate)) {
                    return callback(new Error('请选择从今天起两个月内，未预定的时间。'));
                  }
                }
                callback();
              },
              trigger: 'blur'
            }
          ],
          liftCompany: [
            {
              required: true,
              message: '请选择提车分公司',
              trigger: 'blur',
              type: 'integer'
            }
          ],
          destination: [
            {
              min: 0,
              max: 200,
              message: '长度小于 200 个字符',
              trigger: 'blur'
            }
          ],
          remark: [
            {
              min: 0,
              max: 2000,
              message: '长度小于 2000 个字符',
              trigger: 'blur'
            }
          ]
        },
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          vin: undefined,
          insuranceCompany: undefined,
          mileageRangeStart: undefined,
          mileageRangeEnd: undefined,
          insuranceDateRange: undefined,
          mRange: undefined,
          aVRange: undefined,
          subordinateBranch: undefined,
          numberPlate: undefined,
          status: undefined,
          bookedStartDate: undefined,
          bookedEndDate: undefined,
          notBookedStartDate: undefined,
          notBookedEndDate: undefined,
          code: undefined
        },
        showMoreQueryFilter: false,
        showMoreMoreCol: false,
        inline: true,
        dialogFormVisible: false,
        dialogForm4ApplyVisible: false,
        curBookedInfo3Month: undefined,
        curBookedInfo: undefined,
        dialogStatus: '',
        vehicleInfo_btn_edit: false,
        vehicleInfo_btn_add: false,
        vehicleInfo_btn_apply: false,
        allCompanies: {},
        textMap: {
          update: '编辑',
          create: '创建',
          apply: '预定申请'
        },
        tableKey: 0,
        departureDialogVisible: false,
        departureForm: {
          vehicleId: null,
          numberPlate: null,
          departureDate: null,
          departureBranchCompanyId: null,
          use: null,
          user: null,
          userTel: null,
          checkMan: null,
          checkManTel: null,
          expectArrivalBranchCompanyId: null,
          mileage: null
        },
        arrivalDialogVisible: false,
        arrivalForm: {
          vehicleId: null,
          numberPlate: null,
          arrivalDate: null,
          recycleMan: null,
          recycleManTel: null,
          mileage: null,
          arrivalBranchCompanyId: null
        },
        upkeepDialogVisible: false,
        upkeepForm: {
          vehicleId: null,
          numberPlate: null,
          operator: null,
          date: null,
          mileage: null,
          amount: null,
          approvers: null,
          branchCompanyId: null,
          upkeepItems: []
        },
        allUpkeepItems: null
      }
    },
    created() {
      this.getList();
      getAllCompany(codeAndBranchCompany => {
        this.allCompanies = codeAndBranchCompany;
      });
      getAllUpkeepItem().then(response => {
        this.allUpkeepItems = response.data;
      });
      this.vehicleInfo_btn_edit = this.elements['vehicleInfo:btn_edit'];
      this.vehicleInfo_btn_add = this.elements['vehicleInfo:btn_add'];
      this.vehicleInfo_btn_apply = this.elements['vehicleInfo:btn_apply'];
    },
    computed: {
      ...mapGetters([
        'elements',
        'belong2Type',
        'vehicleStatus'
      ]),
      getHeaderWithToken() {
        return {Authorization: getToken()};
      },
      getSelectedAccItemStr() {
        if (!this.$utils.isEmpty(this.form4Apply.selectedAccItem)) {
          let rsStr = '';
          for (let key in this.form4Apply.selectedAccItem) {
            rsStr = rsStr + this.$refs.accItemSelector.getNameById(key) + ' : ' + this.form4Apply.selectedAccItem[key] + '\n';
          }
          return rsStr;
        }
        return '';
      },
      getUnkownBrandCode: () => VEHICLE_CONSTANT_BRAND_CODE_UNKOWN,
      getCurBookedInfo: function () {
        if (!this.$utils.isEmpty(this.curBookedInfo3Month) && this.curBookedInfo3Month.length > 0) {
          let rs = {};
          for (let index in this.curBookedInfo3Month) {
            rs[this.curBookedInfo3Month[index].yearMonth] = this.curBookedInfo3Month[index].bookedDate;
          }
          return rs;
        }
        return undefined;
      },
      bookDateRange: {
        get: function () {
          let startDate = undefined;
          let endDate = undefined;
          if (this.$utils.isString(this.listQuery.bookedStartDate) && this.listQuery.bookedStartDate !== '') {
            startDate = toEast8Date(this.listQuery.bookedStartDate);
          }
          if (this.$utils.isString(this.listQuery.bookedEndDate) && this.listQuery.bookedEndDate !== '') {
            endDate = toEast8Date(this.listQuery.bookedEndDate);
          }
          return [startDate, endDate];
        },
        set: function ([startDate, endDate]) {
          if (this.$utils.isDate(startDate)) {
            this.listQuery.bookedStartDate = formatDate(startDate, 'yyyy-MM-dd');
          } else {
            this.listQuery.bookedStartDate = undefined;
          }
          if (this.$utils.isDate(endDate)) {
            this.listQuery.bookedEndDate = formatDate(endDate, 'yyyy-MM-dd');
          } else {
            this.listQuery.bookedEndDate = undefined;
          }
        }
      },
      notBookDateRange: {
        get: function () {
          let startDate = undefined;
          let endDate = undefined;
          if (this.$utils.isString(this.listQuery.notBookedStartDate) && this.listQuery.notBookedStartDate !== '') {
            startDate = toEast8Date(this.listQuery.notBookedStartDate);
          }
          if (this.$utils.isString(this.listQuery.notBookedEndDate) && this.listQuery.notBookedEndDate !== '') {
            endDate = toEast8Date(this.listQuery.notBookedEndDate);
          }
          return [startDate, endDate];
        },
        set: function ([startDate, endDate]) {
          if (this.$utils.isDate(startDate)) {
            this.listQuery.notBookedStartDate = formatDate(startDate, 'yyyy-MM-dd');
          } else {
            this.listQuery.notBookedStartDate = undefined;
          }
          if (this.$utils.isDate(endDate)) {
            this.listQuery.notBookedEndDate = formatDate(endDate, 'yyyy-MM-dd');
          } else {
            this.listQuery.notBookedEndDate = undefined;
          }
        }
      },
      bookDateRange4Apply: {
        get: function () {
          let startDate = undefined;
          let endDate = undefined;
          if (this.$utils.isString(this.form4Apply.bookStartDate) && this.form4Apply.bookStartDate !== '') {
            startDate = toEast8Date(this.form4Apply.bookStartDate);
          }
          if (this.$utils.isString(this.form4Apply.bookEndDate) && this.form4Apply.bookEndDate !== '') {
            endDate = toEast8Date(this.form4Apply.bookEndDate);
          }
          return [startDate, endDate];
        },
        set: function ([startDate, endDate]) {
          if (this.$utils.isDate(startDate)) {
            this.form4Apply.bookStartDate = formatDate(startDate, 'yyyy-MM-dd');
          } else {
            this.form4Apply.bookStartDate = undefined;
          }
          if (this.$utils.isDate(endDate)) {
            this.form4Apply.bookEndDate = formatDate(endDate, 'yyyy-MM-dd');
          } else {
            this.form4Apply.bookEndDate = undefined;
          }
        }
      }
    },
    methods: {
      upkeepEndHandler(row) {
        console.dir(row);
        this.$confirm('此操作将结束保养, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          upkeepEndVehicle({
            vehicleId: row.id
          }).then(() => {
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            });
            this.getList();
          });
        });
      },
      upkeepVehicleHandler() {
        upkeepVehicle(this.upkeepForm).then(response => {
          if (response.code === rsCode.RS_CODE_SUC) {
            this.upkeepDialogVisible = false;
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            });
            this.getList();
          } else {
            this.$notify({
              title: '失败',
              message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
              type: 'error',
              duration: 2000
            });
          }
        })
      },
      cancelUpkeep() {
        this.cleanUpkeepForm();
        this.upkeepDialogVisible = false;
      },
      upkeepHandler(row) {
        this.cleanUpkeepForm();
        this.upkeepForm.vehicleId = row.id;
        this.upkeepForm.numberPlate = row.numberPlate;
        this.upkeepDialogVisible = true;
      },
      cleanUpkeepForm() {
        this.upkeepForm = {
          vehicleId: null,
          numberPlate: null,
          operator: null,
          date: null,
          mileage: null,
          amount: null,
          approvers: null,
          branchCompanyId: null,
          upkeepItems: []
        }
      },
      handleDepartureLog(row) {
        this.$router.push({
          path: '/vehicle/vehicleDepartureLog',
          query: {
            numberPlate: row.numberPlate
          }
        });
      },
      arrivalHandler(row) {
        // open dialog
        this.arrivalDialogVisible = true;
        this.clearArrivalForm();
        this.arrivalForm.vehicleId = row.id;
        this.arrivalForm.numberPlate = row.numberPlate;
        this.arrivalForm.vehicleDate = Date();
      },
      cancelArrival() {
        this.arrivalDialogVisible = false;
        this.clearArrivalForm();
      },
      arrivalVehicleHandler() {
        arrivalVehicle(this.arrivalForm).then(response => {
          if (response.code === rsCode.RS_CODE_SUC) {
            this.arrivalDialogVisible = false;
            this.$notify({
              title: '成功',
              message: '收车成功',
              type: 'success',
              duration: 2000
            });
          } else {
            this.$notify({
              title: '失败',
              message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
              type: 'error',
              duration: 2000
            });
          }
        });
      },
      clearArrivalForm() {
        this.arrivalForm = {
          vehicleId: null,
          numberPlate: null,
          arrivalDate: null,
          recycleMan: null,
          recycleManTel: null,
          mileage: null,
          arrivalBranchCompanyId: null
        };
      },
      departureHandler(row) {
        // open dialog
        this.departureDialogVisible = true;
        this.clearDepartureForm();
        this.departureForm.vehicleId = row.id;
        this.departureForm.numberPlate = row.numberPlate;
        this.departureForm.departureDate = Date();
      },
      cancelDeparture() {
        this.departureDialogVisible = false;
        this.clearDepartureForm();
      },
      clearDepartureForm() {
        this.departureForm = {
          vehicleId: null,
          numberPlate: null,
          departureDate: null,
          departureBranchCompanyId: null,
          use: null,
          user: null,
          userTel: null,
          checkMan: null,
          checkManTel: null,
          expectArrivalBranchCompanyId: null,
          mileage: null
        }
      },
      departureVehicleHandler() {
        departureVehicle(this.departureForm).then(response => {
          if (response.code === rsCode.RS_CODE_SUC) {
            this.departureDialogVisible = false;
            this.$notify({
              title: '成功',
              message: '出车成功',
              type: 'success',
              duration: 2000
            });
          } else {
            this.$notify({
              title: '失败',
              message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
              type: 'error',
              duration: 2000
            });
          }
        });
      },
      getAllBelong2Type: function () {
        return this.belong2Type;
      },
      getBelongToNameStr(row) {
        if (!this.$utils.isInteger(row.belongTo)) {
          return undefined;
        }
        if (BELONG_TO_TYPE_OWN === row.belongTo) {
          return this.belong2Type[row.belongTo].val;
        }
        if (this.$utils.isString(row.belongToName) && !this.$utils.isEmpty(row.belongToName)) {
          return row.belongToName;
        }
        return undefined;
      },
      showImgDialog(drivingLicensePath) {
        this.licenceSrcUrl = this.getDrivingLicenseUrl(drivingLicensePath);
        this.dialogForm4LicenceVisible = true;
      },
      getDrivingLicenseUrl(drivingLicensePath) {
        return process.env.BASE_API +
          '/vehicle/vehicleInfo/download/drivingLicense?realFileRelPath=' + encodeURI(drivingLicensePath);
      },
      handleAvatarSuccess(res, file) {
        this.form.drivingLicensePath = res.data;
        this.showLoadingBody = false;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/gif';
        const isLt2M = file.size / 1024 / 1024 < 10;

        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG/GIF 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 10MB!');
        }
        this.showLoadingBody = true;
        return isJPG && isLt2M;
      },
      accItemSelected(selected) {
        this.form4Apply.selectedAccItem = selected;
      },
      accItemClear() {
        this.form4Apply.selectedAccItem = undefined;
      },
      handleAccItemSelect() {
        this.$refs.accItemSelector.show();
      },
      getAllInsuranceCompany,
      getInsuranceCompany,
      integerValidator: function () {
        return {
          validator: (rule, value, callback) => {
            if (this.$utils.isUndefined(value) || this.$utils.isNull()) {
              return callback();
            }
            if (!this.$utils.isInteger(value)) {
              return callback(new Error('必须为整数'));
            }
            if (value < 1 || value > 9999999999) {
              return callback(new Error('编码合法范围：[1 - 9999999999]'));
            }
            callback();
          },
          trigger: 'blur'
        };
      },
      fillDateRange2Object: function (realBelong, rangePropName, startDatePropName, endDatePropName) {
        if (this.$utils.isEmpty(realBelong) || !this.$utils.isArray(realBelong[rangePropName])) {
          return realBelong;
        }
        let belong = this.$utils.clone(realBelong, true);
        let [startDate, endDate] = belong[rangePropName];
        if (this.$utils.isDate(startDate)) {
          belong[startDatePropName] = formatDate(startDate, 'yyyy-MM-dd hh:mm:ss');
        } else {
          belong[startDatePropName] = undefined;
        }
        if (this.$utils.isDate(endDate)) {
          belong[endDatePropName] = formatDate(endDate, 'yyyy-MM-dd hh:mm:ss');
        } else {
          belong[endDatePropName] = undefined;
        }
        belong[rangePropName] = undefined;
        return belong;
      },
      fillDates2Range: function (belong, rangePropName, startDatePropName, endDatePropName) {
        if (this.$utils.isEmpty(belong) || !this.$utils.isString(belong[startDatePropName]) || belong[startDatePropName] === '' ||
          !this.$utils.isString(belong[endDatePropName]) || belong[endDatePropName] === '') {
          return;
        }
        let [startDateStr, endDateStr] = [belong[startDatePropName], belong[endDatePropName]];
        belong[rangePropName] = [toEast8Date(startDateStr), toEast8Date(endDateStr)];
      },
      changeDate4BookInfo: function (date) {
        getBookedInfo(this.form4BookInfo.vehicle, date).then(response => {
          this.curBookedInfo = response.data;
        });
      },
      checkBookDate: function (time) {
        let nowDate = newEast8Date();
        if (this.$utils.toDateString(time, 'yyyy-MM-dd') < this.$utils.toDateString(nowDate, 'yyyy-MM-dd')) {
          return true;
        }
        if (nowDate.setMonth(nowDate.getMonth() + 2) < time) {//预定范围两个月内
          return true;
        }
        let curYearMonth = formatDate(time, 'yyyy-MM');
        if (!this.$utils.isEmpty(this.getCurBookedInfo) && this.$utils.isInteger(this.getCurBookedInfo[curYearMonth])) {
          let int4BitMap = this.getCurBookedInfo[curYearMonth];
          let dayOfMonth = time.getDate();
          return (int4BitMap & (1 << (dayOfMonth - 1))) != 0;
        }
        return false;
      },
      checkIfRuning: vehicle => vehicle.status === VEHICLE_CONSTANT_STATUS_NORMAL,
      getVehicleStatus: function (code) {
        return this.vehicleStatus[code].val;
      },
      getAllVehicleStatus: function () {
        return this.vehicleStatus;
      },
      getBrand: function (code) {
        if (!this.$utils.isInteger(code) || code == VEHICLE_CONSTANT_BRAND_CODE_UNKOWN) {
          return '未知';
        }
        return getConstantByTypeAndCode(VEHICLE_CONSTANT_VEHICLE_BRAND, code).val;
      },
      getAllBranch: () => {
        return getConstantListByType(VEHICLE_CONSTANT_VEHICLE_BRAND);
      },
      getUseType: function (code) {
        if (!this.$utils.isInteger(code) || code == VEHICLE_CONSTANT_USE_TYPE_UNKOWN) {
          return '未知';
        }
        return getConstantByTypeAndCode(VEHICLE_CONSTANT_VEHICLE_USE, code).val;
      },
      getAllUseType: () => {
        return getConstantListByType(VEHICLE_CONSTANT_VEHICLE_USE);
      },
      getList() {
        this.listLoading = true;
        let listQueryTemp = this.fillDateRange2Object(this.listQuery, 'mRange', 'mRangeDateStart', 'mRangeDateEnd');
        listQueryTemp = this.fillDateRange2Object(listQueryTemp, 'aVRange', 'aVRangeDateStart', 'aVRangeDateEnd');
        listQueryTemp = this.fillDateRange2Object(listQueryTemp, 'insuranceDateRange', 'insuranceDateRangeStart', 'insuranceDateRangeEnd');
        page(listQueryTemp).then(response => {
          let totalCountRs = undefined;
          let listRs = undefined;
          if (!this.$utils.isEmpty(response.data.data) && this.$utils.isInteger(response.data.totalCount)) {
            listRs = response.data.data;
            totalCountRs = response.data.totalCount;
          }
          this.listLoading = false;
          this.list = listRs;
          this.total = totalCountRs;
        })
      },
      getAddrStr(branchCompany) {
        let regions = getRegionByCodes([branchCompany.addrProvince, branchCompany.addrCity, branchCompany.addrTown]);
        return regions[0].name + ' ' + regions[1].name + ' ' + regions[2].name + ' ';
      },
      handleFilter() {
        this.$refs.queryForm.validate(valid => {
          if (valid) {
            this.getList();
          } else {
            return false;
          }
        });
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handleCreate() {
        this.resetTemp();
        this.dialogStatus = 'create';
        this.dialogFormVisible = true;
      },
      handleUpdate(row) {
        getObj(row.id)
          .then(response => {
            this.resetTemp();
            this.$utils.objectEach(response.data, (item, key) => {
              this.form[key] = item;
            })
            this.fillDates2Range(this.form, 'insuranceDateRange4form', 'insuranceStartDate', 'insuranceEndDate');
            this.dialogFormVisible = true;
            this.dialogStatus = 'update';
          });
      },
      handleApply(row) {
        this.resetTemp4Apply();
        this.form4Apply.vehicle = row.id;
        getBookedInfoIn2Month(row.id)
          .then(response => {
            this.curBookedInfo3Month = response.data;
            this.dialogStatus = 'apply';
            this.dialogForm4ApplyVisible = true;
          });
      },
      handleBookInfo(row) {
        this.$refs.bookInfoViewer.handleBookInfo(row.id);
      },
      create(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            let formTemp = this.fillDateRange2Object(this.form, 'insuranceDateRange4form', 'insuranceStartDate', 'insuranceEndDate');
            convertDate2Str(formTemp);
            addObj(formTemp)
              .then(response => {
                if (response.code === rsCode.RS_CODE_SUC) {
                  this.dialogFormVisible = false;
                  this.getList();
                  this.$notify({
                    title: '成功',
                    message: '创建成功',
                    type: 'success',
                    duration: 2000
                  });
                } else {
                  this.$notify({
                    title: '失败',
                    message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                    type: 'error',
                    duration: 2000
                  });
                }
              });
          } else {
            return false;
          }
        });
      },
      cancel(formName) {
        this.dialogFormVisible = false;
        this.dialogForm4ApplyVisible = false;
        this.$refs[formName].resetFields();
      },
      cancel4Apply(formName) {
        this.dialogForm4ApplyVisible = false;
        this.$refs[formName].resetFields();
      },
      update(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            let formTemp = this.fillDateRange2Object(this.form, 'insuranceDateRange4form', 'insuranceStartDate', 'insuranceEndDate');
            convertDate2Str(formTemp);
            putObj(formTemp).then(response => {
              if (response.code === rsCode.RS_CODE_SUC) {
                this.dialogFormVisible = false;
                this.getList();
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                });
              } else {
                this.$notify({
                  title: '失败',
                  message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                  type: 'error',
                  duration: 2000
                });
              }
            });
          } else {
            return false;
          }
        });
      },
      apply(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            this.dialogFormVisible = false;
            book(this.form4Apply).then(() => {
              this.dialogForm4ApplyVisible = false;
              this.getList();
              this.$notify({
                title: '成功',
                message: '预定成功',
                type: 'success',
                duration: 2000
              });
            });
          } else {
            return false;
          }
        });
      },
      resetTemp() {
        this.form = {
          status: undefined,
          code: undefined,
          numberPlate: undefined,
          brand: undefined,
          subordinateBranch: undefined,
          useType: undefined,
          vin: undefined,
          insuranceNo: undefined,
          insuranceCompany: undefined,
          insuranceDateRange4form: undefined,
          annualVerificationDate: undefined,
          maintenanceDate: undefined,
          maintenanceMileage: undefined,
          belongTo: undefined,
          belongToName: undefined,
          engineNum: undefined,
          manufacturer: undefined,
          receiveTime: undefined,
          drivingLicensePath: undefined,
          remark: undefined
        };
      },
      resetTemp4Apply() {
        this.form4Apply = {
          bookStartDate: undefined,
          bookEndDate: undefined,
          vehicle: undefined,
          selectedAccItem: undefined,
          liftCompany: undefined,
          liftAddr: undefined,
          destination: undefined,
          remark: undefined
        };
      },
      resetTemp4BookInfo() {
        this.form4BookInfo = {
          selectedMonth: this.$utils.toDateString(newEast8Date(), 'yyyy-MM'),
          vehicle: undefined
        };
      }
    }
  }
</script>
