<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { Carousel as KagolCarousel } from '@kagol/vue-carousel'
import '@kagol/vue-carousel/dist/style.css'
const props = defineProps({
	list: {
		type: Array,
		default: () => [],
	},
})
const emit = defineEmits(['clickItem'])
//const emit = defineEmits([
//])

const activePage = ref(0)
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
</script>
<template>
	<section class="events-swiper">
		<div class="content">
			<KagolCarousel
				:autoplay="false"
				:interval="1000"
				class="events-carousel"
			>
				<div class="carousel-item" v-for="(item,index) in list as any" :key="index">
					<div class="img-box">
						<img :src="item?.coverUrl" alt="">
					</div>
					<div class="text-box">
						<h4 class="title">
							{{ item?.title }}				
						</h4>
						<div class="info">
							{{ item?.brief }}		
						</div>
						<div class="read-more" @click="$emit('clickItem', item)">
							Read More
							<span class="iconfont icon-direction-right"></span>
						</div>
					</div>
				</div>
				
				<template #pagination="{ prevPage, nextPage }">
					<div class="prev-page" @click="prevPage">
						<span class="iconfont icon-direction-left"></span>
					</div>
					<div class="next-page" @click="nextPage">
						<span class="iconfont icon-direction-right"></span>
					</div>
				</template>
				<template #indicator></template>
			</KagolCarousel>
		</div>
	</section>
</template>
<style lang="less" scoped>
	.events-swiper{
		width: 100%;
		background-color: #f9f9f9;
		> .content{
			padding: 40px 0px 40px 0px;
			margin: 0 auto;
			max-width: 1120px;
			position: relative;
			@media (max-width: 1000px) {
				max-width: 767px;
				padding: 10px;
				padding-top: 30px;
			}
			> .events-carousel{
				.carousel-item{
					overflow: hidden;
					cursor: pointer;
					&:hover{
						img{
							transform: scale(1.1);
						}
					}
					.img-box{
						border-radius: 20px;
						height: 600px;
						width: 100%;
						overflow: hidden;
						@media (max-width: 1000px) {
							height: 500px;
						}
						img{
							width: 100%;							
							height: 100%;
							object-fit: cover;
							background-color: #FFF;
							transition: all .3s;
						}
					}
					> .text-box{
						margin-top: -40px;	
						padding: 25px;
						width: 560px;
						background-color: #fff;
						position: relative;
						z-index: 22;
						@media (max-width: 1000px) {
							width: calc(100% - 50px);
						}
						.title{
							font-family: Poppins, sans-serif;
							font-weight: 600;
							letter-spacing: 2px;
							color: #222222;
							text-transform: capitalize;
							font-size: 20px;
							margin-bottom: 9px;
						}
						.info{
							color: #555;
							font-size: 16px;
							margin-bottom: 15px;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-word; 
						}
						.read-more{
							color: #9A2125;
							box-shadow: none;
							font-size: 14px;
							text-decoration: none;
							position: relative;
							width: min-content;
							white-space: nowrap;
							&:hover{
								&::after{
									left: 0;
									width: 100%;
								}
							}
							&::after{
								content: '';
								position: absolute;
								bottom: 0;
								right: 0;
								left: auto;
								width: 0%;
								height: 2px;
								background-color: #9A2125;
								transition: all .3s;
							}
							> span{
								margin-left: 10px;
							}
						}
					}
				}
			}
			.prev-page, .next-page{
				width: 96px;
				height: 96px;
				margin: 0 10px;
				border: 1px solid #e1e1e1;
				background-color: #fff;
				border-radius: 50%;
				transition: all .3s;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 0;
				z-index: 2222;
				@media (max-width: 1000px) {
					width: 40px;
					height: 40px;
				}
				> span{
					font-size: 38px;
					@media (max-width: 1000px) {
						font-size: 24px;
					}
				}
				&:hover{
					border: 1px solid #000;
				}
			}
			.prev-page{
				right: 112px;
				@media (max-width: 1000px) {
					right: 50px;
				}
			}
			.next-page{
				right: 0;
			}
		}
	}
</style>