<template>
	<div class="comp">
		<div class="pagination gird-g">
			<div>{{$t('pagination.total')}}<span class="t1">{{totalItem}}</span>{{$t('pagination.unit')}}</div>
			<div class="pagination-item">
				<span class="pointer" :class="{'pagination-disabled' : cur == 1}">
					<a @click="prevPage()">{{$t('pagination.firstPage')}}</a>
				</span>
				<span @click="selPage(index)" class="page-num pointer" v-for="(index,idx) in indexs" :key="idx" v-bind:class="{ 'active': cur == index}">
					<a>{{index}}</a>
				</span>
				<span class="pointer" :class="{'pagination-disabled' : cur == total}">
					<a @click="nextPage()">{{$t('pagination.nextPage')}}</a>
				</span>
			</div>

			<div class="pagination-item">
				<span>{{$t('pagination.per')}}</span>
				<input v-model="sel" class="ipt" :placeholder="cur" type="text">
				<span>/ {{total}}{{$t('pagination.page')}}</span>
				<span @click="jumpPage" class="jump pointer">{{$t('pagination.goto')}}</span>
			</div>

		</div>
	</div>
</template>

<script src="./pagination.js"></script>
<style lang="scss" scoped>
@import "./pagination.scss";
</style>