<template>
	<div class="efly-page"
		 :class="{
	    	'efly-page-small': size === 'small',
	    	'efly-page-mini': size === 'mini',
		}"
	>
		<div class="efly-page-one" v-if="type === 'one'">
			<div class="efly-page-total">共 {{total}} 条</div>
			<div class="efly-page-size unselect">每页
				<efly-select :size="size" :data="list" :value="count" placement="top"
							 @change="getCount($event)"></efly-select>
				条
			</div>
			<div class="efly-page-operate">
				<efly-tooltip :content="'首页'" top="-37px" left="-6px" placement="top" type="white">
					<efly-button :size="size" class="efly-button-icon btn-solid-primary" :disabled="current === 1"
								 @click="goPage('first')"><i class="icon icon-first"></i></efly-button>
				</efly-tooltip>
				<efly-tooltip :content="'上一页'" top="-37px" left="-12px" placement="top" type="white">
					<efly-button :size="size" class="efly-button-icon btn-outline-primary" :disabled="current === 1"
								 @click="goPage('prev')"><i class="icon icon-prev"></i>
					</efly-button>
				</efly-tooltip>
				<efly-tooltip top="-59px" left="-63px" placement="top" type="white" trigger="hover">
					<div class="efly-page-skip" slot="content">
						到
						<efly-input :size="size" type="number" class="mar-lr-xs" width="50px" :value="input"
									align="center"
									@change="getSkipPage($event)"></efly-input>
						页
						<efly-button :size="size" class="btn-primary" @click="skipPage()">确定</efly-button>
					</div>
					<div class="efly-page-current">{{current}} / {{max}}</div>
				</efly-tooltip>
				<efly-tooltip :content="'下一页'" top="-37px" left="-12px" placement="top" trigger="hover" type="white">
					<efly-button :size="size" class="efly-button-icon btn-outline-primary" :disabled="current === max"
								 @click="goPage('next')"><i class="icon icon-next"></i>
					</efly-button>
				</efly-tooltip>
				<efly-tooltip :content="'末页'" top="-37px" left="-6px" placement="top" trigger="hover" type="white">
					<efly-button :size="size" class="efly-button-icon btn-solid-primary" :disabled="current === max"
								 @click="goPage('last')"><i class="icon icon-last"></i>
					</efly-button>
				</efly-tooltip>
			</div>
		</div>
		<div class="efly-page-two" v-if="type === 'two'">
			<efly-button :size="size" :disabled="current === 1" @click="goPage('prev')">上一页</efly-button>
			<efly-button :size="size" class="efly-button-icon" :class="{
			    'active': current === 1,
			}" @click="goPage('first')">1
			</efly-button>
			<efly-button :size="size" class="efly-button-icon btn-outline-white" v-if="pageList[0] > 2"><i
					class="icon icon-more"></i></efly-button>
			<efly-button :size="size" class="efly-button-icon" :class="{
			    'active': current === item,
			}" @click="goPage(item)"
						 v-if="item < max"
						 v-for="(item,index) in pageList">{{item}}
			</efly-button>
			<efly-button :size="size" class="efly-button-icon btn-outline-white" v-if="pageList[2] < max-1"><i
					class="icon icon-more"></i></efly-button>
			<efly-button :size="size" class="efly-button-icon" :class="{
			    'active': current === max,
			}"
						 v-if="max !== 1"
						 @click="goPage('last')">{{max}}
			</efly-button>
			<efly-button :size="size" :disabled="current === max" @click="goPage('next')">下一页</efly-button>
		</div>
		<div class="efly-page-three" v-if="type === 'three'">
			<efly-button-group>
				<efly-button :size="size" class="efly-button-icon" :disabled="current === 1" @click="goPage('first')"><i
						class="icon icon-first"></i></efly-button>
				<efly-button :size="size" class="efly-button-icon" :class="{
			    'active': current === 1,
			}" @click="goPage('first')">1
				</efly-button>
				<efly-button :size="size" class="efly-button-icon" v-if="pageList[0] > 2"><i class="icon icon-more"></i>
				</efly-button>
				<efly-button :size="size" class="efly-button-icon" :class="{
			    'active': current === item,
			}" @click="goPage(item)"
							 v-if="item < max"
							 v-for="(item,index) in pageList">{{item}}
				</efly-button>
				<efly-button :size="size" class="efly-button-icon" v-if="pageList[2] < max-1"><i
						class="icon icon-more"></i></efly-button>
				<efly-button :size="size" class="efly-button-icon" :class="{
			    'active': current === max,
			}"
							 v-if="max !== 1"
							 @click="goPage('last')">{{max}}
				</efly-button>
				<efly-button :size="size" class="efly-button-icon" :disabled="current === max" @click="goPage('last')">
					<i class="icon icon-last"></i></efly-button>
			</efly-button-group>
		</div>
		<div class="efly-page-four" v-if="type === 'four'">
			<div class="efly-page-one-total">共 {{total}} 条</div>
			<efly-button-group>
				<efly-button :size="size" class="efly-button-icon btn-outline-white" :disabled="current === 1"
							 @click="goPage('prev')"><i class="icon icon-prev"></i></efly-button>
				<efly-button :size="size" class="efly-button-icon btn-outline-white" :class="{
			    'active': current === 1,
			}" @click="goPage('first')">1
				</efly-button>
				<efly-button :size="size" class="efly-button-icon btn-outline-white" v-if="pageList[0] > 2"><i
						class="icon icon-more"></i></efly-button>
				<efly-button :size="size" class="efly-button-icon btn-outline-white" :class="{
			    'active': current === item,
			}" @click="goPage(item)"
							 v-if="item < max"
							 v-for="(item,index) in pageList">{{item}}
				</efly-button>
				<efly-button :size="size" class="efly-button-icon btn-outline-white" v-if="pageList[2] < max-1"><i
						class="icon icon-more"></i></efly-button>
				<efly-button :size="size" class="efly-button-icon btn-outline-white" :class="{
			    'active': current === max,
			}"
							 v-if="max !== 1"
							 @click="goPage('last')">{{max}}
				</efly-button>
				<efly-button :size="size" class="efly-button-icon btn-outline-white" :disabled="current === max"
							 @click="goPage('next')"><i class="icon icon-next"></i></efly-button>
			</efly-button-group>
			<div class="efly-page-size">
				<efly-select :size="size" :data="list" :value="count" placement="top"
							 @select="getCount($event)"></efly-select>
			</div>
		</div>
	</div>
</template>

<script>
    import EflyPage from './page';

    export default EflyPage;
</script>

<style lang="scss" scoped>
</style>
