<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: hidden;

			display: grid;
			align-content: start;
			grid-template-columns: repeat(auto-fit, 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;
			}
		}
	}
</style>