<template>
	<view class="swiper-container">
		<swiper class="swiper" :indicator-dots="swiperOptions.indicatorDots" :autoplay="swiperOptions.autoplay"
			:interval="swiperOptions.interval" :duration="swiperOptions.duration" :circular="swiperOptions.circular"
			>
			<swiper-item v-for="item in imgList" :key="item.bigImg">
				<view class="swiper-item">
					<image :src="$geturl(item.bigImg)"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- <view class="content" v-if="introduce">
			<view class="introduce">
				<u-icon name="volume-up" class="u-icon" size="35"></u-icon>
				<text>{{ introduce | textSlice }}</text>
			</view>
			<view class="digitalIndicator">{{ current + 1 }}/{{ list.length }}</view>
		</view> -->
	</view>
</template>
<script>
	export default {
		components: {},
		props: {
			imgList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				swiperOptions: {
					indicatorDots: false,
					autoplay: true,
					interval: 2000,
					duration: 500,
					circular: true
				},
				// current: 0,
				// introduce: '',
				// list: []
			};
		},
		// filters: {
		// 	textSlice(value) {
		// 		if (value && value.length > 13) {
		// 			return value.slice(0, 13) + '...';
		// 		}
		// 		return value;
		// 	}
		// },

		// onLoad() {
		// 	this.introduce = this.list[0].title;
		// },
		methods: {
			// handleChange(e) {
			// 	let {
			// 		current
			// 	} = e.detail;
			// 	this.current = current;
			// 	this.introduce = this.list[current].title;
			// }
		}
	};
</script>

<style lang="scss" scoped>
	.swiper-container {
		position: relative;

		.swiper {
			height: 493rpx;

			image {
				width: 100%;
				height: 493rpx;
			}
		}

		.content {
			position: absolute;
			bottom: 67rpx;
			width: 100%;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 25rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #ffffff;
			text-align: center;
		}

		// 轮播标题
		.introduce {
			width: 420rpx;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 23rpx;
			padding: 13rpx 20rpx 12rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.u-icon {
				margin-right: 7rpx;
			}
		}

		.digitalIndicator {
			width: 80rpx;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 23rpx;
			padding: 10rpx;
		}
	}
</style>
