<template>
	<view class="shop-page">
		<view class="header" :style="{paddingTop:statusBarHeight}">
			<view class="header-title">蜜丫妈妈</view>
			<view class="header-search" @click="goSearch">
				<image src="@/static/index/ss.png" mode="" class="header-img"></image>
				搜索
			</view>
			<view class="header-name">商城</view>
		</view>
		<view class="header-swiper">
			<swiper class="shop-banner-img" :indicator-dots="true" indicator-color="#fff">
				<swiper-item v-for="(s,d) in rollingImgsList" :key="d">
					<image :src="s.cover" mode="aspectFill" class="shop-banner-img" @click="goAd(s)"></image>
				</swiper-item>
			</swiper>
		</view>
		<scroll-view class="scroll-view" scroll-x="true" :scroll-left="scroll" scroll-with-animation :class="{'scroll-top':scrollTop > 150}">
			<view v-for="(item,index) in tabList" :key="item.id" class="tab-item" :class="{'active':index === tabIndex}"
				@click="tabCk(index)">
				<view class="tab-item-detail">
					{{item.name}}
					<image src="@/static/index/dj.png" mode="" class="tab-active" v-if="tabIndex === index"></image>
				</view>
			</view>
		</scroll-view>
		<view class="shop-main">
			<swiper class="shop-list" @change="swiperChange" :current="tabIndex" :style="{ height: swiperHeight  }" circular>
				<template v-for="(v,i) in tabList">
					<swiper-item class="shop-list-main" :key="i">
						<view class="empty" v-if="list.length === 0">
							<empty></empty>
						</view>
						<view class="shop-grid">
							<view class="shop-item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
								<image :src="item.coverResource.url" mode="" class="shop-img"></image>
								<view class="shop-name">{{item.name}}</view>
								<view class="shop-price">
									<view class="price">¥{{item.price.sale}}</view>
									<view class="price-dou">
										积分{{item.point.mall | numberFormat(item.point.mall)}}
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</template>
			</swiper>
			<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</view>
		<FloatWindowCom></FloatWindowCom>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/product/product"></page-popup>
	</view>
</template>

<script>
	import FloatWindowCom from '@/pages/components/floatWindow.vue'
	import { myMixins } from "@/mixins/mixins.js";
	import { productTagsApi,productApi } from '@/API/product.js'
	import { product,categories,rollingImgs } from '@/API/shop.js'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
	import reportClickFn from '@/utils/report.js'
	export default {
	mixins: [myMixins],
		data() {
			return {
				statusBarHeight,
				tabList: [],
				tabIndex: 0,
				scroll: 0,
				list:[],
				swiperHeight:'0rpx',
				page:1,
				rollingImgsList:[{
						cover: "http://img2.baidu.com/it/u=147259493,3347073068&fm=253&app=138&f=JPEG?w=1067&h=800"
					},
					{
						cover: "https://img0.baidu.com/it/u=1867724397,1737503093&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800"
					},
					{
						cover: "http://img0.baidu.com/it/u=2195862473,1251618031&fm=253&app=138&f=JPEG?w=1201&h=800"
					}],
				scrollTop:0,
				total:0
			}
		},
		components:{FloatWindowCom},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		onShow() {
			// reportClickFn('product_index_clk')
		},
		mounted() {
			this.getProductTags()
		},
		methods: {
			// 获取商品标签
			getProductTags(){
				productTagsApi().then(res => {
					if(res.code === 200){
						this.tabList = res.data
						let ids = res.data[0] && res.data[0].id
						this.getProduct(ids)
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			
			// 获取商品
			getProduct(tagId){
				productApi({page:this.page,size:10,tagId,}).then(res => {
					uni.hideLoading()
					if(res.code === 200){
						this.total = res.data.total
						if(this.page > 1){
							this.list = [...this.list,...res.data.content]
						}else{
							this.list = res.data.content
						}
						let height = Math.ceil(this.list.length / 2) * 410;
						
						if(height < 900){
							this.swiperHeight = `1018rpx`
						}else{
							this.swiperHeight = `${height}rpx`
						}
						
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			goAd(item){
				// 0:内链,1:外链
				if(item.linkType === 0){
					uni.navigateTo({
						url:`${item.link}`
					})
				}else if(item.linkType === 1){
					window.open(item.link)
				}
			},
			// 获取轮播
			getRollingImgs(){
				
			},
			// 点击tabIndex
			tabCk(index) {
				this.tabIndex = index;
				this.page = 1;
				this.scroll = index * 80;
			},
			swiperChange(e){
				this.tabIndex = e.target.current;
				this.scroll = this.tabIndex * 80;
				this.page = 1;
				this.list = [];
				this.getProduct(this.tabList[this.tabIndex].id)
			},
			// 点击搜索
			goSearch(){
				uni.navigateTo({
					url:`/pages/search/index`
				})
			},
			// 查看详情
			goDetail(item){
				uni.navigateTo({
					url:`/pages/product/detail?id=${item.id}`
				})
			}
		},
		onReachBottom(){
			if(this.total == this.list.length){
				return
			}
			this.page += 1;
			this.getProduct(this.tabList[this.tabIndex].id)
		}
	}
</script>

<style lang="scss">
	page{
		// background-color: #F9F6F7;
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.shop-page {
		min-height: calc(100vh - var(--window-bottom));
		.header {
			position: fixed;
			z-index: 10;
			width: 100%;
			left: 0;
			display: flex;
			align-items: center;
			background-color: #F9F6F7;
			padding-bottom: 10rpx;
		
			.header-title {
				font-weight: 400;
				font-size: 50rpx;
				color: #000000;
				font-family: YouSheBiaoTiHei;
				margin-left: 28rpx;
			}
		
			.header-search {
				margin-left: 45rpx;
				position: relative;
				width: 334rpx;
				height: 65rpx;
				background: #FFFFFF;
				border-radius: 33rpx;
				font-size: 24rpx;
				color: rgba(0,0,0,0.5);
				padding-left: 60rpx;
				padding-right: 10rpx;
				display: flex;
				align-items: center;
		
				.header-img {
					position: absolute;
					top: 18rpx;
					left: 22rpx;
					width: 29rpx;
					height: 29rpx;
				}
		
				.header-input {
					font-size: 24rpx;
					color: #000000;
					width: 334rpx;
					height: 65rpx;
					padding-left: 60rpx;
					padding-right: 10rpx;
				}
		
			}
		
			.header-name {
				margin-left: 45rpx;
				font-weight: bold;
				font-size: 33rpx;
				color: #000000;
			}
		}
		.header-swiper{
			padding-top: 130rpx;
			margin-left: 26rpx;
			.shop-banner-img {
				width: 706rpx;
				height: 256rpx;
				border-radius: 20rpx;
			}
		}
		.scroll-view {
			width: 100%;
			white-space: nowrap;
			padding-top: 46rpx;
			z-index: 10;
			// display: flex;
			// align-items: center;
			.tab-item {
				display: inline-block;
				color: #6D6D6D;
				font-size: 32rpx;
				margin-left: 54rpx;
				.tab-item-detail{
					display: flex;
					flex-direction: column;
					align-items: center;
					.tab-active {
						width: 42rpx;
						height: 18rpx;
						margin-top: 13rpx;
						z-index: 10;
					}
				}
				
			}
		
			.active {
				font-size: 38rpx;
				color: #333333;
				font-weight: bold;
			}
		}
		.scroll-top{
			position: fixed;
			top: 100rpx;
			left: 0;
			background-color: #F9F6F7;
		}
		.header-fixed{
			// position: sticky;
			width:100%;
			position: fixed;
			top: 0;
			z-index: 999;
			background-color: #70E3DE;
			.shop-header {
				width: 100%;
			
				.search {
					padding: 36rpx 32rpx 0 32rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-between;
			
					.search-img {
						position: absolute;
						width: 36rpx;
						height: 36rpx;
						left: 58rpx;
						top: 50rpx;
					}
			
					.search-input {
						width: 624rpx;
						height: 64rpx;
						line-height: 64rpx;
						background: #fff;
						border-radius: 32rpx;
						font-size: 28rpx;
						color: #666666;
						padding-left: 88rpx;
					}
			
					.search-classify {
						width: 38rpx;
						height: 38rpx;
					}
				}
			}
			
			
		}
		

		.shop-main {
			background: linear-gradient(180deg, #FFFFFF 0%, #F1F1F3 100%);
			border-radius: 24rpx 24rpx 0px 0px;
			margin-top: -5.7rpx;
			// padding: 30rpx 32rpx;
			// min-height: calc(100vh - 320rpx);
			// margin-top: 20rpx;
			

			.shop-list {
				// overflow-y: scroll;
				.shop-list-main{
					height: 100%;
					width: 100%;
					
					.empty{
						padding-top: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						.empty-img{
							width: 120rpx;
							height: 152rpx;
						}
						.empty-txt{
							font-size: 32rpx;
							color: #666666;
							margin-top: 60rpx;
						}
					}
					.shop-grid{
						display: grid;
						gap: 12rpx;
						grid-template-rows: 1fr;
						margin: 0px auto;
						grid-template-columns: repeat(2, 1fr);
						padding: 35rpx 22rpx;
						background: linear-gradient(181deg, #FFEAEE 0%, rgba(247, 207, 215, 0) 100%);
						border: 2rpx solid #FFFFFF;
						border-bottom: none;
						border-radius: 32rpx 32rpx 0 0;
						.shop-item {
							width: 347rpx;
							height: 380rpx;
							background: #fff;
							border-radius: 20rpx;
							padding: 10rpx;
						
							.shop-img {
								width: 327rpx;
								height: 272rpx;
								background: #FFFFFF;
								border-radius: 6rpx;
							}
						
							.shop-name {
								padding: 0 10rpx;
								margin-top: 15rpx;
								font-size: 22rpx;
								color: #333333;
								width: 320rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								// overflow: hidden;
								// text-overflow: ellipsis;
								// display: -webkit-box;
								// -webkit-box-orient: vertical;
								// -webkit-line-clamp: 2;
							}
						
							.shop-price {
								display: flex;
								align-items: center;
								// justify-content: space-between;
								// margin-top: 12rpx;
								padding: 0 14rpx;
						
								.price {
									font-size: 30rpx;
									font-weight: bold;
									font-family: YouSheBiaoTiHei;
									color: #FB2851;
								}
						
								.price-dou {
									display: flex;
									align-items: center;
									font-size: 20rpx;
									color: rgba(0,0,0,0.6);
									margin-left: 10rpx;
						
									.dou-img {
										margin-right: 6rpx;
										width: 36rpx;
										height: 36rpx;
									}
								}
							}
						}
					}
				}
				
			}
					.no-data{
						font-size: 24rpx;
						text-align: center;
						padding: 10rpx 0 30rpx 0;
					}
		}
	}
</style>
