<template>
    <div class="cart-total-aside">
        <ul>
            <li v-for="(value, key) in items" :key="key">
                <label>{{ $t(key) }}</label>
                <span>
                    {{ numberFormat(value) }}
                    {{ key == 'productsCount' ? $t('product') : '' }}
                </span>
            </li>
        </ul>
        <Button :label="$t('submitAndViewPreFactor')" :loading="loading" @click="submitOrder()" />
    </div>
</template>

<script setup>
import init from '../../../initialize/cart-total-invoice'

const { dialog } = inject('service')
const data = inject('data')

const items = computed(() => init(data.value))

const loading = ref(false)

const submitOrder = async () => {
    loading.value = true
    const { status, data: res } = await useFetch('/api/orders', {
        headers: { Authorization: useCookie('token') }, method: 'post'
    })
    loading.value = false

    if (status.value == 'success') {
        dialog.show(resolveComponent('CartDialogPreFactor'), res.value)
        const cart = useCartStore()
        cart.get()
    }
}

const numberFormat = (number) =>
    new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
</script>

<style lang="scss">
.cart-total-aside {
    @apply w-full lg:max-w-[28.1rem] lg:h-[25rem] flex flex-col justify-between p-6 grow;
    @apply lg:bg-neutral-50 lg:rounded-[0.6rem] lg:border border-neutral-200 font-vazir lg:mr-auto;

    ul {
        @apply flex flex-col gap-[1.1rem] lg:gap-6 lg:mt-2;

        li {
            @apply flex justify-between items-center;

            label {
                @apply text-zinc-500 text-sm lg:text-xl font-medium;
            }

            span {
                @apply text-zinc-800 text-lg lg:text-2xl lg:font-medium;
            }
        }
    }

    button {
        @apply max-lg:hidden;

        span {
            @apply text-xl font-bold;
        }
    }
}
</style>
