<script setup>
import { ref, computed, onMounted } from 'vue';
import { useSession } from 'src/composables/useSession';

const $props = defineProps({
    storage: {
        type: [String, Number],
        default: 'Images',
    },
    collection: {
        type: String,
        default: 'catalog',
    },
    size: {
        type: String,
        default: '200x200',
    },
    zoomSize: {
        type: String,
        required: false,
        default: 'lg',
    },
    id: {
        type: Number,
        required: true,
    },
});
const show = ref(false);
const token = useSession().getTokenMultimedia();
const timeStamp = ref(`timestamp=${Date.now()}`);
const url = computed(
    () =>
        `/api/${$props.storage}/${$props.collection}/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
);
const reload = () => {
    timeStamp.value = `timestamp=${Date.now()}`;
};
defineExpose({
    reload,
});

onMounted(() => {});
</script>
<template>
    <QImg :src="url" v-bind="$attrs" @click="show = !show" spinner-color="primary" />
    <QDialog v-model="show" v-if="$props.zoomSize">
        <QImg
            :src="url"
            size="full"
            class="img_zoom"
            v-bind="$attrs"
            spinner-color="primary"
        />
    </QDialog>
</template>

<style lang="scss" scoped>
.q-img {
    cursor: zoom-in;
    min-width: 50px;
}
.rounded {
    border-radius: 50%;
}
.img_zoom {
    border-radius: 0%;
}
</style>
