
<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<el-form ref="queryForm" :model="listQuery" label-width="100px">
				<el-row>
					<el-col :span="5">
						<el-form-item label="统计时间:">
							<el-date-picker
								v-model="time"
								type="daterange"
								range-separator="-"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								@change="changeTime"
								placeholder="请选择统计时间"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="统计方式:" class="wayMsg">
							<span
								v-for="(item,index) in way"
								:key="index"
								:class="{active:isactive==item.label}"
								@click="changeWay(item)"
							>{{item.label}}</span>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="所属公司" prop="startCompanyId">
							<el-select
								v-model="listQuery.companyId"
								filterable
								placeholder="请选择"
								getAllBranchCompanyChange
							>
								<el-option :key="undefined" label="无" :value="undefined"></el-option>
								<el-option
									v-for="item in allBranchCompany"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
			<el-button class="filter-item" type="primary" v-waves icon="delete" @click="clearSearch">清除搜索</el-button>
			<el-button class="filter-item" type="primary" v-waves @click="exportVehicleInfo">导出为Excel</el-button>
			<el-table :data="list" border fit highlight-current-row style="width: 100%" v-loading="loading">
				<el-table-column align="center" label="时间">
					<template scope="scope">
						<span v-if="scope.row.countDate">{{scope.row.countDate}}</span>
						<span v-else-if="scope.row.weekStartDate">{{scope.row.weekStartDate}} ~ {{scope.row.weekEndDate}}</span>
						<span v-else>{{scope.row.countYear}}-{{scope.row.countMonth}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="公司名">
					<template scope="scope">
						<span>{{scope.row.companyName}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="停靠车辆数量">
					<template scope="scope">
						<span>{{scope.row.vehicleNum}}</span>
					</template>
				</el-table-column>
			</el-table>

			<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"
				style="margin-top:20px"
			></el-pagination>
		</div>
	</div>
</template>
<script>
import { pageList, vehicleInfoExcel} from 'api/statistics/vehicleStatistics'
import {formatDate}  from '../../utils/dateFormattor'
import { getAllCompany } from 'api/base_info/branch_company'
export default {
	created() {
		this.getList(),
		getAllCompany(codeAndBranchCompany => {
			this.allBranchCompany = codeAndBranchCompany;
		});
	},
	data() {
		return {
			loading: false,
			total: 0,
			list: [],
	        time: [],
			allBranchCompany:[],
			// 统计时间筛选
			listQuery: {
				type: 1,
				startTime: null,
				endTime: null,
				companyId:null,
				limit: 10,
				page: 1
			},
			//统计方式筛选
			way: [
				{
					label: '日统计',
					id: 1
				},
				{
					label: '周统计',
					id: 2
				},
				{
					label: '月统计',
					id: 3
				}
			],
			isactive: '日统计'
		}
	},
	methods: {
		//统计时间筛选
		changeTime() {
			!!this.time[0]
				? (this.listQuery.startTime = this.time[0])
				: (this.listQuery.startTime = null)
			!!this.time[1]
				? (this.listQuery.endTime = this.time[1])
				: (this.listQuery.endTime = null)
			if(this.listQuery.startTime && this.listQuery.endTime) {
				this.listQuery.startTime = formatDate(this.listQuery.startTime, 'yyyy-MM-dd')
				this.listQuery.endTime = formatDate(this.listQuery.endTime, 'yyyy-MM-dd')
			}
		},
		//统计方式筛选
		changeWay(val) {
			this.isactive = val.label
			this.listQuery.type = val.id
			this.listQuery.page = 1
			this.getList()
		},
		//导出
		exportVehicleInfo() {
			vehicleInfoExcel(this.listQuery).then(res => {
				const content = res
				const blob = new Blob([content])
				const fileName = '车辆信息.xlsx'
				if ('download' in document.createElement('a')) {
					// 非IE下载
					const elink = document.createElement('a')
					elink.download = fileName
					elink.style.display = 'none'
					elink.href = URL.createObjectURL(blob)
					document.body.appendChild(elink)
					elink.click()
					URL.revokeObjectURL(elink.href) // 释放URL 对象
					document.body.removeChild(elink)
				} else {
					// IE10+下载
					navigator.msSaveBlob(blob, fileName)
				}
			})
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.listQuery.page = val
			this.getList()
		},
		handleFilter() {
			this.listQuery.page = 1
			this.$refs.queryForm.validate(valid => {
				if (valid) {
					this.getList()
				} else {
					return false
				}
			})
		},
		clearSearch() {
			this.listQuery = {
				type: 1,
				startTime: null,
				endTime: null,
				companyId:null,
				limit: 10,
				page: 1
			}
			this.time = []
			this.isactive = '日统计'
			this.getList()
		},
		//列表
		getList() {
			this.loading = true
			pageList(this.listQuery).then(data => {
				if (data.status == 200 && data.data) {
					this.total = data.totalCount
					this.list = []
					this.list = data.data.data
				}
				setTimeout(() => {
					this.loading = false
				}, 300)
			})
		}
	}
}
</script>
<style>
.wayMsg span {
	margin: 10px;
	cursor: pointer;
}
.active {
	color: #409eff;
	font-weight: bold;
}
</style>
