<template>
	<div class="searchList">
			<div class="boxtitle">
				当前位置：首页 > 搜索
			</div>
		<div class="jmbox">
			<div class="list chooseitem">
				<div class="item" v-for="l in list" @click="navto(l.id)">
					<span class="title-icon"></span>
					<div class="title nowarp" :title="l.title">
						{{ l.title }}
					</div>
					<div class="time">
						{{ getTime(l.releasetime) }}
					</div>
				</div>
			</div>
			<div class="nodata" v-show="sum == 0">
				---暂无更多数据---
			</div>
			<div class="pagec" v-show="totalPage>1">
				<div class="fristPage" @click="page = 1">
					第一页
				</div>
				<div class="pagetoomuch" v-show="totalPage>10">
					<div class="nextPage" v-show="page-4>0">
						...
					</div>
					<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
					:class="{isChoose:count == page}" v-if="count>page-5&&count<page+4 &&count!=totalPage">
						{{ count }}
					</div>
					<div class="nextPage" v-show="page+4<totalPage">
						...
					</div>
					<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
					:class="{isChoose:count == page}" v-show="totalPage>2" v-if="count==totalPage">
						{{ count }}
					</div>
				</div>
				
				<div class="pageNum" v-for="count in totalPage" @click="pageChoose(count)"
				:class="{isChoose:count == page}" v-show="totalPage<=10">
					{{ count }}
				</div>
				<div class="nextPage" @click='nextPage'>
					下一页
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getvSearch } from '@/request/api.js'

import jmBox from '@/components/box.vue'
	export default {
		components: {
			jmBox,
		},
		data() {
			return {
				page: 1,
				limit: 15,
				sum: 1,
				list: [],
				value: this.$route.params.value || this.$route.query.value || 0,
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			pageChoose(page) {
				this.page = page
			},
			// 下一页
			nextPage() {
				this.page++ 
				if (this.page > this.totalPage) {
					this.page = this.totalPage
				}
			},
			getData() {
				const value = this.$route.query.value
				const data = {
					page: this.page,
					limit: this.limit
				}
				getvSearch(data,value).then(res => {
					this.sum = res.data.count
					this.list = res.data.list
				})
			},
			navto(id) {
				this.$router.push({
					name: 'volunteer',
					query: {id: id}
				})
			},
			getTime(time) {
				return time.substring(0,10)
			}
		},
		computed: {
			// 总页数
			totalPage() {
				return Math.ceil(this.sum/this.limit)
			},
		},
		watch: {
			'$route'() {
				this.getData()
			},
			page() {
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
$red: #D82020;
.nodata {
	color: #999999;
	text-align: center;
}
.jmbox {
	box-shadow: 1px 1px 6px #e1e1e1;
	min-height: 600px;
	padding: 30px 20px;
	.list {
		.item {
			padding: 0 20px;
			display: flex;
			justify-content: space-between;
			line-height: 35px;
			height: 35px;
			border-bottom: solid 1px #e8ecf5;
			.title {
				width: calc(100% - 110px);
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
.searchList {
	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;
			}
		}
	}
}
.pagetoomuch {
	display: flex;
}
.pagec {
	color: #333333;
	display: flex;
	float: right;
	margin: 20px 30px;
	.fristPage,.pageNum,.nextPage {
		margin-left: 3px;
		border: solid 1px #F2F2F2;
		line-height: 30px;
		text-align: center;
		color: #333;
	}
	.fristPage,.nextPage {
		padding: 0 10px;
	}
	.pageNum {
		width: 30px;
		height: 30px;
	}
	.isChoose {
		background-color: $red;
		color: #fff;
	}
}
	.chooseitem  {
		color: #666;	
			.title-icon {
				display: inline-block;
				width: 0;
				height: 0;
				margin: auto 0;
				border-top: 6px solid transparent;
				border-left: 8px solid #d2d2d2;
				border-bottom: 6px solid transparent;
			}
	}
	.chooseitem :hover {
		color: #d8272a;	
		.title-icon {
			border-left-color: #d8272a;
		}
	}
</style>

