<template>
    <div class="editor_template prreview">
        <header class="header">
            <div class="header__bottom" style="overflow: auto;">
                <ul class="select-page">
                    <li class="select-page__item" style="cursor: default;pointer-events: none;">
                        {{ $store.state.activeTemplate.title }}
                    </li>
                </ul>

                <div class="separator-blok__wrap" style="user-select: none;">
                    <div class="separator-blok">
                        <div class="zoom-page">
                            <button class="zoom-page__btn" @click="changeZoom('minus')">
                                <inline-svg :src="require('@/assets/img/icon-minus.svg')"/>
                            </button>

                            <span class="zoom-page__date">{{ printZoom }}%</span>
                            <button class="zoom-page__btn" @click="changeZoom('plus')">
                                <inline-svg :src="require('@/assets/img/icon-plus.svg')"/>
                            </button>
                        </div>
                    </div>

                    <a href="#" @click="downloadCurrentDocument">
                        <li class="btn btn--md btn-primary-outline ss">
                            <span title="Empty Template Document" class="select-page__title">Download</span>
                            <!-- <inline-svg :src="require('@/assets/img/icon-arrow-right.svg')"/> -->
                        </li>
                    </a>
                </div>
            </div>
        </header>

        <div class="wrapper wrapper-pt" style="padding: 0;">
            <main class="content">
                <div class="workspase" style="height: 100vh;">
                    <!-- <div class="workspase__sidebar" style="padding: 16px 16px 16px 0;">
                        <PagesSidebar/>
                    </div> -->

                    <div class="workspase__body" @scroll="scroll" ref="workspace">
                        <div ref="documentPages" style="pointer-events: none;user-select: none;"></div>
                    </div>
                </div>
            </main>

            <div class="loader" :class="{ active: loading }">
                <div class="loader__icon">
                    <img :src="require('@/assets/img/load-icon.svg')" alt="">
                </div>

                <p class="loader__text">Loading, please wait</p>
            </div>
        </div>
    </div>
</template>

<script>
    import mixinBuilder from '../mixin/mixinBuilder';
    import Editor from '../libs/edit-template-editor';
    import zoomMixin from '../mixin/zoomMixin';
    import PagesSidebar from '../components/create-template/sidebars/PagesSidebar.vue';

    export default {
        data: () => ({ Editor }),
        mixins: [mixinBuilder, zoomMixin],
        components: { PagesSidebar },

        methods: {
            afterOpenTemplate() {
                this.editor.pages.forEach(page => page.canvas.forEachObject(object => {
                    object.selectable = false;
                    object.evented = false;
                }));
            },

            downloadCurrentDocument() {
                this.editor.downloadCurrentDocument();
            }
        },

        computed: {
            loading() {
                return this.$store.state.loading;
            },

            activeObject() {
                return this.$store.state.editTemplate.activeObject;
            },

            editor: {
                get() {
                    return this.$store.state.editTemplate.editor;
                },

                set(val) {
                    this.$store.state.editTemplate.editor = val;
                }
            }
        },

        mounted () {
            document.body.classList.add('hide-main-header');
        },

        destroyed () {
            document.body.classList.remove('hide-main-header')
        },

    }
</script>

<style>
    .disabled {
        pointer-events: none;
        opacity: .6;
    }

    @media (max-width: 767.98px) {
        .prreview .document {
            margin-top: 60px;
        }
    }

    .prreview .select-page__item::after {
        display: none;
    }
</style>

<style scoped>
    .select-page__item {
        padding-right: 10px;
        margin-left: 10px;
    }

    .select-page__item:hover {
        background: rgba(255, 255, 255, 0.14);
        padding-right: 10px
    }

    .ss {
        color: #fff;
        border-color: #fff;
        margin-left: 15px;
        padding: 6px 13px;
    }

    .ss .select-page__title {
        font-weight: 600;
        font-size: 14px;
        opacity: 1;
    }
</style>