<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import GenerateItem from './generateItem.vue'

const props = defineProps({
	generateData:{
		type:Object,
		default:()=>{
			return {
				list:[]
			}
		},
	},
})
const emit = defineEmits([
	'sketchRestore',
	'sketchDelete',
])
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="generateSketch">
		<div v-for="item in generateData.list" :key="item.id" class="item">
			<GenerateItem :item="item" @sketchRestore="()=>emit('sketchRestore',item)" @sketchDelete="()=>emit('sketchDelete',item)" />
		</div>
	</div>
</template>

<style lang="less" scoped>
	.generateSketch{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		gap: 1.2rem;
		.item{
			width: calc((100% - 1.2rem * 3) / 4);
			//设置比例属性 1 / 1
			aspect-ratio: 1 / 1;
			background-color: #fff;
			border-radius: 1.6rem;
			overflow: hidden;
		}
	}
</style>