<template>
	<view class="padding-box-all">
		<view class="enter-box">
			<view class="swiper-item dis-flex flex-y-center">
				<view class="swiper-item-left dis-flex p-r flex-y-center">
					<image class="swiperImage" :src="imgfixUrls + 'diypage/ruzhu.png'" v-if="imgfixUrls"></image>
					<!-- <view class="swiper-title f-24 t-c">{{swiperParams.title}}</view> -->
					<view class="swiper-box" v-if="swiperContainer.length > 0">
						<swiper :autoplay="true" :interval="3000" :duration="1000" :vertical="true" :circular="true" class="swiper-view">
							<swiper-item v-for="(item,index) in swiperContainer" :key="index">
								<view class="onelist-hidden f-28 swiperContainer">{{item.storename || item.commundesc}}</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="swiper-box" v-else>
						<swiper :autoplay="true" :interval="3000" :duration="1000" :vertical="true" :circular="true" class="swiper-view">
							<swiper-item>
								<view class="onelist-hidden f-28 swiperContainer">暂无入驻商户</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="fgx"></view>
				</view>
				<view class="swiper-item-right t-c f-28 col-f" @click="navgateto('pages/mainPages/Settled/Settled')">{{swiperParams.button || '我要入驻'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js'
	export default {
		data() {
			return {
				imgUrl:''
			}
		},
		mounted() {
			this.imgUrl = this.imgfixUrl
		},
		components: {

		},
		props: {
			swiperContainer: {
				type: Array,
				default: function() {
					return []
				}
			},
			swiperParams: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		methods: {
			navgateto(url) {
				App.navigationTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.enter-box {
		.swiper-item {
			border-radius: 60upx;
			height: 84upx;

			.swiper-item-left {
				background-color: #FFFFFF;
				border-radius: 40upx 0 0 40upx;
				height: 84upx;
				border: 5upx solid #F1F1F1;
				border-right: none;
				.swiperImage {
					width: 50upx;
					height: 36upx;
					margin: 0 20upx 0 30upx;
				}
				.fgx{
					width: 2upx;
					height: 30upx;
					position: absolute;
					left: 18%;
					top: 50%;
					transform: translateY(-50%);
					background-color: #DDDDDD;
				}
				.swiper-title {
					padding: 4upx 24upx;
					width: 50upx;
					color: red;
				}

				.swiper-title::after {
					content: " ";
					width: 2upx;
					height: 60upx;
					font-size: 0;
					background-color: #bdbdbd;
					position: absolute;
					left: 22%;
					top: 50%;
					transform: translateY(-50%);
				}

				.swiper-box {
					.swiper-view {
						padding: 0 10upx 0 30upx;
						width: 400upx;
						height: 84upx;
						line-height: 84upx;

						.swiperContainer {
							width: 350upx;
						}
					}
				}
			}

			.swiper-item-right {
				flex: 1;
				height: 100%;
				line-height: 84upx;
				background-image: linear-gradient(to right, rgba(252,104,104,1) 0% , rgba(255,68,68,1) 100%);
				border-radius: 0 40px 40px 0;
				border: 5upx solid #f9f9f9;
				border-left: none;
			}
		}
	}
</style>
