<template>
	<view class="page-c">
		<search-entry />
		<view class="page-c__crumb">
			<text class="page-c__path">{{ breadcrumb }}</text>
		</view>
		<goods-list-block
			v-if="categoryId"
			:category-id="categoryId"
			v-model:sort-by="sortBy"
			:scroll-height="goodsScrollHeight"
			@goods-click="onGoodsClick"
		/>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { DEFAULT_SORT_BY } from '@/constants/categorySort'
import SearchEntry from '@/components/mall/SearchEntry.vue'
import GoodsListBlock from '@/components/category/GoodsListBlock.vue'
import { goGoodsDetail } from '@/utils/goodsDetail'

const categoryId = ref('')
const level1Name = ref('')
const level2Name = ref('')
const sortBy = ref(DEFAULT_SORT_BY)
const goodsScrollHeight = ref('500px')

const breadcrumb = computed(() => {
	if (level1Name.value && level2Name.value) {
		return `${level1Name.value} > ${level2Name.value}`
	}
	return level2Name.value || level1Name.value || '商品列表'
})

function calcScrollHeight() {
	try {
		const sys = uni.getSystemInfoSync()
		const h = sys.windowHeight || 600
		goodsScrollHeight.value = `${h - 160}px`
	} catch (e) {
		goodsScrollHeight.value = '500px'
	}
}

function onGoodsClick(item) {
	goGoodsDetail(item.goodsId)
}

onLoad((options) => {
	categoryId.value = options.categoryId || ''
	level1Name.value = decodeURIComponent(options.level1Name || '')
	level2Name.value = decodeURIComponent(options.level2Name || '')
	const title = level2Name.value || '商品列表'
	uni.setNavigationBarTitle({ title })
	calcScrollHeight()
})
</script>

<style lang="scss" scoped>
.page-c {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 188rpx);
	background: #f5f6f8;
}
.page-c__crumb {
	padding: 8rpx 24rpx 16rpx;
	background: #fff;
}
.page-c__path {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}
</style>
