<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-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="所属地区" prop="zoneId">
                <el-select class="filter-item" v-model="listQuery.zoneId" placeholder="请选择" @change="getProvinceRegions">
                  <el-option :key="undefined" label="无" :value="undefined"></el-option>
                  <el-option v-for="val in getAllZoneList" :key="val.id" :label="val.name" :value="val.id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-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>
        <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      </div>
      <el-form label-width="100px" v-if="countTJ">
      <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、禁用-->
      <div style="display: flex;">
        <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-7"></span><span>预约中</span>
        <span class="tip-co bg-8"></span><span>禁用</span>
      </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;" @click="toVehicleRecords(item)">
            <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" >
            <!--@click="ii.bg?toShowDialog(item, iitem, ii):''"-->
            <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 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;
  }
  .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、禁用*/
  .bg-1{
    background: #20a0ff;
  }
  .bg-5{
    background: #6633cc;
  }
  .bg-4{
    background: #00cc66;
  }
  .bg-6{
    background: #ff6633;
  }
  .bg-7{
    background: #cff1f6;
  }
  .bg-8{
    background: #d7d7d7;
  }
  .ii-day{
    height: 4.16%;
    position: relative;
  }
  .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 {
    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
  } 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,
        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,
        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: {},//旅游订单详情-当前行
      }
    },
    created() {
      this.getList();
      let currentMonth = getCurrentMonth();
      this.currentMonth = parseInt(currentMonth);
      if(this.currentMonth < 12){
        this.nextMonth = this.currentMonth + 1;
      } else {
        this.nextMonth = 1;
      }
      this.getTempDayList();
      this.mar = setInterval(this.showMarquee, 2000);
      getAll()
        .then(response => {
          this.allCompaniesArr = response.data;
        })
      getAllCompany(codeAndBranchCompany => {
        this.allCompanies = codeAndBranchCompany;
      });
    },
    computed: {
      ...mapGetters([
        'elements',
        'vehicleStatus'
      ]),
      //获取大区列表
      getAllZoneList(){
        this.allZoneArr = getAllZone();
        return getAllZone();
      },
    },
    methods: {
      /**
       * 旅游订单详情弹框关闭
       * */
      tourOrderDetailDialogEvent(e){
        this.tourDialogVisible = false;
      },
      /**
       * 点击事件
       * */
      toShowDialog(item, iitem, ii){
//        <!--bookType 1-租车、2-分公司使用、3-维修、4、展览、5、旅游、6、保养、7、预约中、8、禁用-->
        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 == 4){
            //展览
            this.zhanlan = true;
            this.currentItem = {item: item, iitem: iitem, ii: ii, title: "展览用车"};
          } else if(ii.bookType == 7){
            this.zhanlan = true;
            this.currentItem = {item: item, iitem: iitem, ii: ii, title: "预定用车"};
          } 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 == 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: "禁用"};
          }
        }
      },
      /**
       * 根据订单号获取订单详情
       * */
      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){
          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)){//租车、旅游、展览显示起止时间
                    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);
            }
            ttemp.children = children
          });
        });
      },
     /**
      * tempDayList
      **/
      getTempDayList(){
        let temp = [];
        let list = this.list;
        let currentMonth = getCurrentMonth();
        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 bg = "";
          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;
            }
            children.push({time: tt, h: h, bg: bg});
          }
          temp.push({day: getTimeByDay(i), month: getMonth(i), children: children});
        }
        this.tempDayList = temp;
      },
      /**
       * 排版记录
       */
      toVehicleRecords(item){
        let selectedMonth = getCurrentYearMonth();
        this.$router.push({path: '/vehicle/vehicleRecords?selectedMonth='+selectedMonth+"&numberPlate="+item.numberPlate});
      }
    }
  }
</script>
