<template>
    <div class="order-item">
        <div>
            <ul>
                <li v-for="(value, key) in items" :key="key">
                    <label>{{ $t(key) }}:</label>
                    <span>{{ value }}</span>
                </li>
            </ul>
            <router-link :to="`/panel/factors?id=${id}`">
                <Button :label="$t('showFactor')" size="small" />
            </router-link>
        </div>
        <Swiper :slides-per-view="'auto'" :space-between="16">
            <SwiperSlide v-for="(item, i) in products" :key="i">
                <ProductCard :data="item.product" type="minimal" />
            </SwiperSlide>
        </Swiper>
    </div>
</template>

<script setup>
const props = defineProps(['data'])
const { _id: id, totalAmount, status, orderDate, products } = props.data

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

const { t } = useI18n()
const items = reactive({
    documentNumber: id,
    amount: numberFormat(totalAmount) + ' ' + t('priceUnit'),
    orderStatus: t('orderStatuses.' + status.toLowerCase()),
    orderDate: new Date(orderDate).toLocaleString('fa-IR')
})
</script>

<style lang="scss">
.order-item {
    @apply w-[21.4rem] h-[29.1rem] lg:w-full lg:h-[19.3rem] overflow-hidden;
    @apply flex flex-col-reverse lg:flex-row bg-white border-2 border-[#E5E5E5];
    @apply rounded-[0.6rem] max-lg:rounded-t-xl;

    &>div:first-of-type {
        @apply w-full h-[15.1rem] lg:w-[29.6rem] lg:h-full max-lg:border-t-2 border-[#E5E5E5];
        @apply flex flex-col justify-between whitespace-nowrap;
        @apply gap-[1.9rem] p-6 lg:gap-10 lg:p-8;

        ul {
            @apply flex flex-col gap-4;

            li {
                @apply flex gap-3 items-center font-vazir text-xs lg:text-lg;

                label {
                    @apply text-zinc-500;
                }

                span {
                    @apply text-zinc-800 font-medium;
                }

                &:last-child span {
                    @apply ltr;
                }
            }
        }

        button {
            @apply w-full h-10 lg:w-[9.3rem] rounded-lg #{!important};

            .p-button-panel {
                @apply font-medium font-vazir text-xs lg:text-base;
            }
        }
    }

    .swiper {
        @apply w-full max-w-[67.6rem] h-56 lg:h-full relative ltr px-[0.9rem];

        .swiper-wrapper {
            @apply items-center z-0;

            .swiper-slide {
                @apply h-max w-max;
            }
        }

        &::before {
            @apply shadow-[-5px_0px_23px_0px_#00000040];
            @apply content-['_'] absolute inset-y-0 w-6 -right-8 lg:-right-6 opacity-50 z-10;
        }

        &::after {
            @apply shadow-[5px_0px_23px_0px_#00000040];
            @apply content-['_'] absolute inset-y-0 w-6 -left-8 lg:-left-6 opacity-50 z-10;
        }
    }
}
</style>
