lanecarford_front/src/components/selectStyle/selectItem.vue

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

const setLike = (item,str)=>{
	if(str === 'like'){
		item.isLike = true
	}else{
		item.isLike = false
	}
}

const setSelectList = (item)=>{
	if(item.status == 'SUCCEEDED')emit('selectItem', item)
}

const deleteStyle = (index)=>{
	props.selectList.splice(index,1)
}

const updateStyle = (item,index)=>{
	if(!['RUNNING','PENDING'].includes(item.status))emit('updateStyle', {item,index})
}

const vLoading = {
	mounted: (el: HTMLElement, binding: any) =>{
		binding.value.timer = ()=>{
			setTimeout(()=>{
				binding.value.isLoading = true
			},5000)
		}
		binding.value.timer()
	},
	unmounted(el: HTMLElement, binding: any) {
		binding.value.isLoading = false
		clearTimeout(binding.value.timer)
	}
}

onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="list">
		<div class="item" v-for="(item,index) in selectList" :key="item.id">
			<div class="title">look {{ index + 1 }}</div>
			<div class="imgBox" @click="setSelectList(item)">
				<img v-if="item?.path" :src="item?.path" alt="">
				<div v-else v-loading="item">
					<van-loading size="20rem"/>
					<span v-if="item?.isLoading" style="font-size: 2.8rem;">
						Still generating...
					</span>
				</div>
				<!-- <img v-for="(img,index) in item?.imgList" :key="index" :src="img" alt=""> -->
				<div class="icon" v-if="item.id == select?.id">
					<SvgIcon  name="modelSelected" size="60" />
				</div>
				<div class="mask running" v-if="item.status == 'RUNNING'">
					<van-loading type="spinner" size="20rem"/>
				</div>
				<div class="mask failed" v-if="item.status == 'FAILED'">
					Generation failed. Please click refresh to try again.
				</div>
				<div class="mask" v-if="item.id == select?.oldId"></div>
			</div>
			<!-- <div class="btn">
				<div>
					<SvgIcon @click.stop="updateStyle(item,index)" name="update" size="30" />
				</div>
			</div> -->
		</div>
		
	</div>
</template>
<style lang="less" scoped>
	.list{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		justify-content: space-between;
		> .item{
			width: calc(50% - 3.5rem / 2);
			position: relative;
			// margin-bottom: 3.3rem;
			display: flex;
			flex-direction: column;
			> .title{
				font-size: 3.44rem;
				font-weight: 700;
				color: #000;
				font-family: 'satoshiMedium';
			}
			> .imgBox{
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				height: 45rem;
				margin: 2.3rem 0;
				background-color: #fff;
				justify-content: center;
				border: .6px solid #acacac;
				border-radius: 1.3px;
				position: relative;
				> .mask{
					position: absolute;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.5);
					top: 0;
					left: 0;
					&.failed{
						color: #fff;
						font-size: 2rem;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.van-loading {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 100%;
					}
				}
				> .icon{
					position: absolute;
					width: 6rem;
					height: 6rem;
					bottom: -1.8rem;
					right: -2.1rem;
				}
				> img{
					// height: 26rem;
					width: 100%;
					height: 100%;
					// object-fit: cover;
					object-fit: contain;
					// max-width: 50%;
					// max-height: 50%;
				}
			}
			// > .btn{
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: flex-end;
			// 	> div{
			// 		color: #000;
			// 		margin-right: 1.2rem;
			// 		border-radius: 50%;
			// 		width: 5.2rem;
			// 		height: 5.2rem;
			// 		padding: 1rem;
			// 		background-color: #fff;
			// 		&:last-child{
			// 			margin-right: 0rem;
			// 		}
			// 		&:hover{
			// 			color: #000;
			// 		}
			// 	}
			// }
		}
	}
</style>