<template>
	<div
		class="sc-item"
		:class="{
			'is-order-actions-layout': orderActionsLayout,
			disabled
		}"
	>
		<slot name="checkbox" />
		<img :src="info.cover" />
		<div class="content">
			<div class="title">{{ info.title }}</div>
			<div class="brand" v-if="showBrand" @click="handleBrandClick">
				<span class="icon"><svg-icon name="order-shop" size="24" /></span>
				<span class="text">{{ info.brand }}</span>
			</div>
			<div class="tags" v-if="showTags">
				<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
			</div>
			<div class="date" v-if="showDate">
				<div class="text">
					{{ FormatDate(info.date, $t('ShoppingCart.dateTimeFormat')) }}
				</div>
			</div>
		</div>
		<div class="right">
			<div class="unshelve" v-show="disabled">
				<div class="title">
					<span><svg-icon name="order-warning" size="20" /></span>
					{{ $t('ShoppingCart.noLongerAvailable') }}
				</div>
				<div class="tip">{{ $t('ShoppingCart.delistedFromMarketplace') }}</div>
			</div>
			<div class="amount" v-show="!disabled">${{ info.amount }}<span> HKD</span></div>
			<SvgIcon
				v-if="showDownload"
				@click.stop="emit('download', info)"
				class="download"
				name="download"
				size="32"
				color="#232323"
			/>
			<div class="remove" v-if="showRemove" @click="onRemove">
				<span class="icon"><svg-icon name="order-delete" size="18" /></span>
				<span class="text">{{ $t('ShoppingCart.remove') }}</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, onMounted } from 'vue'
	import { FormatDate } from '@/utils/tools'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const emit = defineEmits(['remove', 'download'])
	const props = defineProps({
		showTags: { type: Boolean, default: true },
		showDate: { type: Boolean, default: true },
		showRemove: { type: Boolean, default: true },
		orderActionsLayout: { type: Boolean, default: false },
		showBrand: { type: Boolean, default: true },
		isOrder: { type: Boolean, default: false },
		info: {
			type: Object as () => {
				status: number
				title: string
				brand: string
				tags: string[]
				date: string
				amount: number
				cover: string
				sellerId: string
			},
			default: () => {}
		},
		disabled: { type: Boolean, default: false }
	})
	const onRemove = () => {
		emit('remove', props.info)
	}

	const showDownload = computed(() => {
		return props.isOrder ? props.info.status === 1 : props.orderActionsLayout
	})
	const handleBrandClick = () => {
		router.push({
			name: 'brandDetail',
			params: { id: props.info.sellerId }
		})
	}
</script>

<style lang="less" scoped>
	.sc-item {
		border-bottom: 0.1rem solid #c4c4c4;
		padding: var(--sc-item-padding, 2.4rem 0);
		display: flex;
		align-items: center;
		> img {
			width: var(--sc-item-img-width, 14.8rem);
			height: var(--sc-item-img-height, 18.8rem);
			object-fit: contain;
			background-color: #f6f6f6;
		}
		> .content {
			flex: 1;
			margin: var(--sc-item-content-margin, 0 4rem);
			align-self: var(--sc-item-content-align-self);
			> * {
				margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
				&:last-child {
					margin-bottom: 0;
				}
			}
			> .title {
				font-family: KaiseiOpti-Bold;
				font-size: var(--sc-item-title-font-size, 2.4rem);
				color: var(--sc-item-title-color, #232323);
			}
			> .brand {
				display: flex;
				align-items: center;
				cursor: pointer;
				> .icon {
					width: 2.4rem;
					height: 2.4rem;
					margin-right: 1rem;
					color: var(--sc-item-brand-color, #232323);
				}
				> .text {
					font-size: var(--sc-item-brand-font-size, 1.6rem);
					text-decoration: underline;
					color: var(--sc-item-brand-color, #232323);
				}
			}
			> .tags {
				display: flex;
				flex-wrap: wrap;
				gap: 0.8rem;
				> .tag {
					min-width: var(--sc-item-tag-min-width, 8.8rem);
					height: var(--sc-item-tag-height, 2.4rem);
					line-height: var(--sc-item-tag-height, 2.4rem);
					border-radius: var(--sc-item-tag-radius, 2.4rem);
					font-size: var(--sc-item-tag-font-size, 1.4rem);
					padding: var(--sc-item-tag-padding, 0 1rem);
					text-align: center;
					color: var(--sc-item-tag-color, #8f8f8f);
					background-color: var(--sc-item-tag-bg-color, #eee);
				}
			}
			> .date {
				display: flex;
				align-items: center;
				color: var(--sc-item-date-color, #808080);
				> .text {
					font-family: KaiseiOpti-Regular;
					font-size: 1.4rem;
				}
			}
		}
		> .right {
			align-self: var(--sc-item-right-align-self, end);
			display: var(--sc-item-right-display);
			flex-direction: var(--sc-item-right-flex-direction);
			justify-content: var(--sc-item-right-justify-content);
			align-items: var(--sc-item-right-align-items);
			height: var(--sc-item-right-height);
			margin-top: var(--sc-item-right-margin-top);
			> .unshelve {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				> .title {
					margin-bottom: 0.8rem;
					font-family: KaiseiOpti-Bold;
					font-size: 1.6rem;
					color: #000;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 0.8rem;
				}
				> .tip {
					font-family: KaiseiOpti-Regular;
					font-size: 1.4rem;
					color: #585858;
				}
			}
			> .amount {
				font-family: KaiseiOpti-Bold;
				font-size: var(--sc-item-amount-font-size, 2.2rem);
				color: #232323;
				> span {
					font-size: var(--sc-item-currency-font-size, 1.4rem);
					color: #585858;
					vertical-align: bottom;
				}
			}
			> .remove {
				margin-top: var(--sc-item-remove-margin-top, 9rem);
				display: flex;
				align-items: center;
				justify-content: flex-end;
				user-select: none;
				cursor: pointer;
				> .icon {
					width: 2rem;
					height: 2rem;
					margin-right: 0.4rem;
				}
				> .text {
					font-family: KaiseiOpti-Regular;
					font-size: 1.4rem;
					color: #808080;
				}
			}
		}
		&.is-order-actions-layout {
			display: grid;
			grid-template-columns:
				var(--sc-item-img-width, 14.8rem)
				minmax(0, 1fr)
				var(--sc-item-order-amount-width, 12rem)
				var(--sc-item-order-action-width, 18rem);
			column-gap: var(--sc-item-order-column-gap, 2rem);

			> .content {
				min-width: 0;
			}

			> .right {
				display: contents;

				> .amount {
					grid-column: 3;
					align-self: center;
					white-space: nowrap;
					transform: translateX(var(--sc-item-order-actions-offset, 0));
				}

				.c-svg {
					width: initial;
					height: initial;
				}
				> .download {
					grid-column: 4;
					cursor: pointer;
					transform: translateX(var(--sc-item-order-actions-offset, 0));
				}
			}
		}
		&.disabled {
			--sc-item-title-color: #cbcbcb;
			--sc-item-brand-color: #cbcbcb;
			--sc-item-date-color: #cbcbcb;
			--sc-item-tag-color: #cbcbcb;
			> img {
				opacity: 0.5;
			}
		}
	}
</style>
