<template>
	<view class="shop-page">
		<view class="header">
			<view class="select-main">
				<view class="search" @click="goSearch">
					<image src="@/static/new/search.png" mode="aspectFit" class="search-icon"></image>
					<view class="search-txt">请输入内容</view>
				</view>
			</view>
			<scroll-view scroll-x="true" class="tag" v-if="tabList.length > 0">
				<!-- tag-active -->
				<view class="tag-item" v-for="(item,index) in tabList" :key="item.id" :class="{'tag-active':index === tabIndex,paddingRights:index === tabList.length-1}" @click="tabCk(index)">
					{{item.name}}
					<view class="active" v-if="tabIndex === index"></view>
					<view class="active-no" v-else></view>
				</view>
			</scroll-view>
		</view>
		<scroll-view scroll-y="true" class="main" @scrolltolower="scrolltolower">
			<swiper class="banner" :indicator-dots="true" indicator-color="#fff" v-if="rollingImgsList.length > 0">
				<swiper-item v-for="(s,d) in rollingImgsList" :key="d">
					<image v-if="s.coverResource" :src="s.coverResource.url" mode="aspectFill" class="banner-img" @click="goAd(s)"></image>
				</swiper-item>
			</swiper>
			<view v-if="list.length === 0" style="padding-top: 200rpx;">
				<empty></empty>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
					<view class="shop">
						<image v-if="item.coverResource" :src="item.coverResource.url" class="shop-img" mode="aspectFit"></image>
					</view>
					<view class="name">{{item.abbreviation}}</view>
					<view class="point">
						<image src="@/static/an/point.gif" class="point-icon" mode=""></image>
						{{item.point.mall}}
						<!-- {{item.point.mall | numberFormat(item.point.mall)}} -->
					</view>
					<!-- <view class="price">¥{{item.price.sale}}</view> -->
				</view>
			</view>
			<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</scroll-view>
		<!-- 是否有未开完的奖品 -->
		<NoOpenCom></NoOpenCom>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/shop/index" v-if="visible"></page-popup>
	</view>
</template>

<script>
	import FloatWindowCom from '@/pages/components/floatWindow.vue'
	import NoOpenCom from '@/pages/index/components/noOpen.vue'
	import {
		myMixins
	} from "@/mixins/mixins.js";
	import {
		productTagsApi,
		productApi
	} from '@/API/product.js'
	import {
		product,
		categories,
		rollingImgs,
		productChannelApi,
		tagsChannelApi,
		tagsPointApi,
		productChannelPointApi
	} from '@/API/shop.js'
	import {
		popupAdApi
	} from '@/API/user.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: [],
				scrollTop: 0,
				total: 0,
				visible:false
			}
		},
		components: {
			FloatWindowCom,NoOpenCom
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		onShow() {
			uni.$on('updateTabData', (data) => {
			  this.visible = false
			  setTimeout(() => {
				  this.visible = true
			  },500)
			});
			// 积分商城埋点
			reportClickFn('product_index_clk')
		},
		mounted() {
			this.visible = true
			this.getProductTags()
			this.getPopupAd('MALL_CAROUSEL')
		},
		methods: {
			// 获取商品标签
			getProductTags() {
				// tagsPointApi().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)
				// 	}
				// })
				tagsChannelApi().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)
					}
				})
				// 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)
				// 	}
				// })
			},
			// 获取广告弹窗/轮播
			getPopupAd(type) {
				// HOMEPAGE_CAROUSEL 轮播
				// HOMEPAGE_POPUP 弹窗
				popupAdApi({
					type
				}).then(res => {
					if (res.code === 200) {
						if (type === 'MALL_CAROUSEL') {
							this.rollingImgsList = res.data
						}
						
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			// 获取商品
			getProduct(tagId) {
				// productChannelPointApi({
				// 	page: this.page,
				// 	size: 10,
				// 	code,
				// }).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)
				// 	}
				// })
				productChannelApi({
					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)
					}
				})
				// 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) {
				if (item.link) {
					if (item.link.type === 'INSIDE') {
						uni.navigateTo({
							url: `${item.link.url}`
						})
					} else {
						window.open(item.link.url)
					}
				}
			},
			// 获取轮播
			getRollingImgs() {

			},
			// 点击tabIndex
			tabCk(index) {
				this.tabIndex = index;
				this.page = 1;
				this.getProduct(this.tabList[this.tabIndex].id)
			},
			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/shop/search`
				})
			},
			// 查看详情
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/shop/detail?id=${item.id}`
				})
			},
			scrolltolower(){
				if (this.total == this.list.length) {
					return
				}
				this.page += 1;
				let id = ''
				if(this.tabList.length > 0){
					id = this.tabList[this.tabIndex].id
				}
				this.getProduct(id)
			},
		},
		onReachBottom() {
			// if (this.total == this.list.length) {
			// 	return
			// }
			// this.page += 1;
			// this.getProduct(this.tabList[this.tabIndex].id)
		},
		onTabItemTap(){
			// 商城tabbar点击次数
			reportClickFn('product_tabbar');
			console.log("我点击了商城的bar")
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
	}

	.shop-page {
		.header {
			width: 100%;
			height: 168rpx;
			background-color: #fff;
			.select-main{
				height: 88rpx;
				display: flex;
				align-items: center;
				.search {
					width: 686rpx;
					height: 72rpx;
					background: rgba(0, 0, 0, 0.04);
					border-radius: 16rpx;
					margin-left: 32rpx;
					position: relative;
					display: flex;
					align-items: center;
				
					.search-icon {
						position: absolute;
						width: 48rpx;
						height: 48rpx;
						top: 12rpx;
						left: 16rpx;
					}
				
					.search-txt {
						font-size: 32rpx;
						color: rgba(0, 0, 0, 0.45);
						padding-left: 72rpx;
					}
				}
			}
			

			.tag {
				padding: 16rpx 0 0 0;
				white-space: nowrap;
				height: 96rpx;
					
				.tag-item {
					display: inline-block;
					font-size: 28rpx;
					color: #000000;
					margin-left: 48rpx;
					// display: flex;
					// align-items: center;
					// justify-content: center;
					// flex-direction: column;
					max-width: 200rpx;
					text-align: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					.active {
						width: 48rpx;
						height: 8rpx;
						background: linear-gradient(90deg, #4FCDFD 0%, rgba(79, 205, 253, 0) 100%);
						border-radius: 4rpx 0px 0px 4px;
						margin: 0 auto;
					}
					.active-no{
						width: 48rpx;
						height: 8rpx;
					}
				}
				.paddingRights{
					padding-right: 40rpx;
				}

				.tag-active {
					font-weight: 800;
					font-size: 28rpx;
					color: #000000;
				}
			}
		}

		.main {
			height: calc(100vh - 286rpx);
			// margin-top: -20rpx;

			.banner {
				width: 750rpx;
				height: 320rpx;

				.banner-img {
					width: 750rpx;
					height: 320rpx;
				}
			}

			.list {
				display: grid;
				gap: 22rpx;
				grid-template-rows: 1fr;
				margin: 0px auto;
				grid-template-columns: repeat(2, 1fr);
				padding: 24rpx;
				border-radius: 8rpx;

				.item {
					width: 340rpx;
					// height: 436rpx;
					padding-bottom: 12rpx;
					background-color: #fff;

					.shop {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 340rpx;
						height: 240rpx;
						background-image: url('@/static/new/card-shop.png');
						background-repeat: no-repeat;
						background-size: 100%;
						// background: linear-gradient(180deg, rgba(98, 126, 153, 0) 0%, #627E99 100%), #E6EBF0;
						border-radius: 8rpx 8rpx 0px 0px;

						.shop-img {
							// width: 192rpx;
							height: 236rpx;
						}
					}

					.name {
						width: 304rpx;
						height: 80rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 28rpx;
						color: #000000;
						margin: 16rpx 0 0 16rpx;
					}

					.point {
						margin: 8rpx 0 0 16rpx;
						display: flex;
						align-items: center;
						font-weight: 800;
						font-size: 28rpx;
						color: #000000;
						.point-icon {
							margin-right: 8rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}

					.price {
						margin-left: 16rpx;
						height: 40rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #999999;
						display: flex;
						align-items: center;
						text-decoration: line-through;
					}
				}
			}
		}
	}
</style>