<template>
	<view class="whole" v-if="!loading">
		<view class="banner"></view>
		
		<view class="tabBox" :class="fixed ? 'fixed' : ''">
			<up-tabs
				:current="active"
				:lineHeight="0"
				keyName="name"
				:list="category"
				:lineColor="Color"
				:activeStyle="{ color: Color }"
				@click="onClickTab">
			</up-tabs>
		</view>
		
		<view class="goodbox" v-if="goodsList.length !== 0">
			<template v-for="(item, index) in goodsList" :key="index">
				<view class="item" v-if="item.shop_group_goods" @click="toGroups(item.shop_group_goods_id)">
					<view class="imgbox">
						<image :src="item.shop_group_goods.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" class="img"></image>
						<view class="tag" v-if="index < 3" :class="'tag' + (index + 1)" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
						<view class="tag tag4 " v-else>{{index + 1}}</view>
						<view class="out" v-if="item.shop_group_goods.sold_status === 2">
							<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/01/16/Cr6cRRhhqYNhScigxIyumyV9hXXMI3vKvsE1jgt0.png" class="out_img" />
						</view>
						<view class="out" v-else-if="item.shop_group_goods.sold_status === 0">
							<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/QBhUheeYWSJ3OGM27fkAufJAlFSA8GBhWjpY5oNy.png" class="out_img" />
						</view>
						<view class="out" v-else-if="item.shop_group_goods.total_stock === 0">
							<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/pMTv6QiZZEpSqkJmk7hMcbEzIuNzMyp7YVBbe42H.png" class="out_img" />
						</view>
					</view>
					<view class="box">
						<view class="title">
							<view class="tit">{{item.shop_group_goods.title}}</view>
							<view class="sale">已团{{item.shop_group_goods.total_sales}}
								<text v-if="role">（月销{{item.shop_group_goods.sales}}）</text>
							</view>
						</view>
						<view class="text">
							<view class="price"><text class="prefix">￥</text>
								<text class="txt" v-if="item.shop_group_goods.price * 1 > 0">{{item.shop_group_goods.price}}</text>
								<template v-else>
									<text class="txt" v-if="parseFloat(item.shop_group_goods.min_price) == parseFloat(item.shop_group_goods.max_price)">{{item.shop_group_goods.min_price}}</text>
									<text class="txt" v-else>{{item.shop_group_goods.min_price * 1}}~{{item.shop_group_goods.max_price}}</text>
								</template>
							</view>
							<view class="btn">立即抢购</view>
						</view>
					</view>
				</view>
			</template>
						
			<view class="bottom">— 没有更多了 —</view>
		</view>
		
		<view v-else class="empty">
			<up-empty mode="data" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/data.png" text="暂无数据"></up-empty>
		</view>

	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { userBind } from '@/components/common.js'
	import { get, post } from '@/Api/request.js'
	import { Style } from '@/utils/list.js'
	import { sp2 } from '@/components/img.js'
	
	export default {
		setup() {
			const data = reactive({
				sp2: sp2,
				category: [],
				active: 0,
				goodsList: [],
				loading: true,
				showTop: false,
				shareUrl: '',
				Color: '',
				priceColor: '',
				fixed: false,
				role: uni.getStorageSync('role') == 1 || uni.getStorageSync('role') == 4
			})
			
			async function getFetchList() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				await get('/api/v1/group/goods/top').then((res) => {
					data.category = res.data
					if(data.active) {
						for (let i = 0; i < res.data.length; i++) {
							if(data.active == res.data[i].id) {
								data.active = i
								break
							}
						}
					}
					data.goodsList = res.data[data.active].top
					data.loading = false
					uni.hideLoading()
				}).catch(() => {
					data.loading = false
				})
			}
			
			// 分享路径
			const getShareUrl = () => {
				post('/api/v1/user/share', {
					page: 'pages/mine/other/ranking',
					query: ``
				}).then((res) => {
					data.shareUrl = res.data.path
				})
			}
			
			const onClickTab = (e) => {
				uni.pageScrollTo({
					scrollTop: Math.random(),
					duration: 300
				})
				data.active = e.index
				data.goodsList = JSON.parse(JSON.stringify(data.category[data.active].top))
			}
			
			const toGroups = (id) => {
				uni.navigateTo({
					url: '/pages/groups/index?id=' + id
				})
			}
			
			return {
				...toRefs(data),
				getFetchList,
				toGroups,
				userBind,
				getShareUrl,
				onClickTab
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 300) {
				this.showTop = true
			} else {
				this.showTop = false
			}
			this.fixed = e.scrollTop > 150
		},
		async onLoad(options) {
			this.active = (options.id || 0) * 1
			// await this.$onLaunched
			await this.getFetchList()
			this.Color = uni.getStorageSync('theme_color')
			this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
			this.getShareUrl()
			let params = {
				from: options.from || 0,
				s: options.s || 0,
				u: options.u || 0,
				group_id: 0,
				company_id: options.company_id || ''
			}
			this.userBind(params)
		},
		onShareAppMessage() {
			return {
				title: '热销榜单',
				imageUrl: '',
				path: this.shareUrl + '&id=' + this.category[this.active] ? this.category[this.active].id : 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		.banner{
			width: 100%;
			height: 380rpx;
			position: relative;
			background: url('https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/07/05/kxXS5PnjnBM5UcXqZo96NrKX61nqv0pnZBpcA7uR.png') no-repeat center;
			background-size: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			padding-bottom: 40rpx;
			box-sizing: border-box;
			.img{
				width: 100%;
				vertical-align: bottom;
			}
		}
		.tabBox{
			padding: 0 24rpx;
			box-sizing: border-box;
			width: 100%;
			margin-top: -120rpx;
			margin-bottom: 36rpx;
			position: relative;
			z-index: 2;
			&.fixed{
				position: sticky;
				top: 0;
				padding: 0;
			}
		}
	}
	.goodbox{
		padding: 24rpx 24rpx 0;
		position: relative;
		z-index: 1;
		border-radius: 16rpx 16rpx 0 0;
		margin-top: -20rpx;
		background: #f5f5f5;
		.item{
			padding: 20rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			.img{
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
			.imgbox{
				position: relative;
				.out{
					position: absolute;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					top: 0;
					left: 0;
					z-index: 2;
					.out_img{
						width: 120rpx;
						height: 120rpx;
					}
				}
				.tag{
					position: absolute;
					width: 16px;
					height: 16px;
					top: 0;
					left: 0;
					background-repeat: no-repeat;
					background-size: 678px 612px;
					&.tag1{
						background-position: -352px -209px;
					}
					&.tag2{
						background-position: -305.5px -209px;
					}
					&.tag3{
						background-position: -138px -209px;
					}
					&.tag4{
						background-color: #CBD2D6;
						border-radius: 6rpx 0 0 0;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
						color: #fff;
					}
				}
			}
			.box{
				display: flex;
				width: calc(100% - 220rpx);
				flex-direction: column;
				justify-content: inherit;
				.sale{
					font-size: 24rpx;
					color: v-bind('priceColor');
					margin-top: 10rpx;
				}
				.tit{
					font-size: 28rpx;
					color: #333;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					white-space: break-spaces;
				}
				.text{
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					.price{
						text-align: left;
						width: calc(100% - 160rpx);
						line-height: 56rpx;
						color: v-bind('priceColor');
						font-weight: 600;
						.txt{
							font-size: 36rpx;
						}
						.prefix{
							font-size: 28rpx;
						}
					}
					.btn{
						border: 1px solid v-bind('Color');
						border-radius: 56rpx;
						font-size: 24rpx;
						color: v-bind('Color');
						padding: 10rpx 20rpx;
					}
				}
			}
		}
	}
	.bottom {
		text-align: center;
		font-size: 24rpx;
		color: #999999;
		margin: auto;
		line-height: 80rpx;
	}
	.empty{
		width: 100%;
		height: calc(100vh - 100rpx);
	}
</style>

<style scoped>
	::v-deep .u-tabs {
		background: #fff;
		border-radius: 10rpx;
	}
	::v-deep .fixed .u-sticky {
		border-radius: 0;
	}
</style>
