<script setup>
import { ref } from 'vue';
import { useSession } from 'src/composables/useSession';
import noImage from '/no-user.png';
import { useRole } from 'src/composables/useRole';

const $props = defineProps({
    storage: {
        type: [String, Number],
        default: 'Images',
    },
    collection: {
        type: String,
        default: 'catalog',
    },
    resolution: {
        type: String,
        default: '200x200',
    },
    zoomResolution: {
        type: String,
        default: null,
    },
    zoom: {
        type: Boolean,
        default: true,
    },
    id: {
        type: Number,
        required: true,
    },
});
const show = ref(false);
const token = useSession().getTokenMultimedia();
const timeStamp = ref(`timestamp=${Date.now()}`);
const isEmployee = useRole().isEmployee();

const getUrl = (zoom = false) => {
    const curResolution = zoom
        ? $props.zoomResolution || $props.resolution
        : $props.resolution;
    if ($props.storage === 'dms')
        return `/api/${$props.storage}/${$props.id}/downloadFile?access_token=${token}`;
    return isEmployee
        ? `/api/${$props.storage}/${$props.collection}/${curResolution}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
        : noImage;
};
const reload = () => {
    timeStamp.value = `timestamp=${Date.now()}`;
};
defineExpose({
    reload,
});
</script>
<template>
    <QImg
        :draggable="true"
        :class="{ zoomIn: zoom }"
        :src="getUrl()"
        v-bind="$attrs"
        @click.stop="show = $props.zoom"
        spinner-color="primary"
    />
    <QDialog v-if="$props.zoom" v-model="show">
        <QImg
            :draggable="true"
            :src="getUrl(true)"
            v-bind="$attrs"
            spinner-color="primary"
            class="img_zoom"
            :ratio="0"
        />
    </QDialog>
</template>
<style lang="scss" scoped>
.q-img {
    &.zoomIn {
        cursor: zoom-in;
    }
    min-width: 50px;
}
.rounded {
    border-radius: 50%;
}
.img_zoom {
    border-radius: 0%;
}
</style>
