<template>
	<div class="order-summary">
		<div class="title">{{ $t('ShoppingCart.orderSummary') }}</div>
		<div class="count">
			<span class="label">{{ $t('ShoppingCart.selected') }}</span>
			<span class="value">{{ brandsList.length }}</span>
		</div>
		<div class="hr"></div>
		<div class="brands-header">
			<span class="icon"><svg-icon name="order-shop" size="24" /></span>
			<span class="text">{{ $t('ShoppingCart.brands') }}</span>
		</div>
		<div class="brands-item" v-for="v in brandsList" :key="v.brand">
			<span class="label" @click="handleBrandClick(v.id)">{{ v.brand }}</span>
			<span class="value"
				><span>{{ v.children.length }}</span
				>{{ $t('ShoppingCart.item') }}</span
			>
		</div>
		<br />
		<br />
		<div class="total">
			<span class="label">{{ $t('ShoppingCart.total') }}</span>
			<span class="value"
				><span>${{ totalAmount }}</span> HKD</span
			>
		</div>
		<div class="hr"></div>
		<button class="checkout-btn" custom="black" @click="handleCheckout">
			{{ $t('ShoppingCart.checkoutSelected') }}
		</button>
		<div class="tip">{{ $t('ShoppingCart.digitalAssets') }}</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	import { FormatBytes, FormatDate } from '@/utils/tools'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		}
	})
	const brandsList = computed(() => {
		const arr = []
		props.list.forEach((v) => {
			const index = arr.findIndex((v_) => v_.brand === v.brand)
			if (index === -1) {
				arr.push({
					brand: v.brand,
					id: v.sellerId,
					children: [v]
				})
			} else {
				arr[index].children.push(v)
			}
		})
		return arr
	})
	const totalAmount = computed(() => props.list.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
	const handleCheckout = () => {
		if (props.list.length === 0) return
		const list = btoa(encodeURIComponent(JSON.stringify(props.list)))
		router.push({
			name: 'pay',
			query: { list }
		})
	}
	const handleBrandClick = (id) => {
		router.push({
			name: 'brandDetail',
			params: { id }
		})
	}
</script>

<style lang="less" scoped>
	.order-summary {
		width: 39.8rem;
		padding: 3rem 2rem 3rem 2.4rem;
		height: auto;
		background-color: #f6f6f6;
		> .title {
			font-family: KaiseiOpti-Bold;
			font-size: 2.4rem;
			line-height: 2.3rem;
			color: #232323;
			margin-bottom: 1.8rem;
		}
		> div {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		> .count {
			color: #232323;
			> .label {
				font-size: 1.6rem;
			}
			> .value {
				font-size: 1.4rem;
			}
		}
		> .hr {
			margin: 1.2rem 0;
			width: 100%;
			height: 0;
			border-top: 0.1rem solid #c4c4c4;
		}
		> .brands-header {
			justify-content: flex-start;

			margin-bottom: 1rem;
			> .icon {
				width: 2.4rem;
				height: 2.4rem;
				margin-right: 0.4rem;
			}
			> .text {
				font-size: 1.4rem;
				color: #232323;
			}
		}
		> .brands-item {
			margin-bottom: 0.8rem;
			padding-left: 1rem;
			font-size: 1.2rem;
			> .label {
				text-decoration: underline;
				color: #585858;
				cursor: pointer;
				user-select: none;
			}
			> .value {
				color: #808080;
				&:deep(span) {
					font-size: 1.4rem;
					color: #585858;
					margin-right: 0.8rem;
				}
			}
		}
		> .total-file-size {
			> .label {
				display: flex;
				align-items: center;

				> .icon {
					width: 2.4rem;
					height: 2.4rem;
					margin-right: 0.4rem;
				}
			}
			> .value {
				> span {
					color: #808080;
				}
			}
		}
		> .total {
			> .value {
				color: #585858;
				> span {
					font-size: 2.2rem;
					color: #232323;
				}
			}
		}
		> .checkout-btn {
			width: 100%;
			margin-top: 3rem;
			text-transform: uppercase;
		}
		> .tip {
			margin-top: 1rem;
			font-family: KaiseiOpti-Regular;
			font-size: 1.2rem;
			justify-content: center;
			color: #808080;
		}
	}
</style>
