<template>
  <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
    <div >
      <div class="statisticsBox">
          <!-- <div class="statisticsItem">
            <div class="colorbg1"></div>
            <div class="detail">
              <div class="detail-title">今日收益（不含押金）</div>
              <div class="detail-money">￥ 6,666,66</div>
            </div>
          </div> -->
          <div class="statisticsItem">
            <div class="colorbg2"></div>
            <div class="detail">
              <div class="detail-title">订单总额（不含押金）</div>
              <div class="detail-money">￥ {{totalGmv|NumFormat}}</div>
            </div>
          </div>
          <div class="statisticsItem">
            <div class="colorbg3"></div>
            <div class="detail">
              <div class="detail-title">未退还押金总额</div>
              <div class="detail-money">￥ {{totalSecurityDeposit|NumFormat}}</div>
            </div>
          </div>
          <div class="statisticsItem">
            <div class="colorbg4"></div>
            <div class="detail">
              <div class="detail-title">额外赔款（取消损坏违章等）</div>
              <div class="detail-money">￥ {{peichang|NumFormat}}</div>
            </div>
          </div>
      </div>
      <div class="carDetail">
        <div class="carDetailBoxTitle">车辆概况</div>
        <div class="carDetailBox">
          <div class="carDetailItem" v-for="(item, index) in countTJ" :key="item.id">
            <div class="detail-num"><span style="position: relative;">{{item.total}}<span class="unit">辆</span></span></div>
            <div class="carDetail-title" v-if="item.travelStatus == 0">车辆总额</div>
            <div class="carDetail-title" v-if="item.travelStatus == 4">出行中</div>
            <div class="carDetail-title" v-if="item.travelStatus == 1">空闲</div>
            <div class="carDetail-title" v-if="item.travelStatus == 5">保养中</div>
            <div class="carDetail-title" v-if="item.travelStatus == 2">维修中</div>
          </div>
        </div>
      </div>
      <!--车辆预警-->
      <div class="carEarlyWarning">
        <div class="carEarlyWarningTitle">车辆预警</div>
        <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" ><i class="el-icon-warning" :class="item.color" style="padding-left:30px;padding-right:20px"></i>{{item.msg}} <span style="text-decoration:underline">立即处理</span></li>
          </ul>
        </div>
      </div>

      <!--车辆排班-->
      <div class="carEarlyWarning" style="padding-bottom:30px">
        <div class="carEarlyWarningTitle" style="display: flex;justify-content: space-between;margin-bottom:20px">
          <div style="flex:1">车辆排班</div>
          <!--bookType 1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用、9、客户用车、10、其他-->
          <div style="color: rgb(87, 81, 96);font-family: 微软雅黑;font-weight: 400;font-style: normal;font-size: 14px;">
            <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>
        </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>
              <div style="color: #bfcbd9;font-size: 14px;">
                现在位置：{{scope.row.parkCompanyName}}
              </div>
              <div>{{scope.row.numberPlate}}<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: absolute;color: #fff;top: -24px;right: 0;">{{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>

      
      
      <!-- <div style="position: relative;padding: 10px;padding-left: 0;width: 100%;overflow-x:auto;" v-if="currentMonth">
        <div style="display: flex;">
          <div class="day-title" style="min-width: 200px;max-width:200px;background: #eef1f6;">日期（{{currentMonth}}~{{nextMonth}}月）</div>
          <div class="day-title" style="background: #eef1f6;" v-for="item in  tempDayList" :key="item.day" ><span>{{item.day}}</span></div>
        </div>
        <div  v-for="item in list" :key="item.id" style="display: flex;">
          <div class="v-list" style="display: inline-block;">
            <div style="color: #bfcbd9;font-size: 14px;">
              现在位置：{{item.parkCompanyName}}
            </div>
            <div>{{item.numberPlate}}<img src="../../assets/images/detail.png" style="width: 15px;margin-left: 10px;"/></div>
            <div style="color: #bfcbd9;font-size: 14px;">{{item.vehicleModel?item.vehicleModel.name:''}}</div>
          </div>
          <div class="day-title flex-jca-fdc" style="padding: 0;" v-for="iitem in  item.temp" :key="iitem.day" >
            <div v-for="ii in  iitem.children" :key="ii.time" class="ii-day" :class="ii.bg" @click="toShowDialog(item, iitem, ii)">
              <span v-if="ii.timeEtr=='00'" style="position: absolute;color: rgb(255, 255, 255);left: -18px;top: 60px;">{{ii.timeEtr}}</span>
              <span v-else style="position: absolute;color: #fff;top: -17px;right: 0;">{{ii.timeEtr}}</span>
              <span style="position: absolute;color: #fff;z-index: 11;">{{ii.timeStr}}</span>
            </div>
          </div>
        </div>
      </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 scoped>
  .app-container{background-color: rgba(245, 245, 245, 1);}
  .statisticsBox{width: 100%;display: flex;justify-content: space-between;margin-bottom: 40px;}
  .statisticsItem{flex: 1;background-color: #fff;-moz-box-shadow:1px 1px 3px #ccc; -webkit-box-shadow:1px 1px 3px #ccc; box-shadow:1px 1px 3px #ccc;border-radius: 4px;max-width: calc(33.3% - 40px)}
  .colorbg1{width: 100%;height: 6px;border-radius: 4px 4px 0 0;background:-webkit-linear-gradient(left, #1c9fff, #70d1fc);background:-o-linear-gradient(right, #1c9fff, #70d1fc);background:-moz-linear-gradient(right, #1c9fff, #70d1fc);background:linear-gradient(to right, #1c9fff, #70d1fc);}
  .colorbg2{width: 100%;height: 6px;border-radius: 4px 4px 0 0;background:-webkit-linear-gradient(left, #1f51fc, #70a0fc);background:-o-linear-gradient(right, #1f51fc, #70a0fc);background:-moz-linear-gradient(right, #1f51fc, #70a0fc);background:linear-gradient(to right, #1f51fc, #70a0fc);}
  .colorbg3{width: 100%;height: 6px;border-radius: 4px 4px 0 0;background:-webkit-linear-gradient(left, #fc201f, #fb6b5b);background:-o-linear-gradient(right, #fc201f, #fb6b5b);background:-moz-linear-gradient(right, #fc201f, #fb6b5b);background:linear-gradient(to right, #fc201f, #fb6b5b);}
  .colorbg4{width: 100%;height: 6px;border-radius: 4px 4px 0 0;background:-webkit-linear-gradient(left, #ff6a05, #ffc671);background:-o-linear-gradient(right, #ff6a05, #ffc671);background:-moz-linear-gradient(right, #ff6a05, #ffc671);background:linear-gradient(to right, #ff6a05, #ffc671);}
  .statisticsItem .detail{width: 100%;background: #fff;padding: 40px;border-radius: 0 0 4px 4px;}
  .detail-title{font-size: 16px;color: rgb(107, 107, 107);    font-family: 微软雅黑;font-weight: 400;font-style: normal;padding-bottom: 10px}
  .detail-money{font-family: 'Arial Normal', 'Arial';font-weight: 400;font-style: normal;font-size: 28px;color: #000000;}
  .carDetail{width: 100%;margin-bottom: 40px;padding: 0 20px;-moz-box-shadow:1px 1px 3px #ccc; -webkit-box-shadow:1px 1px 3px #ccc; box-shadow:1px 1px 3px #ccc;border-radius: 4px;background: #fff;}
  .carDetailBox{width: 100%;display: flex;justify-content: space-between;padding: 30px 0 15px 0}
  .carDetailItem{flex: 1;background-color: #fff;text-align: center;border-right: 1px solid rgba(240, 240, 240, 1);}
  .carDetailBox .carDetailItem:last-child{border-right: none;}
  .carDetailBoxTitle{display: block;font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑;font-weight: 700;font-style: normal;font-size: 18px;color: rgb(81, 81, 81);padding: 20px 0;border-bottom: 1px solid rgba(240, 240, 240, 1);}
  .detail-num{font-family: 'Arial Normal', 'Arial';font-weight: 400;font-style: normal;font-size: 28px;color: #000000;padding-top: 20px;}
  .detail-num .unit{position: absolute;font-family: 微软雅黑;font-weight: 400;font-style: normal;color: rgb(107, 107, 107);font-size: 13px;right: -20px;}
  .carDetail-title{    font-family: 微软雅黑;font-weight: 400;font-style: normal;font-size: 18px;color: rgb(78, 75, 86);padding: 10px 0 20px 0;}
  .carEarlyWarning{width: 100%;margin-bottom: 40px;padding: 0 20px;-moz-box-shadow:1px 1px 3px #ccc; -webkit-box-shadow:1px 1px 3px #ccc; box-shadow:1px 1px 3px #ccc;border-radius: 4px;background: #fff;}
  .carEarlyWarningTitle{display: block;font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑;font-weight: 700;font-style: normal;font-size: 18px;color: rgb(81, 81, 81);padding: 20px 0;border-bottom: 1px solid rgba(240, 240, 240, 1);}
  .flex-jca-fdc{
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
  }
  .schedul-tb .el-table .cell{
    padding: 0;
  }
  .tip-co{
    padding: 0 15px;
    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: 0;
    background: #fff;
  }

  .marquee_list {
    display: block;

    position: absolute;

    top: 0;

    left: 0;
    padding-left: 0px;
  }

  .marquee_top {
    transition: all 0.5s;
  }

  .marquee_list li {
    height: 31px;

    line-height: 31px;

    font-size: 14px;
    list-style-type:none;
    color: rgb(87, 81, 96);
    font-family: 微软雅黑;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
  }

  .marquee_list li span {
    padding: 0 2px;
  }
  .warn-1{
    color: #1c9fff;
  }
  .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 {
    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,
    orderStatistics
  } 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 {
        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,//车辆状态
        },
        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: {},//旅游订单详情-当前行
        totalGmv:0,
        totalSecurityDeposit:0,
        peichang:0,
      }
    },
    created() {
      this.getList();
      this.getOrderStatistics();
      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;
        })
      getAllCompany(codeAndBranchCompany => {
        this.allCompanies = codeAndBranchCompany;
      });
    },
    filters: {
      NumFormat: function (value) {
        if(!value) return '0.00';
        var intPart =  Number(value)|0; //获取整数部分
        var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
        var floatPart = ".00"; //预定义小数部分
        var value2Array = String(value).split(".");
        //=2表示数据有小数位
        if(value2Array.length == 2) {
          floatPart = value2Array[1].toString(); //拿到小数部分
          if(floatPart.length == 1) { //补0,实际上用不着
            return intPartFormat + "." + floatPart + '0';
          } else {
            return intPartFormat + "." + floatPart;
          }
        } else {
          return intPartFormat + floatPart;
        }
      }
    },
    computed: {
      ...mapGetters([
        'elements',
        'vehicleStatus'
      ]),
      //获取大区列表
      getAllZoneList(){
        this.allZoneArr = getAllZone();
        return getAllZone();
      },
    },
    methods: {
      getOrderStatistics(){
        var that = this;
        orderStatistics(4).then(res => {
          if (res.status == 200) {
            that.totalGmv = res.data.totalGmv
            that.totalSecurityDeposit = res.data.totalSecurityDeposit
            that.peichang = Number(Number(res.data.totalCompensation)+Number(res.data.totalForfeit)+Number(res.data.totalPenalSum)+Number(res.data.totalPostpone)).toFixed(2)
          } else {
            this.$notify({
              title: '失败',
              message: '操作失败！',
              type: 'error',
              duration: 2000
            });
          }
        });
      },
      /**
       * 旅游订单详情弹框关闭
       * */
      tourOrderDetailDialogEvent(e){
        this.tourDialogVisible = false;
      },
      /**
       * 点击事件
       * */
      toShowDialog(item, iitem, ii){
//        <!--bookType 1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用、9、客户用车、10、其他-->
        if(!ii.bg){
          //空白-可安排用车
//          this.anpai = true;
//          let arr = item.vehicleModel.keyword.split(",");
//          item.vehicleModel.keyword = arr.join(" | ");
//          this.currentItem = {item: item, iitem: iitem, ii: ii};
        } 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 == 7){
            this.zhanlan = true;
            this.currentItem = {item: item, iitem: iitem, ii: ii, title: "预定用车",upkeepName:'预定'};
          } else if(ii.bookType == 1){
            this.getOneVechi(ii.vehicleBookRecord.orderNo);
//            this.rentOrder = true;
//            this.rentOrderInfo = {};
            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) {
            //房车游订单详情
            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) {
        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;
        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();
      },
      /**
       * 获取未来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 2-分公司使用、1-租车、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用-->
                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 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;
                      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>
