<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-form-item label="状态">
				<el-select v-model="listQuery.status" clearable placeholder="请选择状态" @change="changeClass">
					<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</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>
		<div class="information">
			<h4>数据概况.</h4>
			<ul>
				<li>
					<p>{{information.attendNum}}</p>
					<p>参与人数(人)</p>
				</li>
				<li>
					<p>{{information.finishNum}}</p>
					<p>完成任务数(人)</p>
				</li>
				<li>
					<p>{{information.amount}}</p>
					<p>已发放现金总额(元)</p>
				</li>
			</ul>
		</div>
		<el-table
			:data="tableData"
			border
			header-align="center"
			v-loading="loadingTab"
			style="margin-top:20px"
		>
			<el-table-column label="序号" align="center" width="70">
				<template slot-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="positionName" label="身份" align="center"></el-table-column>
			<el-table-column prop="status" label="状态" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.status == 1 ? '已完成' : '未完成'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="amount" label="当前金额(元)" align="center"></el-table-column>
			<el-table-column prop="inviteNum" label="邀请人数" align="center"></el-table-column>
			<el-table-column prop="prizes" label="抽奖礼品" align="center"></el-table-column>
			<el-table-column prop="attendTime" label="参加时间" align="center">
				<template slot-scope="scope">
					<span>{{timeChange(scope.row.attendTime)}}</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>
</template>
<script>
import { formatDate } from 'utils/dateFormattor'
import { applyListActive, excelActive } from 'api/applyManagements'
export default {
	created() {
		this.getList()
	},
	data() {
		return {
			information: {},
			excelLoading: false,
			loadingTab: false,
			tableData: [],
			time: '',
			total: null, //总页数
			options: [
				{
					id: '',
					name: '全部'
				},
				{
					id: 0,
					name: '未完成'
				},
				{
					id: 1,
					name: '已完成'
				}
			],
			listQuery: {
				page: 1,
				limit: 10,
				startTime: null,
				endTime: null,
				phone: null,
				activityId: 2,
				status: ''
			}
		}
	},
	methods: {
		//时间戳
		timeChange(val) {
			return formatDate(new Date(val), 'yyyy-MM-dd hh:mm:ss')
		},
		//列表
		getList() {
			this.loadingTab = true
			applyListActive(this.listQuery).then(data => {
				if (data.status == 200) {
					this.tableData = data.data.activityAttendanceRecordVos
					this.total = data.data.totalCount
					this.information = data.data.activityAttendanceRecordTotalVo
				} else {
					this.$message(data.message)
				}
			})
			setTimeout(() => {
				this.loadingTab = false
			}, 300)
		},
		//是否中奖筛选
		changeWin() {
			this.listQuery.page = 1
			this.getList()
		},
		//搜索
		search() {
			this.listQuery.page = 1
			this.getList()
		},
		//抽奖类型筛选
		changeClass() {
			this.listQuery.page = 1
			this.getList()
		},
		//清空搜索
		clearSearch() {
			this.time = null
			this.listQuery = {
				page: 1,
				limit: 10,
				startTime: null,
				endTime: null,
				phone: null,
				activityId: 2
			}
		},
		//导出
		downloadExcel() {
			this.excelLoading = true
			var u = navigator.userAgent,
				app = navigator.appVersion
			excelActive(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) {
			console.log(val);

			this.listQuery.page = 1
			if (!!val) {
				let value = val.split(' - ')
				this.listQuery.startTime = new Date((value[0]+" 00:00:00")).getTime()
				this.listQuery.endTime = new Date((value[1]+" 23:59:59")).getTime()
				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>
<style scoped>
.information {
	border: 1px solid #ccc;
	margin: 20px 0;
	padding: 10px 20px;
}
.information h4 {
	color: #333;
	font-size: 16px;
	font-weight: normal;
}
.information ul {
	padding: 0;
	border-top: 1px solid #eee;
	padding: 10px 30px;
	overflow: hidden;
}
.information li {
	list-style: none;
	text-align: center;
	float: left;
	width: 33.33%;
	border-right: 1px solid #eee;
}
.information li:last-child {
	border: none;
}
</style>
