<template>
	<div class="love-list">
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="time" label="捐献时间" width="154" align="center"></el-table-column>
			<el-table-column prop="donate_er" label="捐献者" width="409" align="center"></el-table-column>
			<el-table-column prop="money" label="捐献金额" width="140" align="center"></el-table-column>
			<el-table-column prop="intention" label="捐献意向" width="356" align="center"></el-table-column>
			<el-table-column prop="mark" label="备注" align="center"></el-table-column>
		</el-table>
		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页" @current-change="currentChange" :page-size="14"></el-pagination>
	</div>
</template>

<script>
	import { loveList } from '../request/api.js'
export default {
	data() {
		return {
			tableData: [],
			total: 100,
			page:1,
			limit: 14
		};
	},
	created() {
		this.getLiveList()
	},
	methods: {
		//分页页码改变触发事件
		currentChange(e) {
			console.log(e);
			this.page = e
			this.getLiveList()
		},
		getLiveList() {
			let obj = this
			let data = {
				page: obj.page,
				limit: obj.limit
			}
			loveList(data).then( res => {
				obj.tableData = res.data.list.map(item => {
					if(item.intention === ''){
						item.intention = '非定向捐款'
					}
					let date = new Date(item.add_time*1000)
					let Y = date.getFullYear()
					let M = date.getMonth()+1 < 10 ? '0' + (date.getMonth()+1) : date.getMonth() + 1;
					let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
					item.time = Y + '/' + M + '/' + D
					return item
				})
				obj.total = res.data.count
				console.log(obj.tableData)
			})
		}
	}
};
</script>

<style lang="scss" scoped="">
.love-list {
	height: 870px;
	position: relative;
}
/deep/ .el-table thead th {
	font-size: 18px;
	font-family: PingFang SC;
	font-weight: bold;
	color: #d82020;
}
/deep/ .el-table tr td {
	font-size: 16px;
	font-family: PingFang SC;
	font-weight: bold;
	color: #101010;
	padding: 11px 0;
	line-height: 1;
}
/deep/ .el-pagination {
	position: absolute;
	display: inline-block;
	bottom: 75px;
	right: 0;
	padding-right: 0;
}
</style>
