<script setup>
	// 引入依赖
	import {watch,ref,reactive} from "vue"
	// props
	const props = defineProps(['lbt_list',"height","isRadius","indicatorDots"])
	// 变量
	const interval = ref(2000)
	const autoplay = ref(true)
	// const indicatorDots = ref(false)
	// 监听
	watch(()=> {
		return props.lbt_list
	},(val1,val2) => {
		// console.log(val1)
		
	})
	// 方法
	function intervalChange(e) {
		interval.value = e.target.value
	}
	function lbtFunc(item) {
		// 新版数据结构的跳转形式
		uni.navigateTo({
			url:item.url
		});
		return
		
		// 旧版数据结构的跳转形式
		// if(item.skip_url_type == 2) { // 内链
		// 	uni.navigateTo({
		// 		url:item.skip_url
		// 	});
		// }
		// else{ // 外链
		// 	uni.navigateTo({
		// 		url:`/pages/webview/webview?links=${item.skip_url}&name=${item.name}`
		// 	});
		// }
		
	}
</script>
<template>
	<view class="swiper-box">
		<view class="uni-margin-wrap">
			<swiper class="swiper" :class="{radiuscss:isRadius}" :style="'height: '+height*2+'rpx;'" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item @click="lbtFunc(item)" v-for="(item,i) in lbt_list">
					<view class="swiper-item uni-bg-red">
						<!-- <img style="width: 100%;" :src="item.url" alt=""> -->
						<image :src="item.image" style="width: 100%;" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<style>
	.radiuscss{
		border-radius:30rpx;
		overflow: hidden;
	}
	.swiper-box{
		
	}
	.swiper-item>img{
		width: 100%;
	}
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>