<template>
    <div class="fugger-pinch-zoom">
        <div class="pinch-zoom">
            <pinch-zoom v-if="image !== ''" background-color="rgba(0,0,0,0)">
                <img :src="`${image}`" alt="" />
            </pinch-zoom>
        </div>
        <div
            class="instruction-text-wrapper d-flex flex-grow-1 align-items-end justify-self-center justify-content-center"
        >
            <div class="instruction-text d-flex justify-content-center">
                <p class="p1 p-0 m-0">
                    {{ getInterfaceText('instruction_image') }}
                </p>
            </div>
        </div>
    </div>
</template>

<script>
//https://www.npmjs.com/package/vue-pinch-zoom
import PinchZoom from 'vue-pinch-zoom'
import { eventbus } from './index'

export default {
    name: 'FuggerPinchZoom',
    components: {
        PinchZoom,
    },
    props: {
        image: {
            type: String,
            default: '',
        },
    },
    mounted() {
        console.log()
        eventbus.$emit('openoverlay', { type: 'pinch-zoom' })
    },
}
</script>

<style lang="scss" scoped>
.fugger-pinch-zoom {
    background: var(--app-background-color);
    position: absolute;
    width: 100vw;
    height: 100vh;
    .pinch-zoom {
        width: 100vw;
        height: calc((1080vw - 174vw) * var(--pxToVw));
        padding: calc(47vw * var(--pxToVw)) calc(90vw * var(--pxToVw))
            calc(0vw * var(--pxToVw)) calc(47vw * var(--pxToVw));
    }
    .instruction-text-wrapper {
        height: calc(174vw * var(--pxToVw));
        width: 100%;
        .instruction-text {
            max-width: 600px;
            background-color: white;
            padding: calc(43vw * var(--pxToVw)) calc(85vw * var(--pxToVw))
                calc(26vw * var(--pxToVw)) calc(84vw * var(--pxToVw));
        }
    }
}
</style>

<style lang="scss">
.pinch-zoom {
    .pinch-zoom-wrapper {
        height: calc(859vw * var(--pxToVw));
    }
}
</style>
