<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'
import { getListingDetailApi } from '@/api/listing'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'	
import { AddShoppingCart } from '@/api/shoppingCart'
import { CreateOrder } from '@/api/shoppingCart'


//const props = defineProps({
//})
//const emit = defineEmits([
//])
const route = useRoute()
const { t } = useI18n()

const router = useRouter()
let detail:any = ref({
	description: '',
	title: '',
	price: '',
	shopName: '',
	updateTime: '',
	gender: '',
	sellerId: '',
})
const sketchList = ref([])
const illustrationList = ref([])
const productList = ref([])
const editorialVisualList = ref([])
const addShopping = () => {
	if(!detail.value.price) return ElMessage.warning(t('brandDetail.addShoppingTip'))
	let data = {
		cover: detail.value.images.cover[0],
		price: detail.value.price,
		shopName: detail.value.shopName,
		title: detail.value.title,
		id: detail.value.id,
	}
	AddShoppingCart({listingIds:[detail.value.id]}).then((res)=>{
		myEvent.emit('addShopping', data)
	})
}


const goShopping = () => {
	if(!detail.value.price) return ElMessage.warning(t('brandDetail.addShoppingTip'))
	CreateOrder(
		[detail.value.id],true
	).then((res)=>{
		// if(res)router.push({path: '/shoppingCart')
	})
	// router.push({path: '/shoppingCart'})
}
const setImgList = (list)=>{
	sketchList.value = list?.apparel?.map((item:any) => {return {imgUrl:item}})
	illustrationList.value = list?.sketch?.map((item:any) => {return {imgUrl:item}})
	productList.value = list?.main_product?.map((item:any) => {return {imgUrl:item}})

	editorialVisualList.value = list.product.map((item:any) => {return {imgUrl:item}})
	if(list.firstFrame){
		list.firstFrame.forEach((item:any,index) => {
			editorialVisualList.value.push({
				imgUrl:item,
				gif: list.gif[index],
				video: list.video[index],
			})
		})
	}
}
const getListingDetail = ()=>{
	getListingDetailApi({
		id:route.params.id + '',
	}).then((res)=>{
		if(res)detail.value = res
		setImgList(res.images)
	})
}
const gobrand = () => {		
	if(!detail.value.sellerId)return
	router.push({path: `/brand/${detail.value.sellerId}`})
}
// const vObserve  = {
// 	mounted (el,binding) {
// 	},
// 	unmounted (el,binding) {	
// 	}
// }
onMounted(()=>{
	getListingDetail()
})
onUnmounted(()=>{
})
defineExpose({})
</script>
<template>
	<div class="digitalItemDetail">
		<div class="center">
			<div class="img-list">
				<div class="left">
					<div class="title">{{ $t('digitalDetail.Sketch') }}</div>
					<div class="box sketch">
						<div class="imgBox">
							<img :src="item?.imgUrl" v-for="item in sketchList" :key="item" alt="">
						</div>
					</div>
				</div>
				<div class="right">
					<div class="top">
						<div class="box">
							<div class="title">{{ $t('digitalDetail.Illustration') }}</div>
							<div class="imgBox">
								<img :src="item?.imgUrl" v-for="item in illustrationList" :key="item" alt="">
							</div>
						</div>
						<div class="box">
							<div class="title">{{ $t('digitalDetail.Product') }}</div>
							<div class="imgBox">
								<img :src="item?.imgUrl" v-for="item in productList" :key="item" alt="">
							</div>
						</div>
					</div>
					<div class="bottom">
						<div class="box aa">
							<div class="title">{{ $t('digitalDetail.EditorialVisual') }}</div>
							<div class="imgBox">
								<img :src="item?.gif||item?.imgUrl" v-for="item in editorialVisualList" :key="item" alt="">
							</div>
						</div>
					</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>{{ $t('digitalDetail.Back') }}</span>
				</div>
				<div class="img-info">
					<div class="img-type">{{ detail.designFor?.toUpperCase() || ''}} / {{ detail.productCategory?.join(',')?.toUpperCase() || '' }}</div>
					<div class="img-name">{{ detail.title }}</div>
					<div class="img-price" v-if="detail.price">¥{{ detail.price }} <span class="mini-scrollbar">HKD</span></div>
				</div>
				<div class="commodity">
					<div class="info">
						<img class="profile" v-avatarLoad="detail.avatar" alt="">
						<div class="detail">
							<div class="name" @click="gobrand">{{ detail.shopName }}</div>
							<div class="release-time">
								<span>{{ $t('digitalDetail.ReleaseIn') }} {{ detail.updateTime }}</span>
							</div>
						</div>
					</div>
					<div class="introduce">
						{{ detail.description }}
					</div>
				</div>
				<div class="notice">
					<div class="title">{{ $t('digitalDetail.CopyrightLicenseNotice') }}</div>
					<div class="conter">
						<div class="contet-title">
							<div class="icon">
								<svg-icon name="digital-Info" size="24"></svg-icon>
							</div>
							<span>{{ $t('digitalDetail.LicenseIncludedInAsset') }}</span>
						</div>
						<div class="info">
							{{ $t('digitalDetail.LicenseIncludedInAssetInfo') }}
						</div>
					</div>
				</div>
				<div class="button">
					<div class="buy-now" @click="goShopping">{{ $t('digitalDetail.BuyNow') }}</div>
					<div class="add-cart" @click="addShopping()">
						<div class="icon">
							<svg-icon name="cart_0" size="24"></svg-icon>
						</div>
						{{ $t('digitalDetail.AddToCart') }}
					</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{
				flex: 1;
				display: grid;
				grid-template-columns: 1fr 2fr;
				--row-width: 33.333%;
				align-items: stretch;
				// --row-width: 29.3rem;
				overflow-y: auto;
				position: relative;
				&::-webkit-scrollbar{
					display: none;
				}
				.title{
					width: 100%;
					line-height: 8.6rem;
					padding-left: 2.4rem;
					font-weight: 500;
					font-size: 1.6rem;
					background-color: #f5f5f5;
					position: sticky;
					top: 0;
				}
				.box{
					flex: 1;
					.imgBox{
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						img{
							width: 100%;
						}
					}
					
				}
				> .left{
					border-right: 0.5px solid #C4C4C4;
					.imgBox{
						padding: 0 3rem;
					}
				}
				> .right{
					position: relative;
					&::after{
						content: '';
						display: block;
						border-right: 0.5px solid #C4C4C4;
						position: absolute;
						height: 100%;
						left: 50%;
						top: 0;
						z-index: 2;
					}
					> .top{
						display: flex;
					}
					> .bottom{
						.imgBox{
							display: flex;
							img{
								width: 50%;
							}
						}
					}
				}
			}
			.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;
						cursor: pointer;
					}
					.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>