<template>
  <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
    <div >
      <div class="filter-container" ref="filter-container">
        <el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="100px">
          <el-row>
            <!-- <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-form-item label="车牌">
                <el-input v-model="listQuery.numberPlate" placeholder="请输入车牌"></el-input>
              </el-form-item>
            <el-form-item label="车辆编码">
              <el-input type="number" style="width: 200px;" v-model.number="listQuery.code" placeholder="请输入车辆编码"></el-input>
            </el-form-item>
              <el-form-item label="用途">
                <el-select class="filter-item" v-model="listQuery.useType" placeholder="请选择用途">
                  <el-option :key="undefined" label="无" :value="undefined"></el-option>
                  <el-option v-for="item  in useTypeList" :key="item.code" :label="item.val"
                            :value="item.code"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="车型">
                <el-select class="filter-item" v-model="listQuery.modelId" placeholder="请选择车型">
                  <el-option :key="undefined" label="无" :value="undefined"></el-option>
                  <el-option v-for="item in allVehicleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <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-form-item label="当前停放公司" prop="parkBranchCompanyId">
                <el-autocomplete
                  class="inline-input"
                  v-model="listQuery.parkBranchCompanyName"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入内容"
                  @select="handleSelectPark"
                ></el-autocomplete>
              </el-form-item>
               <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
            <el-button class="filter-item" type="primary" v-waves @click="reloadPage">重置</el-button>
          </el-row>
          <!-- <el-row> -->
            <!-- <el-col :span="8">
              <el-form-item label="所属分公司" prop="subordinateBranch">
                <el-select class="filter-item" v-model="listQuery.subordinateBranch" 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="8">
              <el-form-item label="时间">
                <el-date-picker
                  v-model="listQuery.startTime"
                  type="date"
                  :editable="true"
                  format="yyyy-MM-dd"
                  placeholder="选择日期"
                ></el-date-picker>~
                <el-date-picker
                  v-model="listQuery.endTime"
                  type="date"
                  :editable="true"
                  format="yyyy-MM-dd"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="6">
              <el-form-item label="当前停放公司" prop="parkBranchCompanyId">
                <el-autocomplete
                  class="inline-input"
                  v-model="listQuery.parkBranchCompanyName"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入内容"
                  @select="handleSelectPark"
                ></el-autocomplete>
              </el-form-item>
            </el-col> -->
          <!-- </el-row> -->
        </el-form>
      </div>
      <el-form label-width="100px" v-if="countTJ" style="margin: 10px 0;">
      <el-row :gutter="20">
        <el-col :span="2"><el-form-item label="车辆概况"></el-form-item></el-col>
        <el-col :span="5" v-for="(item, index) in countTJ" :key="item.id">
          <div class="grid-content bg-purple" v-if="item.travelStatus == 0 || item.travelStatus == 1 || item.travelStatus == 4 || item.travelStatus == 2">
            <div class="text" style="color: #171413;">{{item.total}}</div>
            <div class="text" v-if="item.travelStatus == 0">车辆总额（辆）</div>
            <div class="text" v-if="item.travelStatus == 4">出行中车辆（辆）</div>
            <div class="text" v-if="item.travelStatus == 1">空闲车辆（辆）</div>
            <div class="text" v-if="item.travelStatus == 2">维修中车辆（辆）</div>
          </div>
        </el-col>
      </el-row>
      </el-form>
      <!--车辆预警-->
      <div class="marquee_box" v-if="marqueeList.length>0" @mouseenter="handelOver" @mouseleave="handelOut">
        <ul class="marquee_list" :class="{marquee_top:animate}">
          <li v-for="(item,index) in marqueeList" @click="toVehicleWarningMsg" :class="item.color">{{item.msg}}  >>立即处理</li>
        </ul>
      </div>
      <!--车辆排班-->
      <!--bookType 1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用、9、客户用车、10、其他-->
      <div style="display: flex;margin-bottom: 20px;">
        <span class="tip-co bg-1"></span><span>租房车/客户用车</span>
        <span class="tip-co bg-5"></span><span>房车游</span>
        <span class="tip-co bg-4"></span><span>展览</span>
        <span class="tip-co bg-6"></span><span>保养/维修</span>
        <span class="tip-co bg-10"></span><span>其他</span>
        <span class="tip-co bg-7"></span><span>预约中</span>
        <span class="tip-co bg-8"></span><span>禁用</span>
      </div>
      <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
                style="width: 100%;cursor: pointer;" class="schedul-tb">
        <el-table-column width="220" align="center" :label="firstTime"  fixed>
          <template scope="scope">
            <div @click="toVehicleRecords(scope.row)">
              <div style="color: #bfcbd9;font-size: 14px;">
                现在位置：{{scope.row.parkCompanyName}}
              </div>
              <div>{{scope.row.numberPlate}}<span style='color:red'>({{scope.row.code}})</span><img src="../../../assets/images/detail.png" style="width: 15px;margin-left: 10px;"/></div>
              <div style="color: #bfcbd9;font-size: 14px;">{{scope.row.vehicleModel?scope.row.vehicleModel.name:''}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="60" align="center" :label="item.day" v-for="item in  tempDayList" :key="item.day">
          <template scope="scope">
            <div v-for="iitem in  scope.row.temp" :key="iitem.day" v-if="iitem.time == item.time">
              <div v-for="ii in  iitem.children" :key="ii.time" :data-ii="ii.time" :data-endhour="ii.endhour" class="ii-day" :class="ii.bg" @click="toShowDialog(scope.row, iitem, ii)">
                <span v-if="ii.timeEtr == '00'" style="position: absolute;color: #fff;left: -20px;bottom: 0">{{ii.timeEtr}}</span>
                <span v-else style="position: relative;color: #fff;top: -24px;right: -20px;">{{ii.timeEtr}}</span>
                <span style="position: absolute;color: #fff;z-index: 11;left: 0;">{{ii.timeStr}}</span>
              </div>
            </div>
          </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>
    </div>
    <!--保养弹框-->
    <vehicleMaintenanceModal v-if="baoyang" :currentItem="currentItem" v-on:baoyangDialogEvent = "baoyangDialogEvent"></vehicleMaintenanceModal>
    <!--展览、预定用车弹框-->
    <vehicleExhibitionModal v-if="zhanlan" :currentItem="currentItem" v-on:zhanlanDialogEvent = "zhanlanDialogEvent"></vehicleExhibitionModal>
    <!--安排用车弹框-->
    <vehiclePlanModal v-if="anpai" :currentItem="currentItem" v-on:anpaiDialogEvent = "anpaiDialogEvent"></vehiclePlanModal>
    <!--租车详情弹框-->
    <!--rentOrder-->
    <rentOrderDetailModal :form="rentOrderInfo" :rentCostDetail="rentCostDetail" v-if="rentOrder" v-on:rentOrderDetailDialogEvent="rentOrderDetailDialogEvent"></rentOrderDetailModal>
    <!--旅游订单详情-->
    <tourOrderDetailModal :tourRow="tourRow" v-if="tourDialogVisible" v-on:tourOrderDetailDialogEvent="tourOrderDetailDialogEvent"></tourOrderDetailModal>
    <!--禁用弹框-->
    <disableModal  v-if="jinyong" :currentItem="currentItem" v-on:jinyongDialogEvent = "jinyongDialogEvent"></disableModal>
  </div>
</template>
<style>
  .flex-jca-fdc{
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
  }
  .schedul-tb .el-table .cell{
    padding: 0;
  }
  .tip-co{
    padding: 10px;
    margin-right: 10px;
    margin-left: 20px;
  }
  .tip-co:first-child{
    margin-left: 0;
  }
  /* 1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用、9、客户用车、10、其他 */
  .bg-1{
    background: #20a0ff;
  }
  .bg-9{
    background: #20a0ff;
  }
  .bg-5{
    background: #6633cc;
  }
  .bg-4{
    background: #00cc66;
  }
  .bg-3{
    background: #ff6633;
  }
  .bg-6{
    background: #ff6633;
  }
  .bg-7{
    background: #ffcc00;
  }
  .bg-8{
    background: #868686;
  }
  .bg-10{
    background: #ff6699;
  }
  .ii-day{
    height: 3px;
    width: 60px;
    margin-left: -19px;
  }
  .day-title{
    border-right:1px solid #bfcbd9;
    border-bottom:1px solid #bfcbd9;
    padding: 10px;
    min-width: 45px;
    max-width: 45px;
    display: inline-block;
    cursor: pointer;
  }
  .v-list{
    padding: 10px;
    min-width: 200px;
    max-width: 200px;
    border-bottom:1px solid #bfcbd9;
    border-right:1px solid #bfcbd9;
  }
  .zzui-broadcast-window{
    height: 180px !important;
    background: #ccc;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #eef1f6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .grid-content .text{
    text-align: center;
    line-height: 35px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .marquee {
    width: 100%;

    height: 50px;

    align-items: center;

    color: #3a3a3a;

    background-color: white;

    display: flex;

    box-sizing: border-box;

    overflow: hidden;
  }

  .marquee_title {
    padding: 0 20px;

    height: 21px;

    font-size: 14px;

    border-right: 1px solid #d8d8d8;

    align-items: center;
  }

  .marquee_box {
    display: block;
    position: relative;
    width: 100%;
    height: 145px;
    overflow: hidden;
    margin: 10px 0;
    background: #eef1f6;
  }

  .marquee_list {
    display: block;

    position: absolute;

    top: 0;

    left: 0;
  }

  .marquee_top {
    transition: all 0.5s;
  }

  .marquee_list li {
    height: 30px;

    line-height: 30px;

    font-size: 14px;
    list-style-type:none;
  }

  .marquee_list li span {
    padding: 0 2px;
  }
  .warn-1{
    color: red;
  }
  .warn-2{
    color: #20a0ff;
  }
  .warn-3{
    color: #ff9900;
  }
</style>

<script>
  import 'static/css/uploadImg.css';// 引入图片上传组件对话框
  import vehicleMaintenanceModal from './vehicleMaintenanceModal';//车辆保养弹框
  import vehicleExhibitionModal from './vehicleExhibitionModal';//车辆展览弹框
  import vehiclePlanModal from './vehiclePlanModal';//安排用车
  import rentOrderDetailModal from "../../order/modal/rentOrderDetailModal";//租车订单详情
  import tourOrderDetailModal from "../../order/modal/tourOrderDetailModal";//房车游订单详情
  import disableModal from "./disableModal";//禁用弹框
  import {
    getSysRegionByIds
  } from 'api/vehicle/vehicleInfo/';
  import {
    getAllZone
  } from 'api/base_info/constant/';
  import {
    getAllCompany,
    getAll
  } from 'api/base_info/branch_company/';
  import {
    getAllBranchCompanyByZoneId
  } from 'api/order/rentVehicle';
  import {
    formatDate
  } from 'utils/dateFormattor';
  import {
    getAllVehicleList
  } from 'api/vehicleType';
  import {
    toEast8Date,
    deepCopyDate,
    newEast8Date,
    convertDate2Str,
    timestamp2Date,
    getTimeByDay,
    getCurrentMonth,
    getMonth,
    getymdTimeByDay,
    getCurrentYearMonth
  } from 'utils/dateUtils';

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

  import {mapGetters} from 'vuex';
  import {
    getToken
  } from 'utils/auth';
  import {
    getVehiclePlanList,
    getVehicleOrderDetail,
    getTourInfor
  } from 'api/vehicle/vehicleSchedulManage';
  import Element1 from "../../admin/menu/components/element";
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";

  export default {
    name: 'vehicleSchedulManage',
    components: {
      ElCol,
      ElRow,
      Element1,
      vehicleExhibitionModal,
      vehicleMaintenanceModal,
      vehiclePlanModal,
      rentOrderDetailModal,
      tourOrderDetailModal,
      disableModal
    },
    data() {
      return {
        allVehicleList: [],//全部车型
        animate: false,
        firstTime: "",//排期表-第一个字段名称
        marqueeList: [],
        modalTitle: "创建",
        BASE_API: process.env.BASE_API,
        oneCampsiteDialogVisible: false,//添加、编辑弹框
        showLoadingBody: false,
        countTJ: undefined,//车辆概况
        form: {
          tagNames:"",//标签
          name: undefined,//旅游名称
          saleCount: undefined,//销量
          stock: undefined,//总数量
          status: undefined,
        },
        list: null,
        total: null,
        listLoading: true,
        endTime: "",//结束时间为0点时有值
        listQuery: {
          page: 1,
          limit: 10,
          parkBranchCompanyId: undefined,//停靠分公司id
          parkBranchCompanyName: undefined,//停靠分公司名称
          subordinateBranch: undefined,//所属分公司
          subordinateBranchName: undefined,//所属分公司名称
          zoneId: undefined,//所属片区
          startTime: undefined,
          endTime:undefined,
          status: undefined,//车辆状态
          useType:undefined,//用途
          modelId:undefined,//车型
        },
        inline: true,
        mar: null,//滚屏
        textMap: {
          update: '编辑',
          create: '创建'
        },
        tableKey: 0,
        tempDayList: [],//日期
        currentMonth: undefined,//当前月份
        nextMonth: undefined,//下月
        allBranchCompany: [],//所有分公司列表
        baoyang: false,//保养弹框,
        zhanlan: false,//展览弹框
        rentOrder: false,//租车订单详情
        anpai: false,//安排用车弹框
        jinyong: false,//禁用弹框
        currentItem: {},//待操作数据
        rentOrderInfo: {},//租车订单详情
        rentCostDetail: {},//租车订单费用明细
        tourDialogVisible: false,//旅游订单弹框
        tourRow: {},//旅游订单详情-当前行
        useTypeList:[
          {
            code:1,
            val:'租赁'
          },
          {
            code:2,
            val:'自用'
          }
        ]
      }
    },
    created() {
      let t = this;
      const numberPlate = this.$route.query.numberPlate;
      if (numberPlate) {
          this.listQuery.numberPlate = numberPlate;
      }

      let currentMonth = getCurrentMonth();
      this.currentMonth = parseInt(currentMonth);
      if(this.currentMonth < 12){
        this.nextMonth = this.currentMonth + 1;
      } else {
        this.nextMonth = 1;
      }
      this.firstTime = "日期("+this.currentMonth+"~"+this.nextMonth+")"
      this.getTempDayList();
      this.mar = setInterval(this.showMarquee, 2000);
      getAll().then(response => {
        this.allCompaniesArr = response.data;
        let query =  localStorage.getItem("vehicleSchedulManage");
        if(query !="null" && query){
          this.listQuery = JSON.parse(query);
          if(t.listQuery.parkBranchCompanyId){
            t.allCompaniesArr.map(function (item) {
              if(item.id == t.listQuery.parkBranchCompanyId){
                t.listQuery.parkBranchCompanyName = item.name;
              }
            });
          }
        }
        this.getAllVehicleType();
      });
      getAllCompany(codeAndBranchCompany => {
        this.allCompanies = codeAndBranchCompany;
      });
    },
    computed: {
      ...mapGetters([
        'elements',
        'vehicleStatus'
      ]),
      //获取大区列表
      getAllZoneList(){
        this.allZoneArr = getAllZone();
        return getAllZone();
      },
    },
    methods: {
      /**
       * 重置
       * */
      reloadPage() {
        this.state1='';
        this.listQuery = {
          page: 1,
          limit: 10,
          parkBranchCompanyId: undefined,//停靠分公司id
          parkBranchCompanyName: undefined,//停靠分公司名称
          subordinateBranch: undefined,//所属分公司
          subordinateBranchName: undefined,//所属分公司名称
          zoneId: undefined,//所属片区
          startTime: undefined,
          endTime:undefined,
          status: undefined,//车辆状态
          useType:undefined,//用途
          modelId:undefined,//车型
        };
        if(this.listQuery){
          localStorage.setItem("vehicleSchedulManage", JSON.stringify(this.listQuery));
        }
        this.getList();
      },
      /**
       * 获取全部车型
       * */
      getAllVehicleType() {
        let t = this;
        getAllVehicleList().then(response => {
          let listRs = undefined;
          if (!this.$utils.isEmpty(response.data)) {
            listRs = response.data;
          }
          this.allVehicleList = listRs;
          let query =  localStorage.getItem("vehicleSchedulManage");
          if(query !="null" && query){
            let queryJson = JSON.parse(query);
            if(queryJson.modelId){
              t.allVehicleList.map(function (item) {
                if(item.id == queryJson.modelId){
                  t.vehicleArr = item.name;
                }
              });
            }
          }
          t.getList();
        });
      },
      /**
       * 旅游订单详情弹框关闭
       * */
      tourOrderDetailDialogEvent(e){
        this.tourDialogVisible = false;
      },
      /**
       * 点击事件
       * */
      toShowDialog(item, iitem, ii){
//        <!--bookType 1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用、9、客户用车、10、其他-->
        if (!item.mileageLastUpdate) {
					item.mileageLastUpdate = 0
				}
				if(!ii.bg){
          //空白-可安排用车
          if(item.vehicleModel==undefined){
            this.$notify({
              title: '警告',
              message: '车型未配置，请先配置',
              type: 'warning',
              duration: 2000
            });
            return false
            if(item.vehicleModel.keyword==undefined){
              this.$notify({
                title: '警告',
                message: '车型未配置，请先配置',
                type: 'warning',
                duration: 2000
              });
              return false
            }
          }
          let arr = item.vehicleModel.keyword.split(",");
          item.vehicleModel.keyword = arr.join(" | ");
          this.currentItem = {item: item, iitem: iitem, ii: ii};
          this.anpai = true;
        } else {
          if(ii.vehicleBookRecord.status == 1){//审核中的显示预约弹框
              this.zhanlan = true;
              this.currentItem = {item: item, iitem: iitem, ii: ii, title: "预定用车"};
          } else{
            if(ii.bookType == 6){
              //保养
              this.baoyang = true;
              this.currentItem = {item: item, iitem: iitem, ii: ii};
            } else if(ii.bookType == 3){
              //维修
              this.zhanlan = true;
              this.currentItem = {item: item, iitem: iitem, ii: ii,title: "维修",upkeepName:'维修'};
            } else if(ii.bookType == 4){
              //展览
              this.zhanlan = true;
              this.currentItem = {item: item, iitem: iitem, ii: ii, title: "展览用车",upkeepName:'展览'};
            } else if(ii.bookType == 1){
              if(!ii.vehicleBookRecord.orderNo){
                this.$notify({
                  title: '警告',
                  message: '订单号缺失',
                  type: 'warning',
                  duration: 2000
                });
                return false;
              } else{
                this.getOneVechi(ii.vehicleBookRecord.orderNo);
              }
              this.currentItem = {item: item, iitem: iitem, ii: ii, title: "租车订单"};
            }else if(ii.bookType == 9){
              this.zhanlan = true;
              this.currentItem = {item: item, iitem: iitem, ii: ii,title: "客户用车",upkeepName:'客户用车'};
            } else if(ii.bookType == 5) {
              //房车游订单详情
              var str = ''
              getTourInfor(ii.vehicleBookRecord.orderNo).then(response => {
                if(response.status==200){
                  str = '旅游路线：' + response.data.goodName +'  出发时间：' +response.data.time+' 出发地：' +response.data.siteName
                  this.currentItem = {item: item, iitem: iitem, ii: ii, title: "房车游",upkeepName:'房车游',str:str};
                  this.zhanlan = true;
                }else{
                  this.currentItem = {item: item, iitem: iitem, ii: ii, title: "房车游",upkeepName:'房车游'};
                  this.zhanlan = true;
                }
              })
              // if(!ii.vehicleBookRecord.orderNo){
              //   this.$notify({
              //     title: '警告',
              //     message: '订单号缺失',
              //     type: 'warning',
              //     duration: 2000
              //   });
              //   return false;
              // }else{
              //   this.tourRow = {no: ii.vehicleBookRecord.orderNo};
              //   this.tourDialogVisible = true
              // }
            } else if(ii.bookType == 8) {
              //禁用
              this.jinyong = true;
              this.currentItem = {item: item, iitem: iitem, ii: ii, title: "禁用"};
            } else if(ii.bookType == 10) {
              this.zhanlan = true;
              this.currentItem = {item: item, iitem: iitem, ii: ii,title: "其他",upkeepName:'其他'};
            }
          }

        }
      },
      /**
       * 根据订单号获取订单详情
       * */
      getOneVechi: function(orderNo) {
        let params = {
          orderNo: orderNo
        };
        getVehicleOrderDetail(params).then(res => {
          if (res.status == 200) {
            let a = res.data;
            let vehicleUserLicenses = {};
//            if (a.status == 5) {
//              vehicleUserLicenses = {
//                name: a.orderVehicleCrosstownDto.licenseName,
//                phone: a.orderVehicleCrosstownDto.licensePhone,
//                idCard: a.orderVehicleCrosstownDto.licenseIdCard
//              };
//            } else {
//              if (a.vehicleUserLicenses.length > 0) {
//                vehicleUserLicenses = a.vehicleUserLicenses[0];
//              }
//            }
            a.orderRentVehicleDetail.startTime = timestamp2Date(a.orderRentVehicleDetail.startTime);
            a.orderRentVehicleDetail.endTime = timestamp2Date(a.orderRentVehicleDetail.endTime);
            let arr = a.picture ? a.picture.split(",") : [];
            a.picture = arr.length > 0 ? arr[0] : "";
            a.payTime = timestamp2Date(a.payTime);
            this.rentOrderInfo = a;

            this.costDetail = JSON.parse(this.rentOrderInfo.orderRentVehicleDetail.costDetail);
            var cost = '';
            this.costDetail.children.map(function(a) {
              cost += a.key + ":" +a.detail+" ";
            });
            this.rentCostDetail = cost;
            if(this.rentOrderInfo.orderRentVehicleDetail.driverType==1) {
              this.serviceCost = this.rentOrderInfo.orderRentVehicleDetail.dayNum * 600
            }
            this.rentOrder = true;
          } else {
            this.$notify({
              title: '失败',
              message: '操作失败！',
              type: 'error',
              duration: 2000
            });
          }
        });
      },
      /**
       * 关闭保养弹框后逻辑处理
       * */
      baoyangDialogEvent(e){
        this.baoyang = false;
        if(e){//关闭编辑
          //编辑成功-重新加载列表
          this.getList();
        }
      },
      /**
       * 关闭展览弹框后逻辑处理
       * */
      zhanlanDialogEvent(e){
        this.zhanlan = false;
        if(e){//关闭编辑
          //编辑成功-重新加载列表
          this.getList();
        }
      },
      /**
       * 禁用弹框关闭后逻辑处理
       * */
      jinyongDialogEvent(e){
        this.jinyong = false;
        if(e){//关闭编辑
          //编辑成功-重新加载列表
          this.getList();
        }
      },
      /**
       * 安排用车弹框关闭逻辑处理
       * */
      anpaiDialogEvent(e){
        this.anpai = false;
        if(e){//关闭编辑
          //编辑成功-重新加载列表
          this.getList();
        }
      },
      /**
       * 租车订单详情弹框关闭
       * */
      rentOrderDetailDialogEvent(e){
        this.rentOrder = false;
      },
      /**
       * 根据片区id获取分公司列表
       * */
      getProvinceRegions(item) {
        // debugger
        this.listQuery.zoneId = item;
        this.listQuery.subordinateBranch = undefined;
        getAllBranchCompanyByZoneId({zoneId: item})
          .then(response => {
            this.allBranchCompany = response.data;
          })
      },
      /**
       * 选择分公司
       * */
      getAllBranchCompanyChange(item) {
        this.listQuery.subordinateBranch = item
      },
      /**
       * 鼠标移入
       * */
      handelOver(){
        clearInterval(this.mar);
      },
      /**
       * 鼠标移出
       * */
      handelOut(){
        this.mar = setInterval(this.showMarquee, 2000);
      },
      /**
       * 立即处理
       * */
      toVehicleWarningMsg(){
        this.$router.push({path: '/vehicle/vehicleWarningMsg'});
      },
      showMarquee: function() {
        this.animate = true;
        setTimeout(() => {
          this.marqueeList.push(this.marqueeList[0]);
          this.marqueeList.shift();
          this.animate = false;
        }, 1000);
      },
      getAllVehicleStatus: function () {
        return this.vehicleStatus;
      },
      /**
       * 所属分公司
       * */
      handleSelectSubordinate(item){
        if(item.value == "无"){
          this.listQuery.subordinateBranch = undefined;
          this.listQuery.subordinateBranchName = "无";
        } else {
          this.listQuery.subordinateBranch = item.id;
          this.listQuery.subordinateBranchName = item.name;
        }
      },
      /**
       * 停靠分公司
       * */
      handleSelectPark(item){
        if(item.value == "无"){
          this.listQuery.parkBranchCompanyId = undefined;
          this.listQuery.parkBranchCompanyName = "无";
        } else {
          this.listQuery.parkBranchCompanyId = item.id;
          this.listQuery.parkBranchCompanyName = item.name;
        }
      },
      querySearch(queryString, cb) {
        let selectArry = [];
        let iitem = {
          value: "无",
          name: "无"
        };
        selectArry.push(iitem);
        this.allCompaniesArr.map(function(item){
          item.value = item.name;
          selectArry.push(item);
        });
        this.selectArry = selectArry;
        var results = queryString ? selectArry.filter(this.createFilter(queryString)) : selectArry;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.name.indexOf(queryString.toLowerCase()) != -1);
        };
      },
      /**
       * 获取列表
       * */
      getList() {
        let _this = this;
        this.listLoading = true;
        if(this.listQuery.startTime  && (typeof this.listQuery.startTime == "object")){
          this.listQuery.startTime = this.listQuery.startTime.getTime();
        }
        if(this.listQuery.endTime  && (typeof this.listQuery.endTime == "object")){
          this.listQuery.endTime = this.listQuery.endTime.getTime();
        }
        getVehiclePlanList(this.listQuery).then(response => {
          this.countTJ = response.data.vehicleCountVos;
          let totalCountRs = undefined;
          let listRs = undefined;
          if (!this.$utils.isEmpty(response.data.vehicleAndModelInfoVo) && this.$utils.isInteger(response.data.vehicleAndModelInfoVo.totalCount)) {
            listRs = response.data.vehicleAndModelInfoVo.data;
            totalCountRs = response.data.vehicleAndModelInfoVo.totalCount;
            listRs.map(function(item){
              item.visible2 = false;
              item.crtTimeStr = timestamp2Date(item.crtTime);
              if(item.storeTypeName){
                item.storeTypeName = item.storeTypeName.join("|");
              }
//              解析开始时间-结束时间
//              item.vehicleBookRecord.map(function (iitem) {
//                let bookStartDate = iitem.bookStartDate.substring(0,10);
//                let bookEndDate = iitem.bookEndDate.substring(0,10);
//                iitem.startHourList = ["0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"];
//                if(iitem.startHour){
//                  for(let i = 0; i < iitem.startHour.length;i++){
//                    iitem.startHourList[i] = iitem.startHour[i]
//                  }
//                }
//                iitem.startHourList = iitem.startHourList?iitem.startHourList.reverse(): ["0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"];
//                let flag = false;//开始时间标识，查找第一个1
//                let flagE = false;//结束时间标识，查找第一个0
//                let sStart = "00";//开始时间
//                let sEnd= "00";//结束时间
//                iitem.startHourList.map(function(ic, index){
//                  let c = index +1;
//                  if(ic == 1 && !flag){
//                    if(c<10){
//                      sStart = "0"+c;
//                    } else {
//                      sStart = c
//                    }
//                    flag = true;
//                  }
//                });
//                if(iitem.endHour){
//                  if(iitem.endHour.length>=10){
//                    sEnd = iitem.endHour.length;
//                  } else {
//                    sEnd = "0" + iitem.endHour.length;
//                  }
//                }
//                iitem.bookStartDate = iitem.bookStartDate.substring(0,10) + " " +sStart + ":00:00";
//                iitem.bookEndDate = iitem.bookEndDate.substring(0,10)  + " " +sEnd + ":00:00";
//              });
//              item.temp = _this.getDayList(item);//获取车辆30天排期
              item.temp = _this.getMonthDayList(item);//获取车辆30天排期
            });
          }
          if (!this.$utils.isEmpty(response.data.vehicleWarningMsgs)) {
            response.data.vehicleWarningMsgs.map(function(ii){
              ii.color = "warn-" + ii.colorType;
            });
            this.marqueeList = response.data.vehicleWarningMsgs;
          }
          this.listLoading = false;
          this.list = listRs;
          //渲染颜色
          this.setColor();
          this.total = totalCountRs;
        })
      },
      handleFilter() {
        this.listQuery.page = 1;
        if(this.listQuery.numberPlate==''){
          this.listQuery.numberPlate = null;
        }
        this.$refs.queryForm.validate(valid => {
          if (valid) {
            if(this.listQuery){
              localStorage.setItem("vehicleSchedulManage", JSON.stringify(this.listQuery));
            }
            this.getList();
          } else {
            return false;
          }
        });
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        if(this.listQuery){
          localStorage.setItem("vehicleSchedulManage", JSON.stringify(this.listQuery));
        }
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        if(this.listQuery){
          localStorage.setItem("vehicleSchedulManage", JSON.stringify(this.listQuery));
        }
        this.getList();
      },
      /**
       * 获取未来30天日历表
       * */
      getMonthDayList(item){
        let temp = [];
        let list = this.list;
        for(let i = 0; i < 30; i++){
          let t = [];
          let tymd = getymdTimeByDay(i);
          temp.push({day: getTimeByDay(i), month: getMonth(i), time: tymd});
        }
        return temp;
      },
      /**
       * 渲染颜色
       * */
      getDayList(item){
        let temp = [];
        let list = this.list;
        for(let i = 0; i < 30; i++){
          let t = [];
          let tymd = getymdTimeByDay(i);
          let children = [];
          let tt = "";//yyyy-MM-dd hh:mm:ss
          let h = "";

          let bookType = undefined;//当前车辆状态
          let vehicleBookRecord = {};//车辆排班信息
          for(let ii = 0; ii < 24; ii ++) {
            if (ii < 10) {
              h = "0" + ii;
              tt = tymd + " 0" + ii + ":00:00";
            } else {
              tt = tymd + " " + ii + ":00:00";
              h = ii;
            }
            let bg = "";//背景色
            let pp = {};
            pp.time = tt;
            pp.h = h;
            item.vehicleBookRecord.map(function (iitem) {
              if (iitem.bookStartDate <= tt && iitem.bookEndDate >=tt) {
//                <!--bookType 1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用、9、客户用车、10、其他-->
                if(iitem.bookStartDate == tt && (iitem.bookType == 1 || iitem.bookType == 5 || iitem.bookType == 4)){//租车、旅游、展览显示起止时间
                  pp.timeStr = h;
                }
                pp.bg = "bg-"+ iitem.bookType;
                pp.vehicleBookRecord = iitem;
                pp.bookType = iitem.bookType;
                if(iitem.bookEndDate == tt){
                  if (iitem.bookType == 1 || iitem.bookType == 5 || iitem.bookType == 4){
                    pp.timeEtr = h;
                  }
                  pp.bg = "";
                }
              }
            });
            children.push(pp);
          }
          temp.push({day: getTimeByDay(i), month: getMonth(i), children: children});
        }
        return temp;
      },
      /**
       * 获取日期数组
       * */
      setColor(){
        let temp = [];
        this.list.map(function(item){
          let endTime = '';
          item.temp.map(function(ttemp){
            let children = [];
            let tt = "";//yyyy-MM-dd hh:mm:ss
            let h = "";

            let bookType = undefined;//当前车辆状态
            let vehicleBookRecord = {};//车辆排班信息
            for(let ii = 0; ii < 24; ii ++) {
              if (ii < 10) {
                h = "0" + ii;
                tt = ttemp.time + " 0" + ii + ":00:00";
              } else {
                tt = ttemp.time + " " + ii + ":00:00";
                h = ii;
              }
              let bg = "";//背景色
              let pp = {};
              pp.time =tt;
              pp.h = h;
              item.vehicleBookRecord.map(function (iitem) {
                if (iitem.bookStartDate <= tt && iitem.bookEndDate >=tt) {
  //                <!--bookType 2-分公司使用、1-租车、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用-->
                  if(iitem.bookStartDate == tt && (iitem.bookType == 1 || iitem.bookType == 5 || iitem.bookType == 4) && iitem.status == 2){//租车、旅游、展览显示起止时间
                    pp.timeStr = h;
                  }
                  if(iitem.status == 1){
                    //审核中
                    pp.bg = "bg-7";
                  } else {
                    pp.bg = "bg-"+ iitem.bookType;
                  }
                  pp.vehicleBookRecord = iitem;
                  pp.bookType = iitem.bookType;
                  if(iitem.bookEndDate == tt  && iitem.status == 2){
                    if (iitem.bookType == 1 || iitem.bookType == 5 || iitem.bookType == 4){
                      pp.timeEtr = h;
                      if(h == "00"){
                        let cc = new Date(tt);
                        console.log(cc);
                        let te = cc.getTime()-24*60*60;
                        endTime = timestamp2Date(te).substring(0, 13) +":00:00";
                        console.log(endTime);
                      }
                    }
                    pp.bg = "";
                  }
                }
              });
              children.push(pp);
            }
            ttemp.children = children
          });
        });
        console.log(this.list);
      },
     /**
      * tempDayList
      **/
      getTempDayList(){
        let temp = [];
        for(let i = 0; i < 30; i++){
          let t = [];
          let tymd = getymdTimeByDay(i);
          temp.push({day: getTimeByDay(i), month: getMonth(i), time: tymd});
        }
        this.tempDayList = temp;
      },
      /**
       * 排版记录
       */
      toVehicleRecords(item){
        let selectedMonth = getCurrentYearMonth();
        this.$router.push({path: '/vehicle/vehicleRecords?selectedMonth='+selectedMonth+"&numberPlate="+item.numberPlate});
      }
    }
  }
</script>
