<template>
    <div id="app">
        <div class="tile is-ancestor">

            <div class="tile is-10 is-vertical is-parent">
                <div class="viewer-wrapper">
                    <viewer
                            ref="viewer"
                            :options="options"
                            :images="images"
                            class="viewer"
                            @inited="inited"
                    >
                        <template #default="scope">
                            <figure class="images">
                                <div v-for="{source, thumbnail, alt} in scope.images" :key="source" class="image-wrapper">
                                    <img
                                            class="image"
                                            :src="thumbnail"
                                            :data-source="source"
                                            :alt="alt"
                                    >
                                </div>
                            </figure>
                        </template>
                        <div style="background-color: yellow;width: 20px;height: 20px;font-size: 10px;" class="new_label"  data-id="A1">
                            A1
                        </div>
                    </viewer>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import 'viewerjs/dist/viewer.css'
    import VueViewer from 'v-viewer'
    import Vue from 'vue'

    VueViewer.setDefaults({
        "inline": true,
        "button": false,
        "navbar": false,
        "title": false,
        "toolbar": false,
        "tooltip": false,
        "movable": true,
        "zoomable": true,
        "rotatable": false,
        "scalable": false,
        "transition": false,
        "fullscreen": false,
        "keyboard": false,
        "url": "data-source"
    })
    Vue.use(VueViewer)
    const sourceImages = []
    const base = Math.floor(Math.random() * 60) + 10
    for (let i = 0; i < 1; i++) {
        sourceImages.push({
            thumbnail: `https://zhyframe.fzh.fun/attachment/images/1023/2022/09/02d9610f22ac4c15877a043a3d481d83.png`,
            source: `https://zhyframe.fzh.fun/attachment/images/1023/2022/09/02d9610f22ac4c15877a043a3d481d83.png`,
            alt: `Image1`,
        })
    }
    export default {

        data() {
            return {
                form: {
                    view: 2,
                    zoom: -0.1,
                    zoomTo: 0.8,
                    rotate: 90,
                    rotateTo: 180,
                    scaleX: 1,
                    scaleY: 1,
                },
                toggleOptions: [
                    'button',
                    'navbar',
                    'title',
                    'toolbar',
                    'tooltip',
                    'movable',
                    'zoomable',
                    'rotatable',
                    'scalable',
                    'transition',
                    'fullscreen',
                    'keyboard',
                ],
                options: {
                    inline: true,
                    button: false,
                    navbar: false,
                    title: false,
                    toolbar: false,
                    tooltip: false,
                    movable: true,
                    zoomable: true,
                    rotatable: false,
                    scalable: false,
                    transition: false,
                    fullscreen: false,
                    keyboard: false,
                    url: 'data-source',
                },
                images: [...sourceImages].splice(0, 5),
            }
        },
        computed: {
        },
        methods: {
            inited(viewer) {
                this.$viewer = viewer
            },
            add() {
                this.images.push(sourceImages[this.images.length])
            },
            remove() {
                this.images.pop()
            },
            view() {
                if (this.form.view >= 0 && this.form.view < this.images.length) {
                    this.$viewer.view(this.form.view)
                }
            },
            zoom(value) {
                this.$viewer.zoom(value || this.form.zoom)
            },
            zoomTo() {
                this.$viewer.zoomTo(this.form.zoomTo)
            },
            rotate(value) {
                this.$viewer.rotate(value || this.form.rotate)
            },
            rotateTo() {
                this.$viewer.rotateTo(this.form.rotateTo)
            },
            scaleX(value) {
                if (value) {
                    this.$viewer.scaleX(value)
                }
                else {
                    this.form.scaleX = -this.form.scaleX
                    this.$viewer.scaleX(this.form.scaleX)
                }
            },
            scaleY(value) {
                if (value) {
                    this.$viewer.scaleY(value)
                }
                else {
                    this.form.scaleY = -this.form.scaleY
                    this.$viewer.scaleY(this.form.scaleY)
                }
            },
            move(x, y) {
                this.$viewer.move(x, y)
            },
            prev() {
                this.$viewer.prev()
            },
            next() {
                this.$viewer.next()
            },
            play() {
                this.$viewer.play()
            },
            stop() {
                this.$viewer.stop()
            },
            show() {
                this.$viewer.show()
            },
            full() {
                this.$viewer.full()
            },
            tooltip() {
                this.$viewer.tooltip()
            },
            reset() {
                this.$viewer.reset()
            },
            toggleInline(inline) {
                this.options.inline = inline
            },
        },
    }
</script>

<style scoped>

    *{
        padding: 0;
        margin: 0;
    }

    .viewer-wrapper {
        position: relative;
        background: transparent;
        height: 300px;
    }
    .methods {
        margin-bottom: 1em;
        flex-wrap: wrap;
    }
    .methods > * {
        margin-right: 0.75rem;
    }
    .options-panel .panel-block {
        padding: 0;
    }
    .options-panel .panel-block .checkbox {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0.5em 0.75em;
    }
    .viewer {
        height: 100%;
    }
    .viewer .images {
        height: 100%;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 5px;
        display: none;
    }
    .viewer .images .image-wrapper {
        display: inline-block;
        width: calc(33% - 20px);
        margin: 5px 5px 0 5px;
    }
    .viewer .images .image-wrapper .image {
        width: 100%;
        cursor: pointer;
        display: inline-block;
    }
    .new_label{
        position: absolute;
        top: 100px;
        left: 100px;
    }

</style>