<template>
	<view class="hmall-content">
		<view v-if="currentCategory != 'recommend' && secondaryCategoryPages.length > 0" class="hmall-secondary-shell">
			<scroll-view
				class="hmall-secondary-scroll"
				direction="horizontal"
				:scroll-x="true"
				:show-scrollbar="false"
				:scroll-with-animation="true"
			>
				<view class="hmall-secondary-pages">
					<view
						v-for="(page, pageIndex) in secondaryCategoryPages"
						:key="page.id + '-' + pageIndex"
						class="hmall-secondary-page"
					>
						<view
							v-for="(item, itemIndex) in page.items"
							:key="item.id + '-' + itemIndex"
							:class="['hmall-secondary-item', selectedSubCategoryId == item.id ? 'hmall-secondary-item-active' : '']"
							@click="emit('secondary-category-click', item)"
						>
							<view class="hmall-secondary-icon-wrap">
								<image v-if="item.icon != null && isImageIcon(item.icon)" class="hmall-secondary-image" :src="item.icon" mode="aspectFit" />
								<text v-else class="hmall-secondary-icon-text">{{ getCategoryDisplayIcon(item) }}</text>
							</view>
							<text class="hmall-secondary-name">{{ item.name }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view v-if="currentCategory == 'recommend' && marketingChannels.length > 0" class="hmall-recommend-section">
			<view
				v-for="(channel, index) in marketingChannels"
				:key="channel.id + '-' + index"
				class="hmall-recommend-card"
				:style="{ backgroundColor: channel.bgColor }"
				@click="emit('select-channel', channel)"
			>
				<view class="hmall-recommend-header">
					<view class="hmall-recommend-title-row">
						<text class="hmall-recommend-title">{{ channel.title }}</text>
						<text class="hmall-recommend-badge" :style="{ color: channel.themeColor, borderColor: channel.themeColor }">{{ channel.badge }}</text>
					</view>
					<text class="hmall-recommend-subtitle">{{ channel.subtitle }}</text>
				</view>
				<view class="hmall-recommend-products">
					<view
						v-for="(product, pIndex) in channel.products"
						:key="product.id + '-' + pIndex"
						class="hmall-recommend-product"
					>
						<image class="hmall-recommend-product-image" :src="getChannelProductImage(product)" mode="aspectFill" @error="handleChannelProductImageError(product.id)" />
						<text class="hmall-recommend-product-name">{{ getChannelProductTitle(product) }}</text>
						<view class="hmall-recommend-price-row">
							<text class="hmall-recommend-product-tag" :style="{ color: channel.themeColor }">{{ getChannelProductTag(product) }}</text>
							<text class="hmall-recommend-product-price" :style="{ color: channel.themeColor }">¥{{ formatChannelPrice(getChannelSalePrice(product)) }}</text>
						</view>
						<text v-if="showChannelMarketPrice(product)" class="hmall-recommend-market-price">¥{{ formatChannelPrice(getChannelMarketPrice(product)) }}</text>
					</view>
				</view>
			</view>
		</view>

		<view v-else-if="currentCategory != 'recommend' && categorySimpleChannels.length > 0" class="hmall-simple-section">
			<view
				v-for="(channel, index) in categorySimpleChannels"
				:key="channel.id + '-' + index"
				:class="['hmall-simple-card', index == 0 ? 'hmall-simple-card-with-divider' : '']"
				@click="emit('select-simple-channel', channel)"
			>
				<view class="hmall-simple-left">
					<view class="hmall-simple-title-row">
						<text class="hmall-simple-icon">{{ channel.icon }}</text>
						<text class="hmall-simple-title">{{ channel.title }}</text>
					</view>
					<text class="hmall-simple-subtitle">{{ channel.subtitle }}</text>
				</view>
				<view class="hmall-simple-cover-wrap">
					<view v-for="(cover, coverIndex) in channel.coverImages" :key="channel.id + '-cover-' + coverIndex" class="hmall-simple-cover-slot">
						<image v-if="isImageIcon(cover)" class="hmall-simple-cover-image" :src="cover" mode="aspectFill" />
						<view v-else class="hmall-simple-cover-fallback">
							<text class="hmall-simple-cover-text">{{ cover }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="hmall-products-section">
			<view class="hmall-feed-divider"></view>

			<view v-if="hotProducts.length > 0" class="hmall-products-grid hmall-products-grid-dense">
				<view
					v-for="(product, index) in hotProducts"
					:key="product.id + '-' + index"
					class="hmall-product-card hmall-product-card-skeleton"
					@click="emit('select-product', product)"
				>
					<view class="hmall-product-image-wrapper hmall-product-image-wrapper-fixed">
						<view class="hmall-product-image-placeholder"></view>
						<image
							:class="['hmall-product-image', isProductImageLoaded(product.id) ? 'hmall-product-image-loaded' : '']"
							:src="getProductCover(product)"
							@load="() => handleProductImageLoad(product.id)"
							@error="() => handleProductImageError(product.id)"
							mode="aspectFill"
						/>
					</view>
					<view class="hmall-product-body">
						<view v-if="getProductCardTags(product).length > 0" class="hmall-product-card-tags">
							<text
								v-for="(tag, tagIndex) in getProductCardTags(product)"
								:key="product.id + '-card-tag-' + tagIndex"
								class="hmall-product-card-tag"
							>
								{{ tag }}
							</text>
						</view>
						<text class="hmall-product-title">{{ getProductTitle(product) }}</text>
						<text v-if="getProductHighlight(product) != ''" class="hmall-product-highlight">{{ getProductHighlight(product) }}</text>
						<view v-if="getProductServiceTags(product).length > 0" class="hmall-product-service-tags">
							<text
								v-for="(tag, tagIndex) in getProductServiceTags(product)"
								:key="product.id + '-service-tag-' + tagIndex"
								class="hmall-product-service-tag"
							>
								{{ tag }}
							</text>
						</view>
						<view class="hmall-product-price-row">
							<text class="hmall-product-price-value">¥{{ formatProductPrice(product) }}</text>
							<text v-if="showMarketPrice(product)" class="hmall-product-market-price">¥{{ formatMarketPrice(product) }}</text>
						</view>
						<text v-if="getProductSalesText(product) != ''" class="hmall-product-sales">{{ getProductSalesText(product) }}</text>
					</view>
				</view>
			</view>

			<view v-else-if="pageLoading || loading" class="hmall-loading-state">
				<text class="hmall-loading-text">正在加载商品...</text>
			</view>

			<view v-else-if="!pageLoading" class="hmall-empty-wrap">
				<view v-if="emptyStateDescription != ''" class="hmall-empty-state-extended">
					<EmptyState :text="emptyStateTitle"></EmptyState>
					<text class="hmall-empty-desc">{{ emptyStateDescription }}</text>
				</view>
				<EmptyState v-else :text="emptyStateTitle"></EmptyState>
			</view>

			<view v-if="loading || showLoadMore" class="hmall-load-more-status">
				<text class="hmall-loading-text">正在加载更多商品...</text>
			</view>

			<view v-if="!hasMore && hotProducts.length > 0" class="hmall-feed-end-state">
				<text class="hmall-feed-end-text">已经到底了</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="uts">
import { ref, computed } from 'vue'
import EmptyState from '@/components/consumer/EmptyState.uvue'
import type { Category, Product } from '@/utils/supabaseService.uts'
import type { MarketingChannel, ChannelProduct, SimpleCategoryChannel } from '@/utils/mockChannelData.uts'

const failedProductImageIds = ref<string[]>([])
const failedChannelImageIds = ref<string[]>([])
const loadedProductImageIds = ref<string[]>([])

type SecondaryCategoryPage = {
	id: string
	items: Array<Category>
}

const props = defineProps({
	currentCategory: {
		type: String,
		default: 'recommend'
	},
	selectedSubCategoryId: {
		type: String,
		default: ''
	},
	secondaryCategoryDisplay: {
		type: Array<Category>,
		default: [] as Array<Category>
	},
	marketingChannels: {
		type: Array<MarketingChannel>,
		default: [] as Array<MarketingChannel>
	},
	categorySimpleChannels: {
		type: Array<SimpleCategoryChannel>,
		default: [] as Array<SimpleCategoryChannel>
	},
	hotProducts: {
		type: Array<Product>,
		default: [] as Array<Product>
	},
	pageLoading: {
		type: Boolean,
		default: false
	},
	loading: {
		type: Boolean,
		default: false
	},
	hasMore: {
		type: Boolean,
		default: true
	},
	showLoadMore: {
		type: Boolean,
		default: false
	},
	emptyStateTitle: {
		type: String,
		default: '当前分类暂无商品'
	},
	emptyStateDescription: {
		type: String,
		default: ''
	}
})

const emit = defineEmits<{
	(e: 'secondary-category-click', category: Category): void
	(e: 'select-channel', channel: MarketingChannel): void
	(e: 'select-simple-channel', channel: SimpleCategoryChannel): void
	(e: 'select-product', product: Product): void
}>()

const secondaryCategoryPages = computed((): Array<SecondaryCategoryPage> => {
	const pages: Array<SecondaryCategoryPage> = []
	const source = props.secondaryCategoryDisplay
	const pageSize = 10
	let pageIndex = 0

	while (pageIndex * pageSize < source.length) {
		const startIndex = pageIndex * pageSize
		const pageItems: Array<Category> = []
		for (let i = startIndex; i < source.length && i < startIndex + pageSize; i++) {
			pageItems.push(source[i])
		}
		pages.push({
			id: 'secondary-page-' + pageIndex.toString(),
			items: pageItems
		} as SecondaryCategoryPage)
		pageIndex = pageIndex + 1
	}

	return pages
})

function isImageIcon(icon: string): boolean {
	if (icon == '') {
		return false
	}
	return icon.indexOf('http') == 0 || icon.indexOf('/') == 0
}

function getCategoryDisplayIcon(category: Category): string {
	const icon = category.icon ?? ''
	if (icon != '' && !isImageIcon(icon)) {
		return icon
	}
	const name = category.name ?? ''
	return name != '' ? name.substring(0, 1) : '品'
}

function getChannelProductImage(product: ChannelProduct): string {
	if (failedChannelImageIds.value.indexOf(product.id) != -1) {
		return '/static/images/default.png'
	}
	return product.image != '' ? product.image : '/static/images/default.png'
}

function handleChannelProductImageError(productId: string): void {
	if (productId == '') {
		return
	}
	if (failedChannelImageIds.value.indexOf(productId) == -1) {
		failedChannelImageIds.value.push(productId)
	}
}

function getChannelProductTitle(product: ChannelProduct): string {
	if (product.shortName != null && product.shortName != '') {
		return product.shortName
	}
	if (product.name != null && product.name != '') {
		return product.name
	}
	return '商品补充中'
}

function getChannelProductTag(product: ChannelProduct): string {
	if (product.tag != null && product.tag != '') {
		return product.tag
	}
	return '活动价'
}

function getChannelSalePrice(product: ChannelProduct): number {
	return product.price > 0 ? product.price : 0
}

function getChannelMarketPrice(product: ChannelProduct): number {
	return product.marketPrice > 0 ? product.marketPrice : 0
}

function showChannelMarketPrice(product: ChannelProduct): boolean {
	return getChannelMarketPrice(product) > getChannelSalePrice(product)
}

function formatChannelPrice(price: number): string {
	const rounded = Math.round(price)
	if (Math.abs(price - rounded) < 0.001) {
		return rounded.toString()
	}
	return price.toFixed(1)
}

function getProductCover(product: Product): string {
	if (failedProductImageIds.value.indexOf(product.id) != -1) {
		return '/static/images/default.png'
	}
	if (product.main_image_url != null && product.main_image_url != '') {
		return product.main_image_url
	}
	if (product.images != null && product.images.length > 0 && product.images[0] != '') {
		return product.images[0]
	}
	if (product.image_url != null && product.image_url != '') {
		return product.image_url
	}
	return '/static/images/default.png'
}

function handleProductImageError(productId: string): void {
	if (productId == '') {
		return
	}
	handleProductImageLoad(productId)
	if (failedProductImageIds.value.indexOf(productId) == -1) {
		failedProductImageIds.value.push(productId)
	}
}

function handleProductImageLoad(productId: string): void {
	if (productId == '') {
		return
	}
	if (loadedProductImageIds.value.indexOf(productId) == -1) {
		loadedProductImageIds.value.push(productId)
	}
}

function isProductImageLoaded(productId: string): boolean {
	if (productId == '') {
		return false
	}
	return loadedProductImageIds.value.indexOf(productId) != -1
}

function getProductTitle(product: Product): string {
	if (product.short_title != null && product.short_title != '') {
		return product.short_title
	}
	if (product.name != null && product.name != '') {
		return product.name
	}
	return product.id
}

function getProductCardTags(product: Product): string[] {
	if (product.card_tags != null && product.card_tags.length > 0) {
		return product.card_tags.slice(0, 2)
	}
	const fallback: string[] = []
	if (product.is_hot == true) fallback.push('热卖')
	if (product.is_new == true && fallback.length < 2) fallback.push('新品')
	if (product.is_featured == true && fallback.length < 2) fallback.push('精选')
	return fallback
}

function getProductServiceTags(product: Product): string[] {
	if (product.service_tags != null && product.service_tags.length > 0) {
		return product.service_tags.slice(0, 3)
	}
	return [] as string[]
}

function getProductHighlight(product: Product): string {
	if (product.selling_points != null && product.selling_points.length > 0 && product.selling_points[0] != '') {
		return product.selling_points[0]
	}
	if (product.subtitle != null && product.subtitle != '') {
		return product.subtitle
	}
	return ''
}

function formatSaleCountText(saleCount: number): string {
	if (saleCount >= 100000) return '已售10万+'
	if (saleCount >= 10000) return '已售' + (saleCount / 10000).toFixed(1) + '万件'
	if (saleCount > 0) return '已售' + saleCount.toString() + '件'
	return ''
}

function getProductSalesText(product: Product): string {
	if (product.display_sales_text != null && product.display_sales_text != '') {
		return product.display_sales_text
	}
	const saleCount = product.sale_count ?? 0
	return formatSaleCountText(saleCount)
}

function formatProductPrice(product: Product): string {
	const price = product.base_price ?? product.price ?? 0
	return parseFloat(price.toString()).toFixed(2)
}

function formatMarketPrice(product: Product): string {
	const price = product.market_price ?? product.original_price ?? 0
	return parseFloat(price.toString()).toFixed(2)
}

function showMarketPrice(product: Product): boolean {
	const marketPrice = product.market_price ?? product.original_price ?? 0
	const salePrice = product.base_price ?? product.price ?? 0
	return marketPrice > 0 && marketPrice > salePrice
}
</script>

<style scoped>
.hmall-content {
	padding: 0 16rpx 0;
	box-sizing: border-box;
	background: #f5f5f5;
}


.hmall-secondary-shell {
	margin-top: 16rpx;
	margin-bottom: 14rpx;
	background: #ffffff;
	border-radius: 18rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.hmall-secondary-scroll {
	width: 100%;
	height: 176rpx;
}

.hmall-secondary-pages {
	display: flex;
	flex-direction: row;
	height: 176rpx;
}

.hmall-secondary-page {
	width: 718rpx;
	height: 176rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-left: 12rpx;
	padding-right: 12rpx;
	padding-top: 12rpx;
	padding-bottom: 8rpx;
	box-sizing: border-box;
	flex-shrink: 0;
}

.hmall-secondary-item {
	width: 20%;
	height: 78rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 4rpx;
	box-sizing: border-box;
}

.hmall-secondary-item-active {

}

.hmall-secondary-icon-wrap {
	width: 48rpx;
	height: 48rpx;
	border-radius: 16rpx;
	background: #f6f6f6;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-bottom: 6rpx;
	overflow: hidden;
}

.hmall-secondary-image {
	width: 48rpx;
	height: 48rpx;
	border-radius: 16rpx;
}

.hmall-secondary-icon-text {
	font-size: 26rpx;
	line-height: 1;
}

.hmall-secondary-name {
	font-size: 22rpx;
	color: #333333;
	line-height: 1.2;
	text-align: center;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hmall-secondary-item-active .hmall-secondary-name {
	color: #e1251b;
	font-weight: 700;
}

.hmall-recommend-section {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 8rpx 0 18rpx;
}

.hmall-recommend-card {
	width: 49%;
	border-radius: 22rpx;
	padding: 16rpx;
	min-height: 236rpx;
	margin-bottom: 14rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.04);
}

.hmall-recommend-header {
	display: flex;
	flex-direction: column;
}

.hmall-recommend-title-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.hmall-recommend-title {
	font-size: 30rpx;
	color: #202020;
	font-weight: 800;
	line-height: 1.2;
	margin-right: 8rpx;
}

.hmall-recommend-badge {
	font-size: 18rpx;
	border-width: 1rpx;
	border-style: solid;
	border-radius: 6rpx;
	padding: 2rpx 6rpx;
	line-height: 1.2;
	background: rgba(255, 255, 255, 0.72);
}

.hmall-recommend-subtitle {
	font-size: 22rpx;
	color: #777777;
	margin-top: 6rpx;
	line-height: 1.3;
}

.hmall-recommend-products {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 12rpx;
}

.hmall-recommend-product {
	width: 48%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hmall-recommend-product-image {
	width: 96rpx;
	height: 96rpx;
	border-radius: 12rpx;
	background-color: #ffffff;
}

.hmall-recommend-product-name {
	margin-top: 6rpx;
	font-size: 20rpx;
	color: #333333;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hmall-recommend-price-row {
	margin-top: 4rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.hmall-recommend-product-tag {
	font-size: 18rpx;
	margin-right: 4rpx;
}

.hmall-recommend-product-price {
	font-size: 23rpx;
	font-weight: 800;
	line-height: 1.2;
}

.hmall-recommend-market-price {
	margin-top: 4rpx;
	font-size: 18rpx;
	color: #999999;
	text-decoration: line-through;
}

.hmall-simple-section {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background: transparent;
	padding: 0;
	margin-bottom: 12rpx;
}

.hmall-simple-card {
	width: 49%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 22rpx 18rpx;
	min-height: 148rpx;
	background: #ffffff;
	border-radius: 22rpx;
	box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.03);
}

.hmall-simple-card-with-divider {
	border-right-width: 0;
}

.hmall-simple-left {
	flex: 1;
	padding-right: 12rpx;
	display: flex;
	flex-direction: column;
}

.hmall-simple-title-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.hmall-simple-icon {
	font-size: 24rpx;
	line-height: 1;
	color: #202020;
	margin-right: 6rpx;
}

.hmall-simple-title {
	font-size: 30rpx;
	line-height: 1.2;
	color: #202020;
	font-weight: 800;
}

.hmall-simple-subtitle {
	font-size: 22rpx;
	line-height: 1.2;
	color: #a0a0a0;
	margin-top: 10rpx;
}

.hmall-simple-cover-wrap {
	width: 116rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.hmall-simple-cover-slot {
	width: 54rpx;
	height: 54rpx;
	border-radius: 14rpx;
	overflow: hidden;
	background: #f5f5f5;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-bottom: 8rpx;
}

.hmall-simple-cover-image {
	width: 54rpx;
	height: 54rpx;
	border-radius: 14rpx;
}

.hmall-simple-cover-fallback {
	width: 54rpx;
	height: 54rpx;
	border-radius: 14rpx;
	background: #f5f5f5;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.hmall-simple-cover-text {
	font-size: 22rpx;
	line-height: 1;
	color: #555555;
	font-weight: 700;
}

.hmall-feed-divider {
	height: 20rpx;
	background: #f3f4f6;
	border-radius: 16rpx;
	margin-bottom: 12rpx;
}

.hmall-products-section {
	background: #f5f5f5;
	padding-bottom: 8rpx;
}

.hmall-products-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	background: #f5f5f5;
	margin-top: 0;
	min-height: 0;
	padding-bottom: 20rpx;
}

.hmall-product-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 18rpx;
	overflow: hidden;
	width: 49%;
	margin-bottom: 12rpx;
}

.hmall-products-grid-dense .hmall-product-card {
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
}

.hmall-product-image-wrapper {
	width: 100%;
	padding-bottom: 100%;
	position: relative;
	border-radius: 18rpx 18rpx 0 0;
	overflow: hidden;
	background: #f2f2f2;
}

.hmall-product-image-placeholder {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, #edf0f4 0%, #f9fbfd 48%, #edf0f4 100%);
	background-size: 220% 100%;
	animation: hmall-image-shimmer 1.35s ease-in-out infinite;
}

.hmall-product-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 18rpx 18rpx 0 0;
	opacity: 0;
	transition: opacity 220ms ease;
}

.hmall-product-image-loaded {
	opacity: 1;
}

.hmall-product-image-wrapper-fixed {
	padding-bottom: 100%;
	background: #f2f2f2;
}

.hmall-product-card-skeleton {
	background: #ffffff;
}

@keyframes hmall-image-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -20% 0;
	}
}

.hmall-product-body {
	padding: 14rpx 14rpx 16rpx;
	background: #ffffff;
}

.hmall-product-card-tags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 8rpx;
}

.hmall-product-card-tag {
	height: 28rpx;
	line-height: 28rpx;
	padding: 0 8rpx;
	border-radius: 8rpx;
	font-size: 18rpx;
	font-weight: 700;
	color: #fff7d1;
	background: #e1251b;
	margin-right: 6rpx;
	margin-bottom: 4rpx;
}

.hmall-product-title {
	font-size: 24rpx;
	color: #232323;
	line-height: 1.35;
	height: 64rpx;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hmall-product-highlight {
	font-size: 20rpx;
	line-height: 28rpx;
	color: #7a7a7a;
	margin-top: 6rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hmall-product-service-tags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 8rpx;
}

.hmall-product-service-tag {
	height: 28rpx;
	line-height: 28rpx;
	padding: 0 8rpx;
	border-radius: 8rpx;
	font-size: 18rpx;
	font-weight: 600;
	color: #12b76a;
	background: #ecfdf3;
	margin-right: 6rpx;
	margin-bottom: 4rpx;
}

.hmall-product-price-row {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	margin-top: 8rpx;
}

.hmall-product-price-value {
	font-size: 34rpx;
	line-height: 1;
	color: #ff1030;
	font-weight: 800;
}

.hmall-product-market-price {
	font-size: 20rpx;
	line-height: 1;
	color: #9a9a9a;
	text-decoration: line-through;
	margin-left: 8rpx;
	margin-bottom: 2rpx;
}

.hmall-product-sales {
	margin-top: 8rpx;
	font-size: 20rpx;
	color: #8a8a8a;
}

.hmall-loading-state,
.hmall-load-more-status,
.hmall-feed-end-state {
	padding: 28rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hmall-empty-wrap {
	background: #ffffff;
	border-radius: 18rpx;
	overflow: hidden;
}

.hmall-empty-state-extended {
	padding-bottom: 32rpx;
	align-items: center;
}

.hmall-empty-desc {
	margin-top: -8rpx;
	padding: 0 40rpx;
	font-size: 24rpx;
	line-height: 34rpx;
	color: #9a9a9a;
	text-align: center;
}

.hmall-loading-text,
.hmall-feed-end-text {
	font-size: 24rpx;
	color: #999999;
}
</style>