<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { getlistingListApi } from "@/api/listing";

const props = defineProps({
	id: {
		type: String,
		default: ''
	}
})
const emit = defineEmits([
	'addShopping','openDetail'
])
const getMerchantData = reactive({
	pageSize: 10,
	pageNum: 1,
	isShowMark:false,
	isNoData:false,
})
const listingList = ref([
])
const type = ref('all')
const addShopping = (item) => {
	emit('addShopping', item)
}
const setType = (val) => {
	type.value = val
	listingList.value = []
	getMerchantData.pageNum = 1
	getMerchantData.isShowMark = false
	getMerchantData.isNoData = false
}
const vObserve  = {
	mounted (el,binding) {
		getMerchantData.isShowMark = false
		getMerchantData.isNoData = false
		new IntersectionObserver(
		(entries, observer) => {
				// 如果不是相交，则直接返回
				// console.log(entries[0]);
				if (!entries[0].intersectionRatio) return;
				binding.value()
				getMerchantData.pageNum += 1
			},
			// { root:worksPage }
		).observe(el);
	}
}
const getListingList = () => {
	getMerchantData.isShowMark = true
	getMerchantData.isNoData = false
	getlistingListApi({
		sellerId: props.id,
		designFor: type.value,
		pageNum: getMerchantData.pageNum,
		pageSize: getMerchantData.pageSize,
	}).then((res)=>{
		if(res.content.length == 0)getMerchantData.isNoData = true
		listingList.value.push(...res.content)
		getMerchantData.isShowMark = false
	})
}
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
</script>
<template>
	<div class="commodityList">
		<div class="header">
			<div class="title">
				Items
			</div>
			<div class="menu">
				<div :class="{'active': type === 'all'}" @click="setType('all')">{{ $t('brandDetail.All') }}</div>
				<div :class="{'active': type === 'male'}" @click="setType('male')">{{ $t('Wardrobe.assets.genders.male') }}</div>
				<div :class="{'active': type === 'female'}" @click="setType('female')">{{ $t('Wardrobe.assets.genders.female') }}</div>	
			</div>
		</div>
		<div class="list">
			<div class="item" v-for="item in listingList" :key="item.url">
				<CommodityItem :url="item.cover" :name="item.title" :price="item.price" @addShopping="addShopping(item)" @openDetail="$emit('openDetail', item)"></CommodityItem>
			</div>
			<div v-show="!getMerchantData.isNoData" class="material_content_list_loding">
				<span class="page_loading" v-show="!getMerchantData.isShowMark" v-observe="getListingList"></span>
				<img v-if="getMerchantData.isShowMark" src="@/assets/images/brand/brandLoading.gif" alt="">
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.commodityList{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		.header{
			// position: sticky;
			// top: 0;
			z-index: 2;
			background-color: #fff;
			.title{
				font-family: "KaiseiOpti-Bold";
				font-weight: 700;
				font-size: 3.6rem;
				line-height: 6rem;
				color: #121212;
				padding: 4rem 0 3.6rem 1.2rem;
			}
			.menu{
				padding: 0 1.2rem;
				display: flex;
				gap: 2rem;
				margin-bottom: 6rem;
				> div{
					min-width: 6rem;
					text-align: center;
					font-family: "KaiseiOpti-Bold";
					font-weight: 700;
					font-size: 1.98rem;
					line-height: 100%;
					position: relative;
					color: #7B7B7B;
					cursor: pointer;
					&::after{
						content: '';
						position: absolute;
						bottom: -5px;
						left: 0;
						display: block;
						width: 100%;
						border-bottom: 1px solid #232323;
						display: none;
					}
					&.active{
						color: #232323;
						&::after{
							display: block;
						}
					}
				}
			}
		}
		.list{
			width: 100%;
			flex: 1;
			// display: grid;
			// align-content: start;
			// grid-template-columns: repeat(3, 1fr);
			overflow: hidden;
			display: grid;
			align-content: start;
			grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
			border-top: 0.5px solid #585858;
			padding: .5px 0 0 .5px;
			/* 垂直线（右边框） */
			.item{
				position: relative;
				padding: 1.2rem;
				border-bottom: 0.5px solid #585858;
				border-right: 0.5px solid #585858;
				margin-right: -1px;
				margin-bottom: -1px;
			}
			> .material_content_list_loding{
				width: 100%;
				height: 5rem;
				aspect-ratio: 1/1;
				grid-column: 1 / -1;
				overflow: hidden;
				display: flex;
				flex-shrink: 0;
				justify-content: center;
				> .page_loading{
					width: 5rem;
					height: 5rem;
				}
				> img{
					width: 5rem;
					height: 5rem;
					object-fit: contain;
				}
			}
		}
	}
</style>