<template>
	<div class="love-list">
		<div class="list-title flex">
			<div style="width: 154px">捐献时间</div>
			<div  style="width: 409px">捐献者</div>
			<div  style="width: 140px">捐献金额</div>
			<div  style="width: 356px">捐献意向</div>
			<div  style="width: 133px">备注</div>
		</div>
		<div class="list-item flex" v-for="(item, index) in tableData" :key="index">
			<div class="clamp"  style="width: 154px">{{item.time}}</div>
			<div class="clamp"  style="width: 409px">{{item.donate_er}}</div>
			<div class="clamp" style="width: 140px">{{item.money}}</div>
			<div class="clamp" style="width: 356px">{{item.intention}}</div>
			<div class="clamp" style="width: 133px">{{item.mask}}</div>
		</div>
		<div class="table-empty" v-if="tableData.length == 0">
			暂无更多捐赠数据
		</div>
		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页" @current-change="currentChange" :page-size="limit"></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) {
			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
			})
		}
	}
};
</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;
}
.list-title {
	// display: flex;
	text-align: center;
	border: 2px solid #F2F2F2;
	line-height: 36px;
	font-size: 18px;
	font-family: PingFang SC;
	font-weight: bold;
	color: #D82020;
	// border-top: none;
	div {
		border-right: 2px solid #F2F2F2;
		&:last-of-type {
			border-right: none;
		}
	}
	
}
.list-item {
	text-align: center;
	border: 2px solid #F2F2F2;
	font-size: 16px;
	line-height: 36px;
	font-family: PingFang SC;
	font-weight: bold;
	color: #101010;
	border-top: none;
	div {
		border-right: 2px solid #F2F2F2;
		&:last-of-type {
			border-right: none;
			
		}
	}
}
.table-empty {
	// width: 100%;
	text-align: center;
	border: 2px solid #F2F2F2;
	font-size: 16px;
	line-height: 36px;
	font-family: PingFang SC;
	font-weight: bold;
	border-top: none;
}
</style>
