<template>
	<div class="love-list">
		<div class="search">
			<input type="text" v-model="keyword" placeholder="请输入捐献者进行搜索" class="" @keyup.enter="getLiveList(keyword)" />
			<img src="../assets/img/search.png" class="hand" @click="getLiveList(keyword)">
		</div>
		<div class="list-title flex">
			<div style="width: 350px">捐献时间</div>
			<div style="width: 500px">捐献者</div>
			<div style="width: 350px">捐献金额</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: 350px">{{item.paytime | getTime}}</div>
			<div class="clamp" style="width: 500px">{{item.name || item.contact}}</div>
			<div class="clamp" style="width: 350px">{{item.amount + '元'}}</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,
		getList
	} from '../request/api.js'
	export default {
		data() {
			return {
				tableData: [],
				total: 0,
				page: 1,
				limit: 14,
				keyword: ''
			};
		},
		filters: {
			getTime(val) {
				let date = new Date(val * 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();
				return Y + '.' + M + '.' + D;
			},
		},
		created() {
			this.getLiveList()
		},
		methods: {
			compare(attribute) {
				return function(obj1, obj2) {

					// var val1 = obj1[attribute].replace(/./g,'');
					let val1 = obj1[attribute]
					// console.log(obj1[attribute])
					// console.log(val1)
					// console.log(valarr)
					var val2 = obj2[attribute]
					if (val1 < val2) {
						return 1;
					} else if (val1 > val2) {
						return -1;
					} else {
						return 0;
					}
				}
			},
			//分页页码改变触发事件
			currentChange(e) {
				this.page = e
				this.getLiveList()
			},
			getLiveList(keyword) {
				let obj = this
				if(keyword) {
					obj.page = 1
				}
				let data = {
					page: obj.page,
					limit: obj.limit,
					key: obj.keyword
				}
				loveList(data).then(({
					data
				}) => {
					// console.log(data)
					this.total = data.count
					this.tableData = data.data.sort(obj.compare('paytime'))
					console.log(this.tableData,'this.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;
	}

	.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;
	}

	.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>
