<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.prizeType" 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.onLineNum}}</p>
					<p>线上抽奖触发(次)</p>
				</li>
				<li>
					<p>{{information.onLineWineNum}}</p>
					<p>线上中奖个数(个)</p>
				</li>
				<li>
					<p>{{information.localeNum}}</p>
					<p>现场抽奖触发(次)</p>
				</li>
				<li>
					<p>{{information.localeWineNum}}</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 label="发放类型" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.prizeType == 1 ? '线上' : '现场'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="prizeName" label="抽奖礼品" align="center"></el-table-column>
			<el-table-column prop="expiryDateCode" label="兑换码" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.expiryDateCode || '无'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="lotteryTime" 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 { applyListWin, excelWin } from 'api/applyManagements'
export default {
	created() {
		this.getList()
	},
	data() {
		return {
			information: {},
			excelLoading: false,
			loadingTab: false,
			tableData: [],
			time: '',
			total: null, //总页数
			options: [
				{
					id: '',
					name: '全部'
				},
				{
					id: 1,
					name: '线上'
				},
				{
					id: 2,
					name: '现场'
				}
			],
			listQuery: {
				page: 1,
				limit: 10,
				startTime: null,
				endTime: null,
				phone: null,
				activityId: 2,
				prizeType: null,
				hasWinning: 1
			}
		}
	},
	methods: {
		//列表
		getList() {
			this.loadingTab = true
			applyListWin(this.listQuery).then(data => {
				if (data.status == 200) {
					this.tableData = data.data.activityWinningRecords
					this.total = data.data.totalCount
					if (this.listQuery.page == 1) {
						this.information =
							data.data.activityWinningRecordTotalVo
					}
				} else {
					this.$message(data.message)
				}
			})
			setTimeout(() => {
				this.loadingTab = false
			}, 300)
		},
		//搜索
		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
			}
			this.getList()
		},
		//导出
		downloadExcel() {
			this.excelLoading = true
			var u = navigator.userAgent,
				app = navigator.appVersion
			excelWin(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>
<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: 25%;
	border-right: 1px solid #eee;
}
.information li:last-child {
	border: none;
}
</style>
