<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import FetchData from 'components/FetchData.vue';
import CatalogItem from 'components/ui/CatalogItem.vue';

import { toCurrency } from 'filters/index';

const { t } = useI18n();
const route = useRoute();

const salesFilter = {
    include: {
        relation: 'item',
        scope: {
            field: ['name', 'image'],
        },
    },
    where: { ticketFk: route.params.id },
};
const sales = ref([]);
</script>

<template>
    <FetchData
        ref="salesRef"
        url="sales"
        :filter="salesFilter"
        @on-fetch="(data) => (sales = data)"
        auto-load
    />
    <div class="pictures-list">
        <CatalogItem v-for="(sale, index) in sales" :key="index" :item="sale.item">
            <template #price>
                <div class="q-mt-md full-width row justify-between items-center">
                    <span class="text-h6">{{ sale.quantity }}</span>
                    <span>{{ t('by') }}</span>
                    <span class="text-h6">{{ toCurrency(sale?.price) }}</span>
                </div>
            </template>
        </CatalogItem>
    </div>
</template>

<style lang="scss" scoped>
.pictures-list {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
</style>

<i18n>
es:
    by: por
</i18n>
