<template>
	<div class="app-container calendar-list-container">
	  <div class="filter-container" ref="filter-container">
	 <el-form ref="queryForm" :model="listQuery" label-width="100px">
		    <el-row>
		      <el-col :span="5">
		        <el-form-item label="类型">
		              <el-select
		            class="filter-item"
		            v-model="listQuery.type"
		            placeholder="请选择"
		          >
		            <el-option :key="undefined" label="无" :value="undefined"></el-option>
		            <el-option
		              v-for="val in typeList"
		              :key="val.id"
		              :label="val.name"
		              :value="val.id"
		            ></el-option>
		          </el-select>
		        </el-form-item>
		      </el-col>
			   <el-col :span="5">
			     <el-form-item label="开始时间">
			      <el-date-picker
			        v-model="listQuery.startTime"
			        type="date"
			        :editable="false"
			        format="yyyy-MM-dd"
			        prop="startTime"
			        placeholder="请选择日期">
			      </el-date-picker>
			    </el-form-item>
			  </el-col>
				<el-col :span="5" >
				   <el-form-item label="结束时间">
				    <el-date-picker
				      v-model="listQuery.endTime"
				      type="date"
				      :editable="false"
				      format="yyyy-MM-dd"
				      prop="endTime"
				      placeholder="请选择日期">
				    </el-date-picker>
				  </el-form-item>
				</el-col>
		    </el-row>
			 <el-row>
				<el-button class="filter-item" type="primary" @click="handlerSearch">
				  查询
				</el-button>
				<el-button class="filter-item" type="primary" @click="downloadExcel">
				  导出
				</el-button>
         <el-button class="filter-item" type="primary" v-waves @click="reloadPage">重置</el-button>
			 </el-row>
		  </el-form>
    <el-table id = "out-table" :key='tableKey' :data="list" border fit highlight-current-row style="width: 100%">
   <el-table-column
     type="index"
     align="center" label="序号" width="117">
   </el-table-column>
   <el-table-column width="130" align="center" label="类型">
     <template slot-scope="scope">
       <span>{{getType(scope.row.type)}}</span>
     </template>
   </el-table-column>
   <el-table-column width="130" align="center" label="应交车">
     <template slot-scope="scope">
       <span>{{scope.row.departureNum}}</span>
     </template>
   </el-table-column>

   <el-table-column width="130" align="center" label="提前交车">
     <template slot-scope="scope">
       <span>{{scope.row.beforeDepartureNum}}</span>
     </template>
   </el-table-column>
   <el-table-column width="120" align="center" label="正常交车">
     <template slot-scope="scope">
       <span>{{scope.row.actualDepartureNum}}</span>
     </template>
   </el-table-column>

   <el-table-column width="130" align="center" label="延后交车">
     <template slot-scope="scope">
       <span>{{scope.row.afterDepartureNum}}</span>
     </template>
   </el-table-column>

   <el-table-column width="130" align="center" label="应收车">
     <template slot-scope="scope">
       <span>{{scope.row.arrivalNum}}</span>
     </template>
   </el-table-column>

	<el-table-column width="130" align="center" label="提前收车">
	  <template slot-scope="scope">
	    <span>{{scope.row.beforeArrivalNum}}</span>
	  </template>
	</el-table-column>

	<el-table-column width="130" align="center" label="正常收车">
	  <template slot-scope="scope">
	    <span>{{scope.row.actualArrivalNum}}</span>
	  </template>
	</el-table-column>

	<el-table-column width="130" align="center" label="延后收车">
	  <template slot-scope="scope">
	    <span>{{scope.row.afterArrivalNum}}</span>
	  </template>
	</el-table-column>

		<el-table-column width="130" align="center" label="过期未出车">
	  <template slot-scope="scope">
	    <span>{{scope.row.noUseNum}}</span>
	  </template>
	</el-table-column>

		<el-table-column width="130" align="center" label="已取消">
	  <template slot-scope="scope">
	    <span>{{scope.row.cancelNum}}</span>
	  </template>
	</el-table-column>

	<el-table-column width="130" align="center" label="日期">
	  <template slot-scope="scope">
	    <span>{{scope.row.countDate}}</span>
	  </template>
	</el-table-column>
 </el-table>
 </div>
 </div>
</template>

<script>
	import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
	 import {
	    get,excelExport,excelDownload
	} from 'api/vehicle/vehicleCount';
	import { formatDate,deepCopyDate,getYMD_date } from "../../../utils/dateUtils";
    export default {
        name: 'vehicleInfo',
        data() {
            return {
				listQuery: {
					type: null,
					startTime: new Date(),
					endTime:new Date()
				},
				tableKey: 0,
				typeList: [
					{'id':1, "name":"用户租车"},
					{'id':2, "name":"用户旅游"},
					{'id':3, "name":"内部用车"}
					],
				list : [],
				header : ['序号','类型','应交车','提前交车','正常交车','延期交车','应还车','提前还车','正常还车','延期还车','过期未出车','已取消','日期'],
				name: 'export'
              }
        },
    created() {
      let query =  localStorage.getItem("vehicleCount");
      if(query !="null" && query){
        this.listQuery = JSON.parse(query);
      }
      this.handlerSearch();
    },
    methods: {
      /**
       * 重置
       * */
      reloadPage() {
        this.listQuery = {
          type: null,
          startTime: new Date(),
          endTime:new Date()
        };
        if(this.listQuery){
          localStorage.setItem("vehicleCount", JSON.stringify(this.listQuery));
        }
        this.handlerSearch();
      },
			handlerSearch() {
				if (this.listQuery.startTime) {
					this.listQuery.startTime = getYMD_date(new Date(this.listQuery.startTime));
				}
				if(this.listQuery.endTime) {
					this.listQuery.endTime = getYMD_date(new Date(this.listQuery.endTime));
				}
        if(this.listQuery){
          localStorage.setItem("vehicleCount", JSON.stringify(this.listQuery));
        }
				 get(this.listQuery).then(response => {
				     if (response.status === 200) {
						 this.list = response.data
				    } else {
				      this.$notify({
				        title: "失败",
				        message: response.message,
				        type: "error",
				        duration: 2000
				      });
				    }
				})
			},
			getType(item) {
				if (item == 1) {
					return '用户租车';
				}
				if (item == 2) {
					return '用户旅游';
				}
				if (item == 3) {
					return '内部用车';
				}
				return '';
			},
		downloadExcel() {
						var valueList = []
						var mapList = []
						this.list.forEach(v=>{
							for(let key in v) {
								if(key == 'type') {
									if(v[key] == 1) {
										mapList.push('用户租车')
									}
									if(v[key] == 2) {
										mapList.push('用户旅游')
									}
									if(v[key] == 3) {
										mapList.push('内部用车')
									}
								} else {
									 mapList.push(v[key])
								}
							}
							valueList.push(mapList)
							mapList = []
						})
						let param = {
							"data": valueList,
							"header":this.header,
							"name":this.name
						}
						let fileName = null;
				excelExport(param).then(response => {
						 if (response.status === 200) {
						 fileName = response.data
						} else {
							this.$notify({
								title: "失败",
								message: response.message,
								type: "error",
								duration: 2000
							});
						}
				})
			 this.$confirm('确定导出吗?', '提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
				}).then(() => {
					var domain = document.domain;
					console.log(domain)
					window.location.href="https://"+domain+"/vehicle/vehicleCount/app/unauth/download?path="+fileName;
				})
        },

	}
 }
</script>
