<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import img from "@/assets/images/collectionStory/Rectangle.png";
//const props = defineProps({
//})
const emit = defineEmits([
	'addShopping',
	'openDetail'
])
let data = reactive({
})
const list = ref([
	{
		url: img,
		title: "Windswept Burden",
		price: "$100.00",
	},{
		url: img,
		title: "Windswept Burden",
		price: "$100.00",
	},{
		url: img,
		title: "Windswept Burden",
		price: "$100.00",
	},{
		url: img,
		title: "Windswept Burden",
		price: "$100.00",
	},{
		url: img,
		title: "Windswept Burden",
		price: "$100.00",
	},{
		url: img,
		title: "Windswept Burden",
		price: "$100.00",
	},{
		url: img,
		title: "Windswept Burden",
		price: "$100.00",
	},{
		url: img,
		title: "Windswept Burden",
		price: "$100.00",
	},
])
const type = ref('All')
const addShopping = (item) => {
	emit('addShopping', item)
}
const openDetail = (item) => {
	emit('openDetail', item)
}
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="commodityList">
		<div class="list">
			<div class="item" v-for="item in list" :key="item.url">
				<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)" @openDetail="openDetail(item)"></CommodityItem>
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.commodityList{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		.list{
			width: 100%;
			flex: 1;
			display: grid;
			align-content: start;
			grid-template-columns: repeat(3, 1fr);
			overflow-y: auto;
			/* 垂直线（右边框） */
			.item{
				position: relative;
				padding: 1.2rem;
				--commodity-marginBottom: 2rem;
				--commodity-name-fontSize: 2rem;
				--commodity-name-marginBottom: .8rem;
				--commodity-price-fontSize: 1.6rem;
			}
			.item::before {
				content: '';
				position: absolute;
				right: 0;
				top: 0;
				height: 100%;
				border-right: 0.5px solid #585858;
				z-index: 1;
			}

				/* 水平线（下边框） */
			.item::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				border-bottom: 0.5px solid #585858;
				z-index: 1;
			}
				/* 移除最后一列的右边框 */
			.item:nth-child(3n)::before {
				display: none;
			}
		}
	}
</style>