<template>
	<div
		class="preview-container flex"
		:class="type === 'sketch' ? 'sketch-preview' : 'report-preview'"
	>
		<template v-if="type === 'sketch'">
			<div class="sketch-item" v-for="item in 12">
				<Menu class="menu-btn" @click="handleClickMenu" />
				<div class="edit-btn flex align-center space-between" @click="handleClickEdit">
					<div>Edit</div>
					<img src="@/assets/images/arrow-top-right.png" alt="" />
				</div>
				<img :src="LoadingImg" alt="" />
			</div>
		</template>
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import Menu from './Menu.vue'
  import LoadingImg from '@/assets/images/sketch-loading.gif'

	const props = withDefaults(
		defineProps<{
			type: 'sketch' | 'report'
		}>(),
		{
			type: 'sketch'
		}
	)


  const handleClickEdit = () => {
    // 编辑按钮点击逻辑
    console.log('Edit button clicked')
  }
  const handleClickMenu = () => {
    // 菜单按钮点击逻辑
    console.log('Menu button clicked')
  }


</script>

<style lang="less" scoped>
	.preview-container {
		gap: 1.2rem;
		flex-wrap: wrap;
		.sketch-item {
			position: relative;
			&,
			img {
				width: 21.9rem;
				height: 21.9rem;
				border-radius: 1.6rem;
			}
			.menu-btn {
				position: absolute;
				top: 2.1rem;
				right: 1.5rem;
			}
			.edit-btn {
				position: absolute;
				right: 1rem;
				bottom: 1.1rem;
				width: 7.8rem;
				height: 3.59rem;
				border-radius: 2rem;
				background-color: #fff;
				border: 0.2rem solid #e5e5e5;
				font-family: 'GeneralMedium';
				font-size: 1.4rem;
        padding: 0 0.9rem 0 1.4rem;
        cursor: pointer;
        img{
          width: 1.8rem;
          height: 1.8rem;
        }
			}
		}
	}
</style>
