<script setup lang="ts">
import { useImagesStore } from '~/store/images';

const props = defineProps(['file_id'])
const imagesStore = useImagesStore()

const img = ref(imagesStore.getImage(props.file_id))
const isOpen = ref(false)

const openImage = () => {
    isOpen.value = !isOpen.value
}
console.log(imagesStore.getImage(props.file_id))
watch(imagesStore, () => {
    img.value = imagesStore.getImage(props.file_id)
}, { deep: true })
</script>
<template>
    <template v-if="img.result">
        <a href="#">
            <Icon name="i-mdi-image" @click="openImage" />
        </a>
        <UModal v-model="isOpen">
            <img :src="img.result" />
        </UModal>
    </template>
</template>