<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-row>
          <el-row>
            <el-form-item label="所属公司">
              <el-select
                v-model="listQuery.branchId"
                placeholder="请选择"
                @change="change_query_branch"
              >
                <el-option label="全部" :key="undefined" :value="undefined"></el-option>
                <el-option
                  v-for="val in companys_list"
                  :key="val.id"
                  :label="val.name"
                  :value="val.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属门店">
              <el-select
                class="filter-item"
                v-model="listQuery.parkBranchCompanyId"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" :key="undefined" :value="undefined"></el-option>
                <el-option
                  v-for="val in branchCompany_list"
                  :key="val.id"
                  :label="val.name"
                  :value="val.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 slot-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 slot-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
      :orderDetailInfo="orderDetailInfo"
      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,
  orderDetail,
} from "api/order/rentVehicle";
import { formatDate } from "utils/dateFormattor";
import { getAllVehicleList } from "api/vehicleType";
import { company_all_list, branchCompany_all_list } from "api/company.js";
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 {
      companys_list: [],
      branchCompany_list: [],
      branchCompany_list_copy: [],
      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, //车型
        branchId: undefined, //企业
        // parkBranchCompanyId: 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: {}, //待操作数据
      orderDetailInfo: {}, //租车订单详情
      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;
    });
    this.get_all_companys();
    this.get_all_branchCompany();
  },
  computed: {
    ...mapGetters(["elements", "vehicleStatus"]),
    //获取大区列表
    getAllZoneList() {
      this.allZoneArr = getAllZone();
      return getAllZone();
    },
  },
  methods: {
    change_query_branch(val) {
      if (val) {
        this.branchCompany_list = this.branchCompany_list_copy.filter(
          (item) => {
            return item.companyId == val;
          }
        );
      } else {
        this.branchCompany_list = this.branchCompany_list_copy;
      }
    },
    //所有公司
    get_all_companys() {
      company_all_list().then((res) => {
        if (res.status == 200) {
          this.companys_list = res.data;
        }
      });
    },
    //所有门店
    get_all_branchCompany() {
      branchCompany_all_list({ state: 1 }).then((res) => {
        if (res.status == 200) {
          this.branchCompany_list = res.data;
          this.branchCompany_list_copy = res.data;
        }
      });
    },
    /**
     * 重置
     * */
    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, //车型
        branchId: undefined, //企业
        // parkBranchCompanyId: 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) {
      var param = {
        orderNo: orderNo,
        flag: true,
      };
      orderDetail(param).then((response) => {
        this.orderDetailInfo = response.data;
        if (this.orderDetailInfo && this.orderDetailInfo.memberLevel) {
          if (this.orderDetailInfo.memberLevel == 1) {
            this.orderDetailInfo.memberName = "普通会员";
          }
          if (this.orderDetailInfo.memberLevel == 2) {
            this.orderDetailInfo.memberName = "黄金会员";
          }
          if (this.orderDetailInfo.memberLevel == 3) {
            this.orderDetailInfo.memberName = "钻石会员";
          }
          if (this.orderDetailInfo.orderRentVehicleDetail.costDetail) {
            this.orderDetailInfo.costDetail = JSON.parse(
              this.orderDetailInfo.orderRentVehicleDetail.costDetail
            );
          }
          if (this.orderDetailInfo.costDetail.paramJson) {
            this.orderDetailInfo.rentVehiclePriceVO = JSON.parse(
              this.orderDetailInfo.costDetail.paramJson
            );
          }
          if (this.orderDetailInfo.items) {
            for (var i = 0; i < this.orderDetailInfo.items.length; i++) {
              if (this.orderDetailInfo.items[i].type == 104) {
                this.orderDetailInfo.carArticlesJson = this.orderDetailInfo.items[
                  i
                ].detail;
              }
            }
          }
          if (this.orderDetailInfo.status == 2) {
            this.orderDetailInfo.ststusName = "取消";
          }
          if (this.orderDetailInfo.status == -1) {
            this.orderDetailInfo.ststusName = "定损中";
          }
          if (this.orderDetailInfo.status == 3) {
            this.orderDetailInfo.ststusName = "待付款";
          }
          if (this.orderDetailInfo.status == 4) {
            this.orderDetailInfo.ststusName = "待出行";
          }
          if (this.orderDetailInfo.status == 5) {
            this.orderDetailInfo.ststusName = "出行中";
          }
          if (this.orderDetailInfo.status == 6) {
            this.orderDetailInfo.ststusName = "已完成";
          }
        }
        this.rentOrder = true;
      });
    },
    /**
     * 关闭保养弹框后逻辑处理
     * */
    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>
