<template>
	<view class="pageable-container">
		<view class="pageable-btn" :style="{ 'background': themeStore.theme.pageable.btnColor }" @click.stop="handleLast()">
			<view>
				<
			</view>
		</view>
		<view class="pageable-text" :style="{ 'color': themeStore.theme.pageable.color }">
			<span class="pageable-text-current" :style="{ 'color': themeStore.theme.pageable.currentTextColor }">{{ current }}</span> / {{ total }}
		</view>
		<view class="pageable-btn" :style="{ 'background': themeStore.theme.pageable.btnColor }" @click.stop="handleNext()">
			<view>
				>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import { useThemeStore } from '@/store/useThemeStore'

	const themeStore = useThemeStore()
	const props = defineProps({
		total: {
			type: Number,
			default: 1
		},
		current: {
			type: Number,
			default: 1
		}
	})
		
	const emit = defineEmits(['change'])
	
	const handleLast = () => {
		console.log(props.current, props.total)
		if (props.current <= 1 ) { return }
		emit('change', props.current - 1)
	}
	
	const handleNext = () => {
		console.log(props.current, props.total)
		if (props.current > props.total -1) { return }
		emit('change', props.current + 1)
	}
</script>

<style lang="scss" scoped>
	.pageable-container {
		display: flex;
		align-items: center;
		
		.pageable-btn {
			background-color: #7E1920;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;;
			font-size: 28rpx;
		}
		
		.pageable-text {
			font-size: 26rpx;
			color: #fff;
			padding: 0rpx 20rpx;
			
			.pageable-text-current {
				color: #F96969;
			}
		}
	}
</style>