<template>
	<view class="container-swiper">
		<swiper @change="changeCurrent" circular :current="current_swiper" :autoplay="false">
			<swiper-item v-for="item in banner_list" @click="toCourse(item)">
				<image :src="item.image?item.image.url:base.imgHost('index_swiper.png')" />
				<!-- <view class="course_name">{{item.name}}</view> -->
			</swiper-item>
		</swiper>

		<view class="container-swiper_current">
			<image :src="base.imgHost('index_swiper_left.png')" alt="" />
			<text class="bigFont">{{show_current_swiper}}</text>
			<text>/{{banner_list.length}}</text>
			<image :src="base.imgHost('index_swiper_right.png')" alt="" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "topBanner",
		props:{
			banner_list:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				current_swiper: 0,
				show_current_swiper: 1,
			};
		},
		onLoad() {
		},
		methods:{
			changeCurrent(e) {
				this.show_current_swiper = e.detail.current + 1
			},
			toCourse(item){
				// uni.switchTab({
				// 	url:item.jump_url
				// })
				// 
				if(this.base.isNull(item.jump_type)){
					
					return
				}
				if(item.jump_type===1){
					uni.navigateTo({
						url:item.jump_url
					})
				}
				if(item.jump_type===2){
					uni.navigateTo({
						url: '/packages/webview/index?type=3&url=' + item.jump_url
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.container-swiper {
		width: 680rpx;
		margin: 0 auto;
		font-size: 0;
		margin-top: 30rpx;
		position: relative;
		z-index: 99;

		swiper {
			width: 100%;
			height: 380rpx;

			swiper-item {
				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.course_name {
			font-size: 32rpx;
			color: #ba9676;
			position: absolute;
			top: 20rpx;
			left: 20rpx;
		}

		&_current {
			font-size: 28rpx;
			text-align: center;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 28rpx;

			image {
				width: 28rpx;
				height: 11rpx;
				margin: 0 20rpx;
			}

			text {
				margin-top: 10rpx;
			}

			.bigFont {
				color: #b08c6c;
				font-size: 40rpx;
				margin-top: 0rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>