<template>
	<view :class="[AppTheme]" class="box">
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-sticky offset-top="0" style="z-index: 10;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offset-top="-44" style="z-index: 10;">
				<!-- #endif -->
				<view class="tag">
					<u-tabs ref="uTabs" :list="tag" :activeStyle="{
		        color: primary,
		        transform: 'scale(1.05)'
		    }" :inactiveStyle="{
		        color: '#606266',
		        transform: 'scale(1)'
		    }" lineWidth="30" :scrollable="true" :lineColor="primary" :current="active" @click="tags">
					</u-tabs>
				</view>
			</u-sticky>
			<view class="NewProducts">
				<view class="content">
					<view class="content_box" v-for="item in cache" :key="item.id">
						<!-- <image class="new-img" :lazy-load="true" :src=" item.apppic.imgurl" /> -->
						<u-image :src="item.apppic" radius="10rpx" width="344rpx" height="344rpx" :lazy-load="true"
							:fade="true" duration="450">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u-image>
						<view class="message">
							<p style="font-size: 12px;">{{item.name}}</p>
							<view class="message_bot">
								<view class="f_left">
									<view class="text">
										<view class="">团购价:</view>
										<view class="color_org text-primary"> ¥{{item.price}}</view>
									</view>
									<p class="old_price">已团：{{item.sells}}个</p>
								</view>
								<view class="f_right bg-linear-gradient" @click="navToDetailPage(item)">立即参团</view>
							</view>
						</view>
					</view>
					<u-empty marginTop="100" style="height: 0% !important;width: 100vw;" v-if="cache&&cache.length==0"
						text="暂无更多数据" mode="list"></u-empty>
					</view>
		</view>
	</view>
</template>
<!-- 商城 -->
<script>
	import mall from '@/api/mall/index.js';
	import tabbar from '@/components/tabbar/tabbar.vue';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				current: 0,
				nomorelist: false,
				tag: [{
					id: 0,
					name: '全部'
				}],
				active: 0,
				cache: null,
				settingFile: getApp().globalData.siteinfo
			};
		},
		components: {
			tabbar
		},
		onLoad() {
			this.getlist();
		},
		methods: {
			tags(e) {
				console.log(e, "eeee")
				this.active = e.index;
				if (e.id == 0) {
					this.getlist(1);
					return
				}
				mall.actlist({
					type: e.id
				}).then(res => {
					if (res.status == 200) {
						this.cache = res.data.cache;
					} else {
						this.$api.msg(res.msg);
					}
				});
			},
			getlist(i) {
				mall.actlist().then(res => {
					console.log(res)
					if (res.status == 200) {
						if (!i) {
							let tag = this.tag;
							res.data.cates.forEach(item => {
								tag.push(item);
							});
							console.log(tag, "this.tag")
						}

						this.cache = res.data.cache;
					} else {
						this.$api.msg(res.msg);
					}
				});
			},
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.id;
				console.log(id)
				this.$u.route('pagesD/pages/mall/group_cart', {
					id
				})

			}
		},
		onPullDownRefresh() {
			this.cache = [];
			this.tags(this.active);
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 600);
		},
	};
</script>

<style lang="scss">
	$color-fff: #fff;

	@mixin lineH($index) {
		height: $index;
		line-height: $index;
	}

	page {
		background: #f5f5f5;
		height: 100%;
		// padding-bottom: 140rpx;
	}

	.box {
		position: relative;

		.tag {
			background-color: #ffffff;
			.tags {
				height: 100%;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
				margin-left: 20rpx;
				display: inline-block;
				border-bottom-width: 3px;
				border-bottom-style: solid;
			}

			.noborder {
				border: none;
			}
		}

		.carousel {
			height: 375rpx;
		}

		.carousel-item {
			width: 100%;

			.s-img {
				width: 100%;
				height: 100%;
			}

			.swiper-dots {
				left: 45rpx;
				bottom: 40rpx;
			}
		}

		.NewProducts {
			.content {
				margin-top: 0rpx;
				width: 100%;
				display: flex;
				padding: 20rpx;
				box-sizing: border-box;
				flex-wrap: wrap;
				justify-content: space-between;

				.content_box {
					box-shadow: $box-shadow;
					border-radius: 10px;
					width: 345rpx;
					padding-bottom: 30rpx;
					background-color: $color-fff;
					padding-bottom: 40rpx;
					margin-bottom: 20rpx;

					.new-img {
						width: 100%;
						height: 355rpx;
					}

					.message {
						box-sizing: border-box;
						padding: 10rpx;

						p {
							font-size: 28rpx !important;
							line-height: 40rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.message_bot {
							height: 84rpx;
							margin-top: 20rpx;
							border-top: 0.5rpx solid #efefef;
							display: flex;
							justify-content: space-between;

							.f_left {
								margin-top: 10rpx;
								font-size: 26rpx;

								.text {
									display: flex;
									align-items: center;
									justify-content: center;
									margin-top: 10rpx;

									.color_org {
										margin-left: 10rpx;
										font-size: 28rpx;
									}
								}

								.old_price {
									margin-top: 15rpx;
									color: black;
								}
							}

							.f_right {
								height: 50rpx;
								width: 116rpx;
								padding: 5rpx 10rpx 5rpx 10rpx;
								margin-top: 36rpx;
								border-radius: 30rpx;
								color: #ffffff;
								line-height: 50rpx;
								font-size: 24rpx;
								text-align: center;
							}
						}
					}
				}
			}
		}

		.subtitle {
			position: relative;
			font-size: 0.24rem;
			color: $color-ord;
			height: 45px;
			line-height: 45px;
			text-align: center;
			font-size: 14px;

			&:before {
				content: '';
				position: absolute;
				width: 30%;
				height: 1px;
				top: 50%;
				background-color: $color-ord;
				left: 2%;
			}

			&:after {
				content: '';
				position: absolute;
				width: 30%;
				height: 1px;
				top: 50%;
				background-color: $color-ord;
				right: 2%;
			}
		}
	}
</style>
