<template>
	<view>
		<view class="imgswiper2" v-if="imgswipertwoDataArr.length &&imgswipertwoDataArr.length > 0">
			<view class="hdtt-t">
				<view class="hdtt-t-l">
					<view class="h1">{{ imgswipertwoData.params.title }}</view>
					<view class="p">{{ imgswipertwoData.params.text }}</view>
				</view>
				<view class="hdtt-t-r">
					<view class="span">
						<view class="em">{{ swiperI }}</view>/{{ imgswipertwoDataArr.length }}
					</view>
				</view>
			</view>
			<view class="goodslist-d">
				<swiper  :style="{height:imgswipertwoData.params.img_height  +'px'}"
				 :indicator-dots="false" :autoplay="true" :interval="4000" :duration="500" next-margin="30rpx" @change="swiperCg">
					<block>
						<swiper-item v-for="(item2, key2) in imgswipertwoDataArr" :key="key2" :style="{height:imgswipertwoData.params.img_height+'px',width:imgswipertwoData.params.img_width - 30 +'px'}">
							<view class="goodstop-i" @click="navigateTo(item2.linkurl)">
								<!-- <navigator class="a" :url="item2.linkurl" :open-type="item2.url_type" hover-class="none"> -->
								<view class="goodstop-i-t">
									<image class="image"  :style="{height:imgswipertwoData.params.img_height - 30 +'px',width:imgswipertwoData.params.img_width - 30 +'px'}" :src="item2.imgurl"></image>
								</view>
								<view class="goodstop-i-c">
									<view class="h1" v-if="!!item2.title" :style="'color: '+imgswipertwoData.style.titlecolor">{{ item2.title }}</view>
									<view class="h2" v-if="!!item2.text" :style="'color: '+imgswipertwoData.style.textcolor">{{ item2.text }}</view>
								</view>
								<!-- </navigator> -->
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '../../common/js/app.js'
	export default {
		props: ['imgswipertwoData'],
		data() {
			return {
				swiperI: 1,
				imgswipertwoDataArr: []
			}
		},
		mounted() {
			for (var i in this.imgswipertwoData.data) {
				this.imgswipertwoDataArr.push(this.imgswipertwoData.data[i])
			}
			console.log()
		},
		methods: {
			swiperCg(e) {
				this.swiperI = e.detail.current + 1
			},
			navigateTo(url) {
				let isHttpUrl = url.indexOf('https') !== -1;
				if (isHttpUrl) {
					location.href = url;
				} else {
					App.navigationTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style scoped>
	/*  banner2  图片轮播2  */
	.imgswiper2 {
		background-color: #fff;
	}

	.imgswiper2 .hdtt-t {
		padding: 0 30upx;
		border-top: 0 solid #f6f6f6;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.imgswiper2 .hdtt-t .h1 {
		font-weight: normal;
		font-size: 36upx;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.imgswiper2 .hdtt-t .p {
		color: #999;
		font-size: 24upx;
		margin: 0;
		margin-top: 10upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.imgswiper2 .hdtt-t-r {
		display: -webkit-flex;
		display: flex;
		align-items: center;
	}

	.imgswiper2 .hdtt-t-r .span {
		font-size: 36upx;
		display: inline-block;
	}

	.imgswiper2 .hdtt-t-r .span .em {
		font-size: 42upx;
		font-style: normal;
		display: inline;
	}

	.imgswiper2 .goodslist {
		padding: 30upx 0;
	}

	.imgswiper2 .goodstop-i {
		padding: 0;
		padding-left: 30upx;
		padding-bottom: 30upx;
	}

	.imgswiper2 .goodstop-i-t {
		width: 100%;
		height: auto;
		margin-top: 0;
	}

	.imgswiper2 .goodstop-i-t .image {
		width: 100%;
		display: block;
	}

	.imgswiper2 .goodslist-d {
		margin-top: 30upx;
	}

	.imgswiper2 .goodstop-i .h1 {
		height: 42upx;
		line-height: 42upx;
		font-size: 32upx;
		font-weight: normal;
		margin-top: 20upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.imgswiper2 .goodstop-i .h2 {
		height: 42upx;
		line-height: 42upx;
		font-size: 24upx;
		color: #888;
		font-weight: normal;
		margin-top: 20upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>
