<script setup>
import { ref, onMounted, inject } from 'vue';
const jApi = inject('jApi');
const news = ref([]);
const showPreview = ref(false);
const selectedImageSrc = ref('');

const fetchData = async () => {
    news.value = await jApi.query(
        `SELECT title, text, image, id
        FROM news
        ORDER BY priority, created DESC`
    );
};

const showImagePreview = src => {
    showPreview.value = true;
    selectedImageSrc.value = src;
};
const hideImagePreview = src => {
    showPreview.value = false;
    selectedImageSrc.value = null;
};

onMounted(async () => await fetchData());
</script>

<template>
    <div style="padding: 0">
        <div class="q-pa-sm row items-start">
            <div class="new-card q-pa-sm" v-for="myNew in news" :key="myNew.id">
                <QCard>
                    <QImg
                        :src="`${$app.imageUrl}/news/full/${myNew.image}`"
                        @click="
                            showImagePreview(
                                `${$app.imageUrl}/news/full/${myNew.image}`
                            )
                        "
                    />

                    <QCardSection>
                        <div class="text-h5">
                            {{ myNew.title }}
                        </div>
                    </QCardSection>
                    <QCardSection class="new-body">
                        <div v-html="myNew.text" class="card-text" />
                    </QCardSection>
                </QCard>
            </div>
        </div>
        <QPageSticky>
            <QBtn
                fab
                icon="add_shopping_cart"
                color="accent"
                to="/ecomerce/catalog"
            >
                <QTooltip>{{ $t('startOrder') }}</QTooltip></QBtn
            >
        </QPageSticky>
    </div>
    <QDialog v-model="showPreview" @hide="hideImagePreview">
        <QImg :src="selectedImageSrc" />
    </QDialog>
</template>

<style lang="scss" scoped>
.new-card {
    width: 100%;

    @media screen and (min-width: 800px) and (max-width: 1400px) {
        width: 50%;
    }
    @media screen and (min-width: 1401px) and (max-width: 1920px) {
        width: 33.33%;
    }
    @media screen and (min-width: 19021) {
        width: 25%;
    }
}
.new-body {
    font-family: 'Open Sans';
}

.card-text {
    :deep(a) {
        color: $accent;
    }
}
</style>

<i18n lang="yaml">
en-US:
    startOrder: Start order
es-ES:
    startOrder: Empezar pedido
ca-ES:
    startOrder: Començar comanda
fr-FR:
    startOrder: Lancer commande
pt-PT:
    startOrder: Comece uma encomenda
</i18n>
