<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import img from "@/assets/images/collectionStory/Rectangle.png";
import myEvent from '@/utils/myEvent'


//const props = defineProps({
//})
//const emit = defineEmits([
//])
const router = useRouter()
let data = reactive({
})
const addShopping = (item) => {
	myEvent.emit('addShopping', item)
}
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="digitalItemDetail">
		<div class="center">
			<div class="img-list">
				<div class="title">
					<div>Sketch</div>
					<div>Illustration</div>
					<div>Product</div>
				</div>
				<div class="img">
					<div class="sketch">
						<img :src="img" v-for="item in 4" :key="item" alt="">
					</div>
					<div class="illustration">
						<img :src="img" v-for="item in 4" :key="item" alt="">
					</div>
					<div class="product">
						<img :src="img" v-for="item in 4" :key="item" alt="">
					</div>
				</div>
				
			</div>
			<div class="img-detail">
				<div class="back" @click="router.back()">
					<div class="icon">
						<svg-icon name="digital-back" size="28"></svg-icon>
					</div>
					<span>Back</span>
				</div>
				<div class="img-info">
					<div class="img-type">FEMALE / skirt, blouse, Outwear</div>
					<div class="img-name">Heritage Layered Set</div>
					<div class="img-price">$100 <span class="mini-scrollbar">HKD</span></div>
				</div>
				<div class="commodity">
					<div class="info">
						<img class="profile" :src="img" alt="">
						<div class="detail">
							<div class="name">Roaming Clouds</div>
							<div class="release-time">
								<span>Release in Feb 26, 2026</span>
							</div>
						</div>
					</div>
					<div class="introduce">
						This ensemble artfully merges traditional folk heritage with contemporary tailoring, creating a timeless silhouette that honors ancestral craftsmanship while embracing modern sophistication.
					</div>
				</div>
				<div class="notice">
					<div class="title">Copyright & License Notice</div>
					<div class="conter">
						<div class="contet-title">
							<div class="icon">
								<svg-icon name="digital-Info" size="24"></svg-icon>
							</div>
							<span>License Included in Asset</span>
						</div>
						<div class="info">
							All products on this platform are digital assets, not physical goods. Purchase grants a usage license only; copyright and intellectual property rights remain with the original creator, unless otherwise stated.
						</div>
					</div>
				</div>
				<div class="button">
					<div class="buy-now">Buy Now</div>
					<div class="add-cart" @click="addShopping(item)">
						<div class="icon">
							<svg-icon name="cart_0" size="24"></svg-icon>
						</div>
						Add to Cart 
					</div>
				</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>
<style lang="less" scoped>
	:deep(.el-drawer__body){
		--el-drawer-padding-primary: 2.4rem 3.4rem 2.4rem 6rem;
	}
	.digitalItemDetail{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		.center{
			flex: 1;
			display: flex;
			overflow: hidden;
			.img-list{
				display: flex;
				flex: 1;
				flex-direction: column;
				--row-width: 33.333%;
				// --row-width: 29.3rem;
				overflow-y: auto;
				&::-webkit-scrollbar{
					display: none;
				}
				> .title{
					display: flex;
					position: sticky;
					top: 0;
					> div{
						width: var(--row-width);
						line-height: 8.6rem;
						padding-left: 2.4rem;
						border-right: 0.5px solid #C4C4C4;
						font-weight: 500;
						font-size: 1.6rem;
						background-color: #f5f5f5;
						&:last-child{
							border: none;
						}
					}
				}
				> .img{
					display: flex;
					
					> div{
						display: flex;
						width: var(--row-width);
						border-right: 0.5px solid #C4C4C4;
						flex-direction: column;
						&:last-child{
							border: none;
						}
					}
				}
			}
			.img-detail{
				border-left: 0.5px solid #585858;
				padding-left: 3.2rem;
				width: 57rem;
				display: flex;
				flex-direction: column;
				overflow-y: auto;
				&::-webkit-scrollbar{
					display: none;
				}
				.back{
					display: flex;
					margin-top: 2.8rem;
					gap: 1.4rem;
					align-items: center;
					width: min-content;
					cursor: pointer;
					> span{
						font-weight: 500;
						font-size: 1.6rem;
						line-height: 120%;
					}
				}
				.img-info{
					margin-top: 2.8rem;
					.img-type{
						font-weight: 500;
						font-size: 1.2rem;
						line-height: 120%;
						color: #808080;
						margin-bottom: 1rem;
					}
					.img-name{
						font-family: KaiseiOpti-Bold;
						font-weight: 700;
						font-size: 3rem;
						line-height: 120%;
						margin-bottom: 1rem;
					}
					.img-price{
						font-family: KaiseiOpti-Bold;
						font-weight: 700;
						font-size: 3rem;
						line-height: 120%;
						> span{
							font-weight: 500;
							font-size: 2rem;
							line-height: 120%;
							color: #585858;
						}
					}
				}
				.commodity{
					margin-top: 4rem;
					.info{
						display: flex;
						gap: 1.4rem;
						margin-bottom: 1.4rem;
						> .profile{
							width: 5.4rem;
							height: 5.4rem;
							object-fit: cover;
						}
						> .detail{
							.name{
								text-decoration: underline;
								font-weight: 500;
								font-size: 1.8rem;
								line-height: 100%;
								margin-bottom: .8rem;
							}
							.release-time{
								font-family: KaiseiOpti-Regular;
								font-weight: 400;
								font-size: 1.4rem;
								line-height: 140%;
								color: #585858;
								display: flex;
								align-items: center;
								
							}
						}
					}
					.introduce{
						font-family: KaiseiOpti-Regular;
						font-weight: 400;
						font-size: 14px;
						line-height: 140%;
						color: #585858;
						width: 50.8rem;
					}
				}
				.notice{
					margin-top: 6rem;
					.title{
						margin-bottom: 1rem;
						font-weight: 500;
						font-size: 1.8rem;
						line-height: 140%;
					}
					.conter{
						width: 50.8rem;
						background-color: #f6f6f6;
						padding: 2rem;
						.contet-title{
							margin-bottom: 1.2rem;
							display: flex;
							gap: .8rem;
							align-items: center;
							> span{
								font-family: KaiseiOpti-Regular;
								font-weight: 400;
								font-size: 1.4rem;
								line-height: 140%;
							}
						}
						.info{
							font-family: KaiseiOpti-Regular;
							font-weight: 400;
							font-size: 1.2rem;
							line-height: 140%;
							color: #585858;
						}
					}
				}
				.button{
					width: 50.8rem;
					margin-top: auto;
					> div{
						width: 100%;
						font-weight: 500;
						font-size: 1.6rem;
						line-height: 120%;
						letter-spacing: 3%;
						border: 1px solid #232323;
						line-height: 4.8rem;
						cursor: pointer;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 2rem;
					}
					.buy-now{
						background-color: #232323;
						color: #fff;
					}
					.add-cart{
						background-color: #fff;
						color: #000;
					}
				}
			}
		}
	}
</style>