<template>
	<div class="love-list">
		<div class="search">
			<input type="text" v-model="name" placeholder="请输入捐赠者" class="" @keyup.enter="search()"/>
			<img src="../assets/img/search.png" class="hand" @click="search()">
		</div>
		<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="limit" hide-on-single-page></el-pagination>
	</div>
</template>

<script>
	import { loveList, searchLoveList } from '../request/api.js'
	import {
		Message
	} from 'element-ui'
export default {
	data() {
		return {
			tableData: [],
			total: 100,
			page:1,
			limit: 14,
			name: ''
		};
	},
	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)
			})
		},
		search() {
			console.log(this.name)
			let obj = this
			let data = {
				page: obj.page,
				limit: obj.limit,
				key: obj.name
			}
			searchLoveList(data).then( res => {
				console.log(res,'dddddddddddd')
				if(res.data.list.length !== 0){
					Message.success('数据加载完成！')
				}else {
					Message('未找到该用户数据。')
				}
				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
				})
				
			})
		}
	}
};
</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;
}
.search {
	margin-left: 879px;
	padding-left: 13px;
	padding-right: 13px;
	width: 295px;
	height: 33px;
	line-height: 33px;
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 10px;
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	input {
		width: 235px;
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		outline: none;
		border: none;
	}
	img {
		width: 20px;
		height: 20px;
	}
}
</style>
