<template>
    <div class="image-container">
        <img id="show_img" v-if="showSrcImage">
        <img id="res_img" class="image" v-else>
        <canvas id="show_canvas"></canvas>
        <canvas id="hide_canvas" style="display: none;"></canvas>
    </div>
</template>

<script lang="ts" setup>

import { ref, onMounted } from 'vue'
import { useCanvasImgStore } from '../store/CanvasImg';
import { storeToRefs } from 'pinia'

const c_img = useCanvasImgStore();
const { show_image, res_image, show_canvas, hide_canvas } = storeToRefs(c_img);

onMounted(async () => {
    show_image.value = document.getElementById("show_img") as HTMLImageElement;
    res_image.value = document.getElementById("res_img") as HTMLImageElement;
    show_canvas.value = document.getElementById("show_canvas") as HTMLCanvasElement;
    hide_canvas.value = document.getElementById("hide_canvas") as HTMLCanvasElement;
});

defineProps<{
    showSrcImage?: boolean,
}>()
</script>

<style scoped lang="less">
.image-container {
    display: relative;
    width: 100%;
    height: 600px;
    background-color: gainsboro;
}

#show_canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: transparent;
}

#show_img {
    z-index: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    // margin: auto;
    max-width: 100%;
    max-height: 100%;
}

.image {
    max-width: 100%;
    max-height: 100%;
    position: flex;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
</style>