<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">{{item.msg}}  >>立即处理</li>
        </ul>
      </div>
      <!--车辆排班-->
      <div style="display: flex;">
        <span class="tip-co bg-1"></span><span>租房车</span>
        <span class="tip-co bg-2"></span><span>房车游</span>
        <span class="tip-co bg-3"></span><span>展览</span>
        <span class="tip-co bg-4"></span><span>保养</span>
        <span class="tip-co bg-5"></span><span>预约中</span>
        <span class="tip-co bg-6"></span><span>禁用</span>
      </div>
      <div style="position: relative;padding: 10px;padding-left: 0;" v-if="currentMonth">
        <div style="display: flex;">
          <div class="day-title" style="min-width: 200px;max-width:200px;background: #eef1f6;">日期（{{currentMonth}}~{{currentMonth+1}}月）</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.endCompanyName}}
            </div>
            <div>{{item.numberPlate}}</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)">
            </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>
  </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;
  }
  .bg-1{
    background: #20a0ff;
  }
  .bg-2{
    background: #6633cc;
  }
  .bg-3{
    background: #00cc66;
  }
  .bg-4{
    background: #ff6633;
  }
  .bg-5{
    background: #cff1f6;
  }
  .bg-6{
    background: #d7d7d7;
  }
  .ii-day{
    height: 4.16%;
  }
  .day-title{
    border-right:1px solid #bfcbd9;
    border-bottom:1px solid #bfcbd9;
    padding: 10px;
    min-width: 45px;
    max-width: 45px;
    display: inline-block;
  }
  .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-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .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-bottom: 10px;
    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;

    padding-left: 20px;
  }

  .marquee_list li span {
    padding: 0 2px;
  }
</style>

<script>
  import 'static/css/uploadImg.css';// 引入图片上传组件对话框
  import vehicleMaintenanceModal from './vehicleMaintenanceModal';//车辆保养弹框
  import vehicleExhibitionModal from './vehicleExhibitionModal';//车辆展览弹框
  import vehiclePlanModal from './vehiclePlanModal';//安排用车
  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
  } from 'utils/dateUtils';

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

  import {mapGetters} from 'vuex';
  import {
    getToken
  } from 'utils/auth';
  import {
    getVehiclePlanList
  } 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
    },
    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: 20,
          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,//当前月份
        allBranchCompany: [],//所有分公司列表
        baoyang: false,//保养弹框,
        zhanlan: false,//展览弹框
        anpai: false,//安排用车弹框
        currentItem: {},//待操作数据
      }
    },
    created() {
      this.getList();
      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: {
      /**
       * 点击事件
       * */
      toShowDialog(item, iitem, ii){
        console.log(item);
        console.log(iitem);
        console.log(ii);
        if(!ii.bg){
          //空白-可安排用车
          this.anpai = true;
          this.currentItem = {item: item, iitem: iitem, ii: ii};
        } else {
          if(ii.status == 4){
            //保养
            this.baoyang = true;
            this.currentItem = {item: item, iitem: iitem, ii: ii};
          } else if(ii.status == 3){
            //展览
            this.zhanlan = true;
            this.currentItem = {item: item, iitem: iitem, ii: ii, title: "展览用车"};
          } else if(ii.status == 1){
            //展览
            this.zhanlan = true;
            this.currentItem = {item: item, iitem: iitem, ii: ii, title: "预定用车"};
          }
        }
      },
      /**
       * 关闭保养弹框后逻辑处理
       * */
      baoyangDialogEvent(e){
        this.baoyang = false;
        if(e){//关闭编辑
          //编辑成功-重新加载列表
          this.getList();
        }
      },
      /**
       * 关闭展览弹框后逻辑处理
       * */
      zhanlanDialogEvent(e){
        this.zhanlan = false;
        if(e){//关闭编辑
          //编辑成功-重新加载列表
          this.getList();
        }
      },
      /**
       * 安排用车弹框关闭逻辑处理
       * */
      anpaiDialogEvent(e){
        this.anpai = false;
        if(e){//关闭编辑
          //编辑成功-重新加载列表
          this.getList();
        }
      },
      /**
       * 根据片区id获取分公司列表
       * */
      getProvinceRegions(item) {
        this.listQuery.zoneId = item;
        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 => {
          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.temp = _this.getDayList(item);//获取车辆30天排期
            });
          }
          if (!this.$utils.isEmpty(response.data.vehicleWarningMsgs)) {
            this.marqueeList = response.data.vehicleWarningMsgs;
          }
          this.listLoading = false;
          this.list = listRs;
          this.total = totalCountRs;
          this.countTJ = response.data.vehicleCountVos;

        })
      },
      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();
      },
      /**
       * 获取日期数组
       * */
      getDayList(item){
        let temp = [];
        let list = this.list;
        let currentMonth = getCurrentMonth();
        this.currentMonth = parseInt(currentMonth);
//        console.log(currentMonth);

        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 = "";//背景色
          let status = 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;
            }
            item.vehicleBookRecord.map(function (iitem) {
              if (iitem.bookStartDate <= tt && iitem.bookEndDate >tt) {
                bg = "bg-"+ iitem.status;
                status = iitem.status;
                vehicleBookRecord = iitem;
              }
            });
            children.push({time: tt, h: h, bg: bg, status: status, vehicleBookRecord: vehicleBookRecord});
          }
          temp.push({day: getTimeByDay(i), month: getMonth(i), children: children});
        }
//        console.log(temp);
        return temp;
      },
     /**
      * 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;
      },
    }
  }
</script>
