<template>
	<view class="container">
		<swiper class="swiper" circular 
		:indicator-dots="activityList.length > 1" 
		indicator-color="#FFFFFF"
		indicator-active-color="#00A6FF"
		:autoplay="autoplay" 
		:interval="interval"	
		:duration="duration">
			<swiper-item v-for="item in activityList" :key="item.id">
				<view class="swiper-item" @click="handleClick(item)">
					<image :src="item.activityCover" mode="aspectFill"></image>
					<view class="corner-btn">快速预定</view>
				</view>
			</swiper-item>		
		</swiper>
		
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { SEND_COMMAND_TEXT } from '@/constant/constant'

	const autoplay = ref(true)
	const interval = ref(3000)
	const duration = ref(500)

	const props = defineProps({
	  activityList: {
	    type: Array,
	    default: []
	  }
	})

	const handleClick = (item) => {
		uni.$emit(SEND_COMMAND_TEXT, '快速预定')
	}

</script>

<style scoped lang="scss">
	.container {
		margin-bottom: 6px;
		
		.uni-margin-wrap {
			width: 100%;
		}
		.swiper {
			height: 120px;
			border-radius: 8px;
		}
		.swiper-item {
		  position: relative; 
		  display: block;
		  height: 120px;
		  line-height: 120px;
		  text-align: center;
		
		  image {
		    width: 100%;
		    height: 100%;
		    border-radius: 8px;
		    display: block;
		  }
		
		  .corner-btn {
		    position: absolute;
		    right: 12px;
		    bottom: 12px;
		    background-color: #ffeb00;
		    color: #333;
		    font-size: 14px;
		    font-weight: 500;
		    padding: 4px 12px;
		    border-radius: 20px; 
		    line-height: 1.5;
		  }
		}
		
	}
</style>