<template>
	<div class="app-container calendar-list-container">
		<el-form :inline="true" label-width="100px" label-position="right">
			<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-input v-model="listQuery.phone" placeholder="请输入手机号" clearable style="width:200px"></el-input>
			</el-form-item>

			<el-button type="primary" @click="search">搜索</el-button>
			<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
			header-align="center"
			v-loading="loadingTab"
			style="margin-top:20px"
		>
			<el-table-column label="序号" align="center" width="70">
				<template scope="scope">
					<span>{{scope.$index+(listQuery.page - 1) * listQuery.limit + 1}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="userName" label="姓名" align="center"></el-table-column>
			<el-table-column prop="phone" label="电话" align="center"></el-table-column>
			<el-table-column prop="ticketNum" label="人数" align="center"></el-table-column>
			<el-table-column prop="crtTime" 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>
</template>
<script>
import { applyList, excel } from 'api/applyManagements'
export default {
	created() {
		this.getList()
	},
	data() {
		return {
			excelLoading: false,
			loadingTab: false,
			tableData: [],
			time: '',
			total: null, //总页数
			listQuery: {
				page: 1,
				limit: 10,
				startTime: null,
				endTime: null,
				phone: null,
				activityId: 2
			}
		}
	},
	methods: {
		//列表
		getList() {
			this.loadingTab = true
			applyList(this.listQuery).then(data => {
				if (data.status == 200) {
					this.tableData = data.data.data
					this.total = data.data.totalCount
				} else {
					this.$message(data.message)
				}
			})
			setTimeout(() => {
				this.loadingTab = false
			}, 300)
		},
		//搜索
		search() {
			this.listQuery.page = 1
			this.getList()
		},
		//清空搜索
		clearSearch() {
			this.time = null
			this.listQuery = {
				page: 1,
				limit: 10,
				startTime: null,
				endTime: null,
				phone: null,
				activityId: 2
			}
			this.getList()
		},
		//导出
		downloadExcel() {
			this.excelLoading = true
			var u = navigator.userAgent,
				app = navigator.appVersion
			excel(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
			})
		},
		//时间筛选
		changeTime(val) {
			this.listQuery.page = 1
			if (!!val) {
				let value = val.split(' - ')
				this.listQuery.startTime = value[0] + ' 00:00:00'
				this.listQuery.endTime = value[1] + ' 23:59:59'
				this.getList()
			} else {
				this.listQuery.startTime = null
				this.listQuery.endTime = null
				this.getList()
			}
		},
		//页码
		handleSizeChange(val) {
			this.listQuery.limit = val
			this.getList()
		},
		//分页
		handleCurrentChange(val) {
			this.listQuery.page = val
			this.getList()
		}
	}
}
</script>
