<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
const props = defineProps({
	item:{
		type:Object,
		default:()=>{},
	},
})
const emit = defineEmits([
	'viewProfile',
])
const viewProfile = (item) => {
	emit('viewProfile', item)
}
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="item">
		<div class="left">
			<div class="portrait">
				<img :src="item.avatar" alt="">
			</div>
			<div class="info">
				<div class="name">{{ item.shopName }}</div>
				<div class="collection">
					{{ item.ownerName }} | 
					{{ item?.listingTotal || 0 }} Collections
				</div>
				<div class="view-profile" @click="viewProfile(item)">View Profile</div>
			</div>
		</div>
		<div class="right">
			<div class="img-list">
				<div class="img-item" v-for="itemImg in item?.covers" :key="itemImg">
					<img :src="itemImg" alt="">
				</div>
			</div>
			<div class="more">
				<div class="icon" v-show="item?.covers?.length == 5">
					<svgIcon name="brand-more" size="24" />
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.item{
		display: flex;
		width: 100%;
		height: 14rem;
		justify-content: space-between;
		border-bottom: 0.5px solid #C4C4C4;
		> .left{
			display: flex;
			.portrait{
				width: 8rem;
				height: 8rem;
				margin-right: 2.4rem;
				> img{
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
			.info{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				> .name{
					font-family: "KaiseiOpti-Bold";
					font-weight: 700;
					font-size: 2rem;
					line-height: 100%;
				}
				> .collection{
					color: #7B7B7B;
					font-family: "KaiseiOpti-Regular";
					font-weight: 400;
					font-size: 1.2rem;
					line-height: 2.3rem;
					margin-top: .4rem;
				}
				> .view-profile{
					margin-top: 2.4rem;
					border-bottom: 2px solid #585858;
					background: #F9F9F9;
					font-family: "KaiseiOpti-Regular";
					font-weight: 400;
					font-size: 1.4rem;
					letter-spacing: -0.4px;
					line-height: 3.4rem;
					padding: 0 2.55rem;
					cursor: pointer;
				}
			}
		}
		> .right{
			display: flex;
			> .img-list{
				display: flex;
				gap: 3.2rem;
				> .img-item{
					width: 9.2rem;
					height: 12rem;
					img{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}
			> .more{
				width: 8rem;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>