<script setup lang="ts">
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
	modelList: 
	[
		{
			id:1,
			imgUrl:'https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T012922Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=e5bfc4ad3a9dbad5ea3bbe82a4ba9e081bcc14520269e7a1534bca30871774a4',
		},
		{
			id:2,
			imgUrl:'https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T012922Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=e5bfc4ad3a9dbad5ea3bbe82a4ba9e081bcc14520269e7a1534bca30871774a4',
		},
		{
			id:3,
			imgUrl:'https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T012922Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=e5bfc4ad3a9dbad5ea3bbe82a4ba9e081bcc14520269e7a1534bca30871774a4',
		},
		{
			id:4,
			imgUrl:'https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T012922Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=e5bfc4ad3a9dbad5ea3bbe82a4ba9e081bcc14520269e7a1534bca30871774a4',
		},
		{
			id:5,
			imgUrl:'https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T012922Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=e5bfc4ad3a9dbad5ea3bbe82a4ba9e081bcc14520269e7a1534bca30871774a4',
		},
		{
			id:6,
			imgUrl:'https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T012922Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=e5bfc4ad3a9dbad5ea3bbe82a4ba9e081bcc14520269e7a1534bca30871774a4',
		},

	],
	selectedModelId: null,
})

const setSelectedModelId = (item)=>{
	data.selectedModelId = item.id;
}

onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const { modelList, selectedModelId } = toRefs(data);
</script>
<template>
	<div class="selectModel">
		<div class="text">
			<div class="title">
				Pick a Model Photo!
			</div>
			<div class="info">
				Try one of our sample images
			</div>
		</div>
		<div class="selectContent">
			<div class="modelList">
				<div v-for="item in modelList" :key="item.id" class="item" @click.stop="setSelectedModelId(item)">
					<img :src="item.imgUrl" alt="">
					<div class="icon" v-if="item.id == selectedModelId">
						<SvgIcon  name="modelSelected" size="60" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.selectModel{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		> .text{
			text-align: center;
			width: 100%;
			margin-top: 7rem;
			margin-bottom: 4rem;
			> .title{
				font-family: satoshiBold;
				font-weight: 700;
				font-size: 9.6rem;
				line-height: 124%;
			}
			> .info{
				font-size: 4rem;
				font-weight: 400;
				line-height: 124%;
				margin-top: 1.3rem;
			}
		}
		> .selectContent{
			flex: 1;
			overflow-y: auto;
			padding: 0 11.8rem;
			> .modelList{
				padding: .6rem 2rem;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				> .item{
					width: calc((100% - 2.5rem * 2) / 3);
					border: 2px solid #D9D9D9;
					border-radius: 1rem;
					margin-bottom: 5.4rem;
					height: 75rem;
					> img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					> .icon{
						position: absolute;
						width: 6rem;
						height: 6rem;
						bottom: -1.8rem;
						right: -2.1rem;
					}
				}
			}
		}
	}
</style>