<template>
	<view class="goods">
		<scroll-view class="scroll-y" @scroll="handleScroll" :scroll-into-view="topItem" scroll-with-animation
			scroll-y="true">
			<view id="top"></view>
			<!-- 背景图 -->
			<view class="goods-img">
				<image style="width: 100%; height: 450rpx;" src="http://t9.9026.com/imgs/swiper01.png" mode=""></image>
			</view>
			<!-- 内容 -->
			<view class="main">
				<view class="search">
					<u-input placeholder="搜索" border='none'>
						<template slot="suffix" style='margin-right:40rpx;'>
							<u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
								height="32rpx"></u-image>
						</template>
					</u-input>
				</view>
				<view class="tab_nav">
					<view class="navTitle" v-for="(item,index) in items" :key="index">
						<view class="navTitle-item">
							<view :class="{'active':isActive === index}" @click="checked(index)">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content">

				<view class="home-hotel-img-content">
					
					<view class="home-hotel-img-content-item" v-for="item in goodsList"
						:style="{marginTop:item.marginTop || 0 }">
						<image class="home-hotel-img-content-item-img"
							:class="item.short?'home-hotel-img-content-item-img': 'home-hotel-img-content-item-img-long' "
							:src="item.img" mode=""></image>
						<view class="text">
							<text class="text-top">{{item.text}}</text>
							<text class="text-main">{{item.title}}</text>
						</view>
					</view>

				</view>
				<!-- 触底 -->
				<view class="home-bottom">
					<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
				</view>




				<!-- <text @click="goGoodsDetail">商品</text>
			<text @click="goGoodsDetailImg">转盘</text> -->
			</view>
		</scroll-view>
		<view class="return-btn" v-if="isShow" @click="handleBackTop">
			<image style="width: 128rpx;height: 128rpx;" src="/static/icon/returntop.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				// 返回的按钮是否显示
				isShow: false,
				topItem: '', //返回顶部的标记点
				goodsList: [{
						img: 'http://t9.9026.com/imgs/goodsimg01.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际',
						short: '',
					},
					{
						img: 'http://t9.9026.com/imgs/goodsimg02.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际'
					},
					{
						img: 'http://t9.9026.com/imgs/goodsimg02.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际'
					},
					{
						img: 'http://t9.9026.com/imgs/goodsimg01.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际',
						short: '',
					}, {
						img: 'http://t9.9026.com/imgs/goodsimg01.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际',
						short: '',
					},
					{
						img: 'http://t9.9026.com/imgs/goodsimg02.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际'
					},
					{
						img: 'http://t9.9026.com/imgs/goodsimg02.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际'
					},
					{
						img: 'http://t9.9026.com/imgs/goodsimg01.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际',
						short: '',
					}, {
						img: 'http://t9.9026.com/imgs/goodsimg01.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际',
						short: '',
					},
					{
						img: 'http://t9.9026.com/imgs/goodsimg02.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际'
					},
					{
						img: 'http://t9.9026.com/imgs/goodsimg02.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际'
					},
					{
						img: 'http://t9.9026.com/imgs/goodsimg01.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际',
						short: '',
					}, {
						img: 'http://t9.9026.com/imgs/goodsimg01.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际',
						short: '',
					},
					{
						img: 'http://t9.9026.com/imgs/goodsimg02.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际'
					},
					{
						img: 'http://t9.9026.com/imgs/goodsimg02.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际'
					},
					{
						img: 'http://t9.9026.com/imgs/goodsimg01.png',
						text: '中秋佳节五仁月饼，惊喜特供，限时抢购',
						title: '环球洲际',
						short: '',
					},
				],
				status: 'noMore',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
				//分段器
				items: [{
						title: '月饼'
					},
					{
						title: '月饼礼盒'
					}, {
						title: '商务礼盒'
					},
					{
						title: '洲际礼盒'
					},
					{
						title: '个性礼盒'
					},
					{
						title: '生日礼盒'
					}
				],
				//激活指定table菜单
				isActive: 0,

			};
		},
		// onShow() {
		// 	this.shortLong()
		// 	console.log(this)
		// },
		onLoad() {
			this.shortLong()
			this.getGoodsList()
		},
		methods: {

			getGoodsList() {
				this.$api.product.getProducts({
					type: 1,
					page: 0
				}).then(res => {
					console.log(res);
				})
			},

			handleScroll(e) {
				//只有scrollTop有用，先拿scrollTop
				let {
					scrollTop
				} = e.detail

				console.log(scrollTop);
				//滑动大于500让按钮显示
				this.isShow = scrollTop > 500
				//因为点第二次不行，这里记得重置清空一下
				this.topItem = ''
			},
			handleBackTop() {
				console.log(111);
				this.topItem = 'top'
			},
			shortLong() {
				this.goodsList.forEach((item, index, arr) => {
					if (index % 4 === 0) {
						item.short = true
					}
					if (index % 4 === 1) {
						item.long = true
					}
					if (index % 4 === 2) {
						item.long = true
						item.marginTop = -68 + "rpx"
					}
					if (index % 4 === 3) {
						item.short = true
					}
				})
				console.log(this.goodsList);
			},
			//去大转盘
			goGoodsDetailImg() {
				uni.navigateTo({
					url: '/pages/goods/goods-lucky/index'
				})
			},

			//去活动详情
			goGoodsDetail() {
				uni.navigateTo({
					url: '/pages/goods/goods-detail/index'
				})
			},
			// 瀑布流组件点击事件
			onClick(data, index, tag) {
				console.log(data);
				let direction = {
					"left": '左',
					"right": '右'
				}
				uni.showToast({
					title: `${direction[tag]}侧列表第${index+1}个被点击`,
					icon: 'none'
				})
			},
			// 瀑布流组件渲染完成
			onDone() {
				// 设置组件为 非重置，这行代码保留不删即可
				this.waterfall.reset = false;

				// 恢复 getList 方法的调用
				// this.ajax.load = true;
				// this.ajax.page++;

				// 设置组件状态为 等待加载
				this.waterfall.status = 'await';
			},
			//菜单index切换
			checked(index) {
				this.isActive = index
			},
		}

	}
</script>

<style lang="scss" scoped>
	.goods {
		height: 100%;
	}

	.tab_nav {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		font-family: PingFang-SC-Heavy, PingFang-SC;
		overflow-x: scroll;

	}


	.scroll-y {
		height: 100vh;
	}



	.content {
		background-color: #FFF;
		padding: 20rpx 30rpx;

		.home-hotel-img-content {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			flex-wrap: wrap;

			.home-hotel-img-content-item {
				width: 332rpx;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.04);
				border-radius: 12rpx;
				margin-bottom: 26rpx;

				.home-hotel-img-content-item-img {
					width: 332rpx;
					height: 332rpx;
					object-fit: cover;
					object-position: center;
				}

				.home-hotel-img-content-item-img-long {
					width: 332rpx;
					height: 400rpx;
					object-fit: cover;
					object-position: center;
				}

				.text {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
					padding: 18rpx 22rpx 32rpx;

					.text-top {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
					}

					.text-main {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
	}
	
.return-btn {
			position: fixed;
			bottom: 140rpx;
			right: 14rpx;

		}



	.home-bottom {
		background-color: #FFF;
		padding-bottom: 84rpx;
	}

	.tab_nav .navTitle {
		width: 154rpx;
		flex: none;
		height: 28rpx;
		font-size: 32rpx;
		color: #666;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
	}

	.navTitle-item {
		width: 154rpx;
		flex: none;
		height: 28rpx;
		font-size: 32rpx;
		color: #666;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.active {
		color: #D9A94D;
		font-weight: bold;

		&::after {
			display: inline-block;
			content: '';
			width: 48rpx;
			height: 12rpx;
			background: linear-gradient(90deg, #F3D69F 0%, #D9A94D 100%);
			border-radius: 6px;
			position: absolute;
			bottom: -32rpx;
			left: 51rpx;
		}
	}

	.search {
		::v-deep .u-input {
			width: 690rpx !important;
			height: 68rpx !important;
			background: #F1F1F1;
			border-radius: 74rpx;
		}

		::v-deep .u-input__content__field-wrapper {
			padding-left: 36rpx;
		}

		::v-deep .u-input__content__field-wrapper__field {
			color: #999999 !important;
			font-size: 28rpx !important;
		}
	}


	.goods-img {
		width: 100%;
		height: 450rpx;
	}

	.main {
		position: relative;
		top: -36rpx;
		padding: 48rpx 30rpx 0;
		border-radius: 16rpx 16rpx 0px 0px;
		height: 238rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.04);
	}
</style>
