<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<el-form :inline="true" label-position="left">
				<el-form-item label="统计周期">
					<el-date-picker v-model="time" type="daterange" placeholder="请选择统计周期" @change="changeTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="统计方式">
					<el-radio-group v-model="listQuery.statisticalWay" @change="changeType">
						<el-radio-button label="1">日</el-radio-button>
						<el-radio-button label="2">周</el-radio-button>
						<el-radio-button label="3">月</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="所属公司">
					<el-select
						v-model="listQuery.companyId"
						filterable
						placeholder="请选择业绩所属公司"
						clearable
						@change="changeCompany"
					>
						<el-option label="全部" value>全部</el-option>
						<el-option v-for="item in allCompaniesArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-button type="primary" @click="clearSearch">清空搜索</el-button>
				<el-button type="primary" :loading="excelLoading" @click="downloadExcel">导出报表</el-button>
			</el-form>

			<el-table
				:data="tableData"
				border
				style="width: 100%"
				header-align="center"
				v-loading="loadingTab"
			>
				<el-table-column
					prop="dateStr"
					label="时间"
					align="center"
					width="200"
					v-if="listQuery.statisticalWay == 1"
				></el-table-column>
				<el-table-column
					prop="weekOfYear"
					label="时间"
					align="center"
					width="200"
					v-else-if="listQuery.statisticalWay == 2"
				></el-table-column>
				<el-table-column prop="month" label="时间" align="center" width="200" v-else></el-table-column>
				<el-table-column prop="companyName" label="公司" align="center"></el-table-column>
				<el-table-column prop="memberAmount" label="会员费" align="center"></el-table-column>
				<el-table-column prop="rentVehilceAmount" label="租车费" align="center"></el-table-column>
				<el-table-column prop="depositAmount" label="押金" align="center"></el-table-column>
				<el-table-column prop="noDeductibleAmount" label="不计免赔费" align="center"></el-table-column>
				<el-table-column prop="travelAmount" label="旅游费" align="center"></el-table-column>
				<el-table-column prop="rentDays" label="租借天数" align="center"></el-table-column>
				<el-table-column prop="extralAmount" label="其他费用" align="center"></el-table-column>
				<el-table-column prop="departureNum" label="出车服务次数" align="center"></el-table-column>
				<el-table-column prop="arrivalNum" label="收车服务次数" align="center"></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 { company_performance, excelExport } from 'api/statistics'
import { getAll } from 'api/base_info/branch_company'
export default {
	created() {
		//表格数据
		this.getList()
		//获取分公司
		getAll().then(data => {
			this.allCompaniesArr = data.data
		})
	},
	data() {
		return {
			loadingTab: false,
			tableData: [], //表格数据
			time: null, //时间
			excelLoading: false, //导出loading
			allCompaniesArr: [],
            total: null,
			listQuery: {
				statisticalWay: 1, //统计方式
				companyId: null, //公司
				page: 1,
				limit: 10
			}
		}
	},
	methods: {
		//统计周期筛选
		changeTime(val, value) {
			this.listQuery.page = 1
			if (!!val) {
				let value = val.split(' - ')
				this.listQuery.startDate = value[0] + ' 00:00:00'
				this.listQuery.endDate = value[1] + ' 23:59:59'
				this.getList()
			} else {
				this.listQuery.startDate = null
				this.listQuery.endDate = null
				this.getList()
			}
		},
		//统计方式筛选
		changeType() {
			this.listQuery.page = 1
			this.getList()
		},
		//公司筛选
		changeCompany() {
			this.listQuery.page = 1
			this.getList()
		},
		//清空搜索
		clearSearch() {
			this.time = null
			this.listQuery = {
				statisticalWay: 1, //统计方式
				companyId: null, //公司
				page: 1,
				limit: 10
			}
		},
		//导出
		downloadExcel() {
			this.excelLoading = true
			var u = navigator.userAgent,
				app = navigator.appVersion
			excelExport(this.listQuery, { responseType: 'arraybuffer' }).then(
				res => {
					const content = res
					const blob = new Blob([content], {
						type: 'application/vnd.ms-excel'
					})
					const fileName = '分公司报表.xlsx'
					if (u.indexOf('Edge') > -1) {
						window.navigator.msSaveBlob(blob, fileName)
					} else {
						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)
					}
					this.excelLoading = false
				}
			)
		},
		//表格数据
		getList() {
			this.loadingTab = true
			company_performance(this.listQuery).then(data => {
				if (data.status == 200) {
                    this.tableData = data.data.data
                    if (this.listQuery.page == 1) {
                        this.total = data.data.totalCount
                    }
					window.scrollTo(0, 0)
				} else {
					this.$message.error(data.message)
				}
				setTimeout(() => {
					this.loadingTab = false
				}, 300)
			})
		},
		//分页
		handleSizeChange(val) {
			this.listQuery.limit = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.listQuery.page = val
			this.getList()
		}
	}
}
</script>
<style>
</style>