<template>
	<!-- 团购纵向布局 -->
	<view class="shop" :class="type == 1 ? '' : 'home'">
		<view class="shop-goods" :class="type == 1 ? 'fenlei' : ''">
			<view class="shop-goods-group">
				<scroll-view scroll-y="true" class="scroll">
					<template v-for="(item, index) in groupList" :key="item.id">
						<view class="item" v-if="item.is_more !== 1" :class="groupId === item.id ? 'choose' : ''" @click="chooseGroup(item.id)">
							{{item.name}}
						</view>
					</template>
				</scroll-view>
			</view>
			<view class="shop-goods-list">
				<view class="sort_box" v-if="type == 1">
					<view class="sort_item" v-for="(item, index) in sortList" :key="index" @click.stop="chooseSort(index)">
						<text :class="sortIndex === index ? 'choose' : ''">{{item}}</text>
						<view class="icon" v-if="index === 2">
							<up-icon name="arrow-up" size="10" :color="priceType && sortIndex === 2 ? Color : ''" />
							<up-icon name="arrow-down" size="10" :color="!priceType && sortIndex === 2 ? Color : ''" />
						</view>
					</view>
				</view>
				<scroll-view scroll-y="true" class="goodbox" :class="type == 1 ? '' : 'padtop'" @scrolltolower="scorllBottom">
					<view class="goods" v-for="item in goodsList" :key="item.id" @click="toGoods(item.id)">
						<image class="goods-img" :src="item.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill"></image>
						<view class="goods-info">
							<view>
								<view class="name">{{item.title}}</view>
								<view v-if="item.actives && item.actives.length">
									<view v-for="it in item.actives" class="move_img">{{it.name}}</view>
								</view>
							</view>
							<view class="goods-info-price goods-info-vip">
								<view class="goods-info-price-left" v-if="item.group_goods.length === 1">
									<text class="icon">￥</text>
									<text class="price">
										<text v-if="item.group_goods[0].specs_type === 0">{{item.group_goods[0].price}}</text>
										<text v-else>
											<text v-if="item.group_goods[0].max_price === item.group_goods[0].min_price">{{item.group_goods[0].min_price}}</text>
											<text v-else>{{item.group_goods[0].min_price}}~{{item.group_goods[0].max_price}}</text>
										</text>
									</text>
								</view>
								<view class="goods-info-vip" v-else>
									<text class="icon">￥</text>
									<text class="price">
										<text v-if="item.max_price === item.min_price">{{item.min_price}}</text>
										<text v-else>{{item.min_price}}~{{item.max_price}}</text>
									</text>
								</view>
								
								<view v-if="item.group_goods.length === 1">
									<template v-if="item.group_goods[0].specs_type == 0 && item.group_goods[0].goods.limit_type == 0">
										<view @click.stop="getGoodsSkus(item.group_goods[0])" class="goods-info-price-right">
											+
										</view>
									</template>
									<template v-else-if="item.group_goods[0].specs_type == 0 && item.group_goods[0].goods.limit_type != 0">
										<view class="goods-info-price-right">+</view>
									</template>
									<template v-if="item.group_goods[0].specs_type == 1">
										<view @click.stop="getGoodsSkus(item.group_goods[0])" class="goods-info-price-right">
											+
										</view>
									</template>
								</view>
								<view class="goods-info-price-right" v-else>
									+
								</view>
							</view>
						</view>
					</view>
					<view class="bottom" v-if="page >= lastPage">- 没有更多了 -</view>
					<view class="bottom" v-else>加载中...</view>
				</scroll-view>
				
			</view>
		</view>
		
		<choose-sku :show-sku="showSku" :show1='true' :sku-info="skuInfo" :skus_1="skus_1" @close="showSku = false" :isTabbar="true" @getnum="getnum" />
	</view>
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import ChooseSku from '../sku/ChooseSku.vue'
	import { get } from '@/Api/request.js'
	import { goodsItem } from '../common.js'
	import { Style } from '@/utils/list.js'
	
	export default {
		components: {
			ChooseSku
		},
		props: {
			groupList: Array,
			type: {
				type: Number,
				default: 0
			},
			vipOn: Number
		},
		setup(props, context) {
			const data = reactive({
				goodsList: [],
				groupId: '',
				page: 1,
				lastPage: 0,
				sortList: ['综合', '销量', '价格', '上新'],
				sortIndex: 0,
				priceType: false,
				sortFilter: {
					sales: '',
					price: '',
					score: 2,
					new: ''
				},
				Color: uni.getStorageSync('theme_color'),
				priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor
			})
			
			// 获取分组商品
			async function getGoodsList() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					shop_group_id: data.groupId,
					page: data.page,
					sales: data.sortFilter.sales,
					price: data.sortFilter.price,
					score: data.sortFilter.score,
					new: data.sortFilter.new
				}
				await get('/api/app/search', params).then((res) => {
					data.goodsList = data.goodsList.concat(res.data)
					data.lastPage = res.meta.last_page
					uni.hideLoading()
				})
			}
			// 切换分组
			function chooseGroup(id) {
				if (id !== data.groupId) {
					data.groupId = id
					data.page = 1
					data.goodsList = []
					getGoodsList()
				}
			}

			const { toGoods, showSku, getGoodsSku, skuInfo, getNum, skus_1 } = goodsItem()
			const getGoodsSkus = (item) => {
				getGoodsSku(item).then((res) => {
					if (item.specs_type === 0) {
						getnum()
					}
				})
			}

			// 排序
			function chooseSort(index) {
				data.sortIndex = index
				if (index === 2) {
					data.priceType = !data.priceType
					data.sortFilter.price = data.priceType ? 1 : 2
					data.sortFilter.new = ''
				} else {
					data.sortFilter.price = ''
				}
				data.sortFilter.sales = index === 1 ? 2 : ''
				data.sortFilter.score = index === 0 ? 2 : ''
				data.sortFilter.new = index === 3 ? 2 : ''
				data.page = 1
				data.goodsList = []
				getGoodsList()
			}

			const getnum = () => {
				context.emit('getnum')
			}
			getGoodsList()
			
			function scorllBottom() {
				if (data.page < data.lastPage) {
					data.page++
					getGoodsList()
				}
			}

			return {
				...toRefs(data),
				chooseGroup,
				showSku,
				getGoodsSku,
				toGoods,
				skuInfo,
				getNum,
				skus_1,
				getnum,
				getGoodsSkus,
				getGoodsList,
				chooseSort,
				scorllBottom
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop {
		height: calc(100vh - env(safe-area-inset-bottom));
		&.home{
			height: calc(100vh - 184rpx - env(safe-area-inset-bottom));
		}
		.shop-coupon {
			display: flex;
			height: 130rpx;
			padding: 15rpx 40rpx;
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: 0rpx 0rpx 20rpx rgba(34, 34, 34, 0.1);
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			&-price {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				padding-right: 40rpx;
				border-right: 2rpx solid #555555;
				.price {
					font-size: 40rpx;
					color: v-bind('priceColor');
					margin: 0 10rpx;
					font-weight: bold;
				}
			}
			&-text {
				display: flex;
				align-items: center;
				flex: 1;
				justify-content: space-between;
				margin-left: 30rpx;
				.left {
					.title {
						font-size: 32rpx;
						font-weight: bold;
					}
					.text {
						font-size: 24rpx;
						color: #555555;
						margin-top: 14rpx;
					}
				}
				.btn {
					font-size: 24rpx;
					height: 50rpx;
					line-height: 50rpx;
					width: 140rpx;
					border-radius: 40rpx;
					background: v-bind('Color');
					text-align: center;
					color: #fff;
				}
			}
		}

		.shop-goods {
			display: flex;
			overflow: auto;
			height: 100%;
			&.fenlei{
				height: calc(100% - 110rpx);
			}
			&-group,
			&-list {
				background-color: #fff;
				height: 100%;
			}
			&-group {
				width: 25%;
				flex-shrink: 0;
				.scroll {
					height: 100%;
					.item {
						height: 90rpx;
						line-height: 90rpx;
						padding-left: 30rpx;
						font-size: 24rpx;
						&.choose {
							background-color: #f9f9f9;
							color: v-bind('Color');
							font-weight: bold;
						}
					}
				}
			}
			&-list {
				flex: 1;
				height: 100%;
				overflow: auto;
				position: relative;
				width: 75%;
				.goods {
					display: flex;
					padding: 20rpx 0;
					margin: 0 30rpx;
					&-img {
						width: 140rpx;
						height: 140rpx;
						background: #cbcacb;
						border-radius: 10rpx;
						flex-shrink: 0;
						margin-right: 18rpx;
					}
					&-info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 100%;
						overflow: hidden;
						min-height: 140rpx;
						.name {
							font-size: 28rpx;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						&-tag {
							display: flex;
							overflow-x: auto;
							&-item {
								font-size: 24rpx;
								color: v-bind('Color');
								background-color: #fff3f4;
								padding: 0 15rpx;
								margin-right: 5rpx;
								border-radius: 15rpx;
								flex-shrink: 0;
							}
						}
						&-vip {
							display: flex;
							align-items: center;
							color: v-bind('priceColor');
							.price {
								font-size: 34rpx;
							}
							.icon {
								font-size: 24rpx;
							}
							.tag {
								margin-left: 10rpx;
								font-size: 20rpx;
								color: #fbe6c3;
								background: #353648;
								border-radius: 20rpx 0 0 0;
								padding: 2rpx 10rpx;
							}
						}

						&-price {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 24rpx;
							&-left {
								.old {
									margin-left: 8rpx;
									font-size: 20rpx;
									color: #999999;
									text-decoration: line-through;
								}
							}
							&-right {
								background-color: v-bind('Color');
								border-radius: 2px;
								color: #fff;
								font-size: 19px;
								height: 17px;
								line-height: 15px;
								text-align: center;
								width: 17px;
							}
						}
					}
				}

				.goods:not(:first-child) {
					border-top: 1px solid #f2f2f2;
				}
				.bottom {
					text-align: center;
					font-size: 24rpx;
					color: #999999;
					margin: auto;
					line-height: 80rpx;
				}
			}
		}
	}
	
	.sort_box {
		display: flex;
		background-color: #fff;
		height: 90rpx;
		align-items: center;
		justify-content: space-around;
		border-bottom: 1px solid #eee;
		box-sizing: border-box;
		width: 100%;
		.sort_item {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			color: #666;
			font-size: 28rpx;
			.icon {
				display: flex;
				flex-direction: column;
				margin-left: 10rpx;
				.iconfont {
					font-size: 24rpx;
					line-height: 16rpx;
				}
			}
		}
	
		.choose {
			color: v-bind('Color');
			font-weight: bold;
		}
	}
	.goodbox{
		height: calc(100% - 90rpx);
		box-sizing: border-box;
		&.padtop{
			height: 100%;
		}
	}
	.move_img {
		display: inline-block;
		font-size: 22rpx;
		color: #fff;
		margin: 8rpx 10px 10rpx 0;
		background-image: url('@/static/image/move_img.png');
		background-repeat: no-repeat;
		padding: 0px 3px 0px 12px;
		height: 40rpx;
		background-size: 100% 100%;
		line-height: 40rpx;
	}
</style>
