<template>
    <div class="edit-view" ref="editView">
        <iframe
            class="chart-frame"
            ref="chartFrame"
            :width="width + 'px'"
            :height="height + 'px'"
            :style="{ width: width + 'px', height: height + 'px' }"
            :src="src"
        ></iframe>
        <div class="float-btn">
            <div class="btn" @click="open">
                <i class="el-icon-top-right"></i>
            </div>
            <div class="btn" @click="toggleFullScreen">
                <i class="el-icon-full-screen"></i>
            </div>
        </div>
    </div>
</template>
<script>
import resolveUrl from 'resolve-url';
export default {
    data() {
        return {
            width: 0,
            height: 0,
            src: resolveUrl(
                process.env.NODE_ENV === 'development' ? 'http://jmrh.izouma.com' : process.env.VUE_APP_BASE_URL,
                '/dataCenter/home'
            ),
            showBtn: false
        };
    },
    mounted() {
        window.addEventListener('resize', this.onResize);
        this.calcSize();
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.onResize);
    },
    methods: {
        onResize() {
            this.calcSize();
        },
        calcSize() {
            let { width, height } = this.$refs.editView.getBoundingClientRect();
            this.width = width;
            this.height = height;
            console.log(width, height);
        },
        open() {
            window.open(this.src, '_blank');
        },
        toggleFullScreen() {
            this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
            let element = this.$refs.chartFrame;
            let requestMethod;
            if (this.isFullscreen) {
                requestMethod =
                    document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen;
            } else {
                requestMethod =
                    element.requestFullScreen ||
                    element.webkitRequestFullScreen ||
                    element.mozRequestFullScreen ||
                    element.msRequestFullScreen;
            }
            if (requestMethod) {
                requestMethod.call(this.isFullscreen ? document : element);
            }
        }
    }
};
</script>
<style lang="less" scoped>
.chart-frame {
    border: none;
}
.edit-view {
    position: relative;
}
.float-btn {
    position: absolute;
    top: 15px;
    right: 30px;
    margin: auto;
    color: white;
    font-size: 24px;
    border: 1px solid rgb(59, 189, 241);
    background-color: rgba(59, 189, 241, 0.5);
    border-radius: 4px;
    display: flex;
    .btn {
        padding: 8px;
        cursor: pointer;
    }
}
</style>
