<template>
	<view :style="{'background-color':publicgoodstwoData.style.bgColor}">
		<view :style="{'padding':publicgoodstwoData.style.margin+'px'}">
			<view class="public-goods padding-box" style="margin-bottom: 20upx;">
				<view class="public-goodsHeader dis-flex flex-y-center flex-x-between">
					<view>
						<view class="public-goodsHeader-title f-36 col-3 m-btm10">{{publicgoodstwoData.params.title}}</view>
						<view class="public-goodsHeader-subtitle f-24 col-9">{{publicgoodstwoData.params.sub_title}}</view>
					</view>
					<view class="f-36 col-3"><text class="f-42">{{ swiperI }}</text>/{{publicgoodstwoDataArr.length}}</view>
				</view>
				<view class="public-goodsContent">
					<swiper :indicator-dots="false" :autoplay="true" :interval="4000" :duration="500" :style="{width: '100%',height: (imgstyle.height) + 140 + 'px'}" class="swiperMain" @change="swiperCg">
						<swiper-item v-for="(item2, key2) in publicgoodstwoDataArr" :key="key2">
							<view class="swiper-goodsItem" @click="navigateTo(item2.url)">
								<view class="swiper-goodsImage m-top-btm20" :style="{'background-image':'url('+item2.long_logo+')',width: (imgstyle.width ) + 'px',height: (imgstyle.height) + 'px',backgroundSize:'100% 100%'}"></view>
								<view class="swiper-goodsIntor">
									<view class="f-24 col-9">{{ item2.storename }}
									<view class="f-24" style="float: right;" v-if="item2.distance">
										{{item2.distance}}
									</view>
									</view>
									<view class="goodsName dis-flex flex-y-center m-top-btm20" style="margin-bottom: 10upx;">
										<view class="goodsLabel f-24 col-3 t-c m-right20 f"  v-if="item2.plugin == 'rush' || item2.plugin == 'groupon' || item2.plugin == 'wlfightgroup' || item2.plugin == 'coupon' || item2.plugin == 'bargain'">{{item2.plugin == 'rush'?'抢购':(item2.plugin == 'groupon'?'团购':item2.plugin == 'wlfightgroup'?'拼团':item2.plugin == 'bargain'?'砍价':'优惠券')}}</view>
										<view class="f-28 col-3 twolist-hidden swiperTitle" style="width: 80%;">{{ item2.goods_name }}</view>
									</view>
									<view >
										<view class="dis-flex flex-y-center flex-x-between">
											<view class="dis-flex flex-y-center">
												<view class="goods-price col-f4 f-40 m-right20" v-if="item2.plugin != 'coupon' || item2.is_charge == '1'">{{ item2.price }}元</view>
												<view class="goods-price col-f4 f-40 m-right20" v-else>免费</view>
												<view class="vip-goodsPrice dis-flex flex-y-center" v-if="(item2.plugin == 'rush' || item2.plugin == 'groupon' || item2.plugin == 'wlfightgroup') && item2.vipstatus == 1 && item2.discount_price && item2.discount_price !== null && item2.discount_price !== ''">
													<view class="viplabel m-right10">会员</view>
													<view class="col-3 f-24">优惠{{ item2.discount_price }}元</view>
												</view>
											</view>
											<view class="buyBtn t-c col-f f-28" v-if="item2.plugin != 'coupon' || item2.is_charge == '1'">{{!!publicgoodstwoData.params.button_name?publicgoodstwoData.params.button_name:'购买'}}</view>
											<view class="buyBtn t-c col-f f-28" v-else>领取</view>
										</view>
										<view class="dis-flex flex-y-center flex-x-between" style="height: 5rpx;margin-top: 20rpx;vertical-align: text-top;">
											<view class="f-24 col-9" v-if="item2.plugin !== 'coupon'" style="text-decoration:line-through;">市场价:{{ item2.oldprice }}</view>
											<view class="f-24 col-9">{{ item2.buy_num }}人购买</view>
										</view>
									</view>
									
									
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	export default {
		props: ['publicgoodstwoData'],
		data() {
			return {
				swiperI: 1,
				publicgoodstwoDataArr: [],
				imgstyle:{},
				ratio:0
			}
		},
		mounted() {
			let _this = this;
			this.imgstyle = uni.getStorageSync('imgstyle');
			// setTimeout(()=>{
			// 	uni.getSystemInfo({
			// 	    success: function (wh) {
			// 			// debugger
			// 			_this.ratio = wh.windowWidth / _this.imgstyle.width;
						
			// 	    }
			// 	});
			// })
			for (var i in this.publicgoodstwoData.data) {
				this.publicgoodstwoDataArr.push(this.publicgoodstwoData.data[i])
			}
		},
		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>
	/*  public_goods2  通用商品2  */
	/* .swiperMain {
		height: calc(90vw);
	} */
	
	.public-goods {
		padding: 0 30upx;
	}

	.swiper-goodsImage {
		width: 100%;
		height: calc((100vw - 60upx) / 1.8);
		background-repeat: no-repeat;
		background-size: 100% calc((100vw - 60upx) / 1.8);
	}

	.goodsLabel {
		width: 100upx;
		height: 50upx;
		line-height: 50upx;
		background-color: #ffd93f;
		border-radius: 4upx;
	}

	.buyBtn {
		display: inline-block;
		padding: 0 20upx;
		height: 56upx;
		line-height: 56upx;
		background-color: #ff4040;
		border-radius: 8upx;
	}

	.viplabel {
		height: 28upx;
		line-height: 30upx;
		color: #DDCDA0;
		font-size: 24upx;
		padding: 0 4upx;
		background-color: #363636;
		border-radius: 6upx;
	}
</style>
