
<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="listQuery.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" style="float:right;text-align:right">
						<el-button class="filter-item" type="primary" v-waves @click="handleFilter">导出为Excel</el-button>
					</el-col>
				</el-row>
			</el-form>
			<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>{{scope.row.timeSlot}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="普通会员购买量">
					<template scope="scope">
						<span>{{scope.row.pNumber}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="支付金额(普通会员)">
					<template scope="scope">
						<span>{{scope.row.pAmount}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="黄金会员购买量">
					<template scope="scope">
						<span>{{scope.row.goldNumber}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="支付金额(黄金会员)">
					<template scope="scope">
						<span>{{scope.row.goldAmount}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="钻石会员购买量">
					<template scope="scope">
						<span>{{scope.row.hNumber}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="支付金额(钻石会员)">
					<template scope="scope">
						<span>{{scope.row.hAmount}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="总支付金额">
					<template scope="scope">
						<span>{{scope.row.totalPayment}}</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 { orderStatistics, downloadExcel } from 'api/order/rentVehicle'
export default {
	created() {
		this.getList()
	},
	data() {
		return {
			loading: false,
			total: null,
			list: [],
			// 统计时间筛选
			listQuery: {
				time: 'null',
				type: '1',
				startTime: null,
				endTime: null,
				time: '',
				limit: 10,
				page: 1
			},
			//统计方式筛选
			way: [
				{
					label: '日统计',
					id: '1'
				},
				{
					label: '周统计',
					id: '2'
				},
				{
					label: '月统计',
					id: '3'
				}
			],
			isactive: '日统计'
		}
	},
	methods: {
		//统计时间筛选
		changeTime() {
			!!this.listQuery.time[0]
				? (this.listQuery.startTime = this.listQuery.time[0].getTime())
				: (this.listQuery.startTime = null)
			!!this.listQuery.time[1]
				? (this.listQuery.endTime = this.listQuery.time[1].getTime())
				: (this.listQuery.endTime = null)
			this.listQuery.page = 1
			this.getList()
		},
		//统计方式筛选
		changeWay(val) {
			this.isactive = val.label
			this.listQuery.type = val.id
			this.listQuery.page = 1
			this.getList()
		},
		//导出
		handleFilter() {
			downloadExcel(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()
		},
		//列表
		getList() {
			let params = {}
			this.loading = true
			orderStatistics(this.listQuery).then(data => {
				if (data.status == 200) {
					data.data.list.forEach(element => {
						for (let i in element.members) {
							if (element.members[i].level == 1) {
								element.pAmount = element.members[i].amount
								element.plevel = element.members[i].level
								element.pMemberName =
									element.members[i].memberName
								element.pNumber = element.members[i].number
							} else if (element.members[i].level == 2) {
								element.goldAmount = element.members[i].amount
								element.goldlevel = element.members[i].level
								element.goldMemberName =
									element.members[i].memberName
								element.goldNumber = element.members[i].number
							} else if (element.members[i].level == 3) {
								element.hAmount = element.members[i].amount
								element.hlevel = element.members[i].level
								element.hMemberName =
									element.members[i].memberName
								element.hNumber = element.members[i].number
							}
						}
					})
					this.total = data.data.total
					this.list = data.data.list
				}
				setTimeout(() => {
					this.loading = false
				}, 300)
			})
		}
	}
}
</script>
<style>
.wayMsg span {
	margin: 10px;
	cursor: pointer;
}
.active {
	color: #409eff;
	font-weight: bold;
}
</style>
