<template>
    <div>
        <h1>Frame</h1>
        <div v-if="frame">
            session_id={{ frame.session_id }}
            seq_num={{ frame.seq_num }}
            <a :href="`/api/frame-image?folder=${folder}&name=${name}`" target="_blank">
                <img :src="frame.image_data_url" />
            </a>
        </div>
    </div>
</template>

<script>
export default {
    name: 'FrameView',
    props: ['folder', 'name'],
    data() {
        return {
            frame: null,
        }
    },
    mounted() {
        this.loadFrame();
    },
    methods: {
        async loadFrame() {
            const res = await fetch(`/api/frame?folder=${this.folder}&name=${this.name}`);
            const data = await res.json();
            console.log(data);
            this.frame = data.frame;
        }
    }
}
</script>
