<template>
	<view class="themes-miao-s bg-color-white position-r" :class="top ? 'mg-top': 'mg-top'">
		<!-- <themes-chunk-title title="团购活动" :iconSrc="event_rul + '/static/theme/avtivity-icon.svg'" tengtx="group purchase"></themes-chunk-title> -->
		<view class="con-title position-a">
			<image class="t-bg" :src="event_rul + '/static/images/bl/bl-tgtt.png'" mode="widthFix"></image>
			<text class="t-tex color-white position-a">团购活动</text>
		</view>
		<scroll-view :scroll-x="true" class="miao-cont">
			<block v-for="item in shopTuangou" :key="item.id">
				<view class="miao-cont__item al-item-center flex-colum j-between" @click="goto"
				:data-url="'/activity/tuangou/product?id=' + item.proid">
					<image class="miao-cont__item-img" :src="item.pic" mode="aspectFill"></image>
					<view class="miao-cont__item-title">{{ item.name }}</view>
					<view class="miao-cont__item-bottom">
						<view class="miao-cont__item-price">
							<view class="miao-cont__item-current"><text class="price-symbol">低至¥</text><text>{{ item.min_price }}</text></view>
							<view class="miao-cont__item-original"><text class="price-symbol">¥</text><text>{{ item.sell_price }}</text></view>
						</view>
						<text class="iconfont icon-jiahao"></text>
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	import { mapState } from "vuex";
	import themesChunkTitle from './themes-chunk-title.vue'
	
	var app = getApp();
	export default{
		components: {
			themesChunkTitle
		},
		props:{
			shopTuangou: {
				type: Array,
				default: function() {
					return [];
				},
			},
			top: {
				type: Boolean,
				default: false
			}
		},
		data(){
			return {
				event_rul: app.globalData.event_url,
			}
		},
		computed: {
			...mapState(['opt'])
		},
	}
</script>

<style lang="scss" scoped>

	.themes-miao-s {
		width: 100%;
		margin-top: 28rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx 0 30rpx 30rpx;
		
		.con-title {
			top: -40rpx;
			left: 50%;
			transform:  translateX(-50%);
			z-index: 3;
			.t-bg {
				width: 340rpx;
				vertical-align: middle;
			}
			.t-tex {
				font-size: 36rpx;
				top: 50%;
				left: 50%;
				transform:  translate(-50%, -50%);
			}
		}
		.miao-cont {
			white-space: nowrap;
			& ::-webkit-scrollbar {
				display: none;
			}
			&__item {
				width: 260rpx;
				flex-shrink: 0;
				margin-right: 40rpx;
				border-radius: 10rpx;
				overflow: hidden;
				display: inline-flex;
				&:last-child {
					margin-right: 22rpx;
				}
				&-img {
					width: 156rpx;
					height: 156rpx;
					margin-bottom: 16rpx;
				}
				&-title {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
					line-height: 36rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* autoprefixer: ignore next */
					-webkit-box-orient: vertical;
					text-align: justify;
					white-space: pre-wrap;
					word-break: break-all;

				}
				&-bottom {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 4rpx;
				}
				&-price {
					display: flex;
					align-items: flex-end;
				}
				&-current {
					font-size: 36rpx;
					font-weight: 500;
					color: #CE0000;
					line-height: 50rpx;
					.price-symbol {
						font-size: 22rpx;
						line-height: 32rpx;
						margin-right: 4rpx;
					}
				}
				&-original {
					margin: 0 0 6rpx 4rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #999999;
					line-height: 28rpx;
					text-decoration: line-through;
				}
				.icon-jiahao {
					font-size: 46rpx;
					color: #9DBF00;
				}
			}
		}
	}
	.mg-top {
		margin-top: 66rpx;
	}
</style>