<template>
	<div class="contribution">
			<div class="boxtitle">
				当前位置：首页 > 爱心榜
			</div>
		<div class="jmbox">
			<div class="center">
				<div class="title">
					<div class="time"> 捐赠时间 </div>
					<div class="name"> 捐赠者 </div>
					<div class="price"> 捐赠金额 </div>
					<div class="intention"> 捐赠意向 </div>
					<div class="remarks"> 备注 </div>
				</div>
				<div class="list" v-for="l in list">
					<div class="item">
						<div class="time"> {{ getTime(l.createtime) }} </div>
						<div class="name"> {{ l.contact }} </div>
						<div class="price"> {{ l.amount }} </div>
						<div class="intention"> {{ l.order_name }} </div>
						<div class="remarks"> {{ l.remarks }} </div>
					</div>
				</div>
			</div>
			<div class="pagec">
				<div class="fristPage" @click="page = 1">
					第一页
				</div>
				<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
				:class="{isChoose:count == page}">
					{{ count }}
				</div>
				<div class="nextPage" @click='nextPage'>
					下一页
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getTime } from '../utils/utils.js'
import { getlaveList } from '@/request/api.js'

import jmBox from '@/components/box.vue'
	export default {
		components: {
			jmBox,
		},
		data() {
			return {
				navList: {
					title: '爱心榜',
				},
				page: 1,
				limit: 10,
				sum: 0,
				list: [],
			}
		},
		computed: {
			// 总页数
			totalPage() {
				return Math.ceil(this.sum/this.limit)
			}
		},
		mounted() {
			this.getlave()
		},
		methods: {
			pageChoose(count) {
				this.page = count
			},
			getTime(time) {
				return getTime(time)
			},
			// 下一页
			nextPage() {
				this.page++ 
				if (this.page > this.totalPage) {
					this.page = this.totalPage
				}
			},
			// 爱心榜
			getlave() {
				getlaveList({},this.page,this.limit).then(res => {
					this.list = res.data.data
					this.sum = res.data.count
				})
			},
		},
		watch: {
			page() {
				this.getlave()
			}
		}
	}
</script>

<style lang="scss" scoped>
$red: #D82020;
.jmbox {
	height: 600px;
	padding: 30px 0;
}
.contribution {
	box-shadow: 1px 1px 6px #e1e1e1;
	border-top: solid 2px $red;
	background-color: #fff;
	.boxtitle {
		padding: 10px;
		background-color: #F2F2F2;
	}
	.center {
		text-align: center;
		.time,.price,.remarks,.name,.intention {
			border: solid 1px #F2F2F2;
			padding: 5px;
		}
		.time,.price,.remarks {
			flex: 1;
		}
		.name,.intention {
			flex: 2;
		}
		.title {
			color: $red;
			display: flex;
			justify-content: space-around;
		}
		.list {
			.item {
				display: flex;
				justify-content: space-around;
			}
		}
	}
	.pagec {
		display: flex;
		float: right;
		margin: 20px 30px;
		.fristPage,.pageNum,.nextPage {
			margin-left: 3px;
			border: solid 1px #F2F2F2;
			line-height: 30px;
			text-align: center;
		}
		.fristPage,.nextPage {
			padding: 0 10px;
		}
		.pageNum {
			width: 30px;
			height: 30px;
		}
		.isChoose {
			background-color: $red;
			color: #fff;
		}
	}
}
</style>

