<template>
	<div class="pay">
		<div class="content">
			<payment :ids="ids" />
			<sc-list :title="$t('Pay.OrderSummary')" is-view is-mini :list="list" />
		</div>
		<my-footer />
	</div>
</template>

<script setup lang="ts">
	import { computed, onMounted, ref } from 'vue'
	import scList from '../shoppingCart/sc-list.vue'
	import payment from './payment.vue'
	import myFooter from '@/components/Footer.vue'
	import { useRoute } from 'vue-router'
	import { SCART_STATUS } from '../shoppingCart/index.d'

	const route = useRoute()
	const list = ref([])
	const ids = computed(() => {
		return list.value.filter((v) => v.status === SCART_STATUS.NORMAL).map((item) => item.listingId)
	})
	try {
		let str = route.query.list as string
		list.value = JSON.parse(decodeURIComponent(atob(str)))
		console.log(list.value)
	} catch (error) {
		console.log(error)
	}
</script>

<style lang="less" scoped>
	.pay {
		width: 100%;
		height: 100%;
		overflow: hidden;
		overflow-y: auto;
		--content-top: 4.8rem;
		> .content {
			max-width: 160rem;
			margin: 0 auto;
			padding: 4rem 9rem 10rem;
			gap: 10rem;
			display: flex;
			> .payment {
				width: 60%;
			}
			> .sc-list {
				width: 40%;
			}
		}
	}
</style>
