<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
const props = defineProps({
	item: {
		type: Object,
		default: () => ({})
	} as any,
})
const emit = defineEmits([
	'sketchRestore','sketchDelete'
])
let data = reactive({
})

const morePopoverRef = ref(null)
const handleClick = ()=>{
	morePopoverRef.value?.hide()
}

const sketchRestore = ()=>{
	emit('sketchRestore')
	handleClick()
}
const sketchDelete = ()=>{
	emit('sketchDelete')
	handleClick()
}

onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="generateItem">
		<div v-if="item.type === 'waiting'" class="waitingItem">
			<img src="@/assets/images/sketchGenerateLaoding.gif" alt="">
			<!-- <el-spinner style="display: inline-block;" /> -->
		</div>
		
		<div v-else-if="item.type === 'success'" class="successItem">
			<img :src="item.img" alt="">
			<div class="more">
				<el-popover
					width="10rem"
					min-width="10rem"
					ref="morePopoverRef"
					trigger="click"
					popper-class="moreBox"
					placement="bottom-end"
				>
					<template #reference>
						<span class="icon"><svg-icon name="more" size="25" /></span>
					</template>
					<template #default>
						<div class="item" @click="sketchRestore">
							<div class="icon">
								<SvgIcon name="sketchRestore" size="14" />
							</div>
							<span>{{ $t('generateSketch.restore') }}</span>
						</div>
						<div class="item delete" @click="sketchDelete">
							<div class="icon">
								<SvgIcon name="sketchDelete" size="14" />
							</div>
							<span>{{ $t('generateSketch.delete') }}</span>
						</div>
					</template>
				</el-popover>
			</div>
			<div class="edit" @click="$emit('edit')">
				<span>{{ $t('generateSketch.edit') }}</span>
				<div class="icon">
					<SvgIcon name="generateSketchEdit" size="7" />
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="less">
	.el-popover.el-popper.moreBox{
		border-radius: 1rem;
		padding: .6rem .7rem;
		min-width: 10rem;
		.item{
			display: flex;
			cursor: pointer;
			border-radius: .4rem;
			align-items: center;
			padding: .6rem .7rem;
			margin-bottom: 1.2rem;
			&.delete{
				margin-bottom: 0rem;
				color: #ff4747;
			}
			&:hover{
				background-color: #f6f6f6;
			}
			> .icon{
				margin-right: .7rem;
			}
			> span{
				color: #000;
				font-weight: 500;
				font-size: 1.3rem;
				line-height: 100%;
			}
		}
	}
</style>
<style lang="less" scoped>
	.generateItem{
		width: 100%;
		height: 100%;
		position: relative;
		> div{
			position: relative;
		}
		> .waitingItem,.successItem{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
		}
		> .waitingItem{
			> img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		> .successItem{
			> .more{
				position: absolute;
				top: 1.2rem;
				right: 1.2rem;
				transition: all .3s;
				border-radius: .3rem;
				&:hover{
					background-color: #e8e8e8;
				}
				.icon{
					width: 2.4rem;
					height: 2.4rem;
					cursor: pointer;
				}
			}
			> .edit{
				position: absolute;
				bottom: 1rem;
				right: 1rem;
				border-radius: 2rem;
				border: 2px solid #e5e5e5;
				background-color: #fff;
				display: flex;
				justify-content: center;
				padding: .65rem 1.2rem;
				cursor: pointer;
				> span{
					margin-right: .6rem;
					font-weight: 500;
					font-size: 1.4rem;
					line-height: 100%;
				}
			}
		}
	}
</style>