<template>
    <div style="height: 100%;width: 100%" v-resize="resize">
        <a-child @beforeDeactivated="beforeDeactivated"></a-child>
    </div>
</template>

<script>
import DateUtil from "../../../util/pattern/date";
import DomUtil from "../../../util/pattern/dom";
import resize from "../../../service/directives/resize";

export default {
    directives: {
        resize
    },
    name: "index",
    components: {
        AChild: {
            template: "<span></span>",
            deactivated() {
                this.$emit("beforeDeactivated");
            },
        }
    },
    data() {
        let iframe = document.createElement("iframe");
        DomUtil.formatIframe(iframe);
        iframe.src = 'about:blank'
        return {
            iframe,
            iframeKey: DateUtil.getUUID('s')
        }
    },
    props: {
        /* iframe链接 */
        src: {
            type: String,
            default: ''
        },
        /* iframe是否插入至 body 元素上;默认true；false模式为文档流模式，可能存在白屏现象*/
        appendToBody: {
            type: Boolean,
            default: false,
        },
        /* 富文本内容 */
        rtfContent: {
            type: String,
            default: ''
        },
        /* 富文本样式文本 */
        rtfStyle: {
            type: Object,
            default: () => {
            }
        }
    },
    created() {
        this.hideIframe();
    },
    computed: {
        rtfStyleString() {
            let string = '';
            for (const key in this.rtfStyle) {
                string += key + ':' + this.rtfStyle[key] + ";"
            }
            return string;
        },
        renderType() {
            if (this.rtfContent) {
                return 'rtf'
            } else if (this.src) {
                return 'src'
            }
        }
    },
    mounted() {
        if (this.appendToBody) {
            document.body.appendChild(this.iframe);
            let vm = this;
            vm.timer = setInterval(function () {
                vm.setIframeStyle();
            }, 50)
        } else {
            this.$el.appendChild(this.iframe);
        }
        this.showIframe();
        if (this.renderType === 'rtf') {
            this.renderRtf();
        }
        if (this.renderType === 'src') {
            this.renderSrc();
        }
    },
    activated() {
        this.showIframe();
    },
    beforeDestroy() {
        this.timer && clearInterval(this.timer);
        delete window[this.iframeKey];
        this.iframe.remove();
    },
    methods: {
        beforeDeactivated() {
            this.hideIframe();
        },
        showIframe() {
            this.iframe.style.display = "block";
            this.isShow = true;
            this.setIframeStyle();
        },
        hideIframe() {
            this.iframe.style.display = "none";
            this.isShow = false;
        },
        resize() {
            if (this.renderType === 'rtf')
                this.iframe.contentWindow.resetHeight();
        },
        setIframeStyle() {
            if (!this.isShow) return;
            let el = this.$el;
            let iframe = this.iframe;
            if (!el) return;
            let style = {
                height: "100%",
                width: "100%",
                border: 0,
            }
            if (this.appendToBody) {
                let {height, width, top, left} = el.getBoundingClientRect();
                if (this.renderType === 'rtf' && iframe.offsetWidth !== width) {
                    setTimeout(() => {
                        this.resize()
                    }, 100)
                }
                style = {
                    height: height + "px",
                    width: width + "px",
                    left: left + "px",
                    top: top + "px",
                    position: "fixed",
                    border: 0,
                };
            }
            for (const key in style) {
                iframe.style[key] = style[key];
            }
        },
        renderSrc() {
            this.iframe.src = this.src;
        },
        renderRtf(iframe = this.iframe, rtf = this.rtfContent) {
            let iframeKey = this.iframeKey;
            window[iframeKey] = (height) => {
                this.$el.style.height = height + "px";
            };
            let iframeDocument = iframe.contentDocument;
            iframeDocument.head.innerHTML = `
            <meta charset="utf-8">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        `;
            let style = iframeDocument.createElement("style");
            style.innerHTML = `
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            .rtf-content{
                ${this.rtfStyleString}
            }
        `;
            iframeDocument.head.append(style);
            iframeDocument.body.innerHTML = `<div class="rtf-content">${rtf}</div>`;
            let script = iframeDocument.createElement("script");
            script.src = "https://www.niceloo.com/zt4ird/@qdyfb/common/js-plugin/lib-flexible/flexible.js";
            iframeDocument.head.append(script);
            let script1 = iframeDocument.createElement("script");
            script1.innerHTML = `
                function resetHeight(){
                        var pWindow=window.parent;
                        pWindow.${iframeKey}(window.document.body.firstChild.scrollHeight);
                }
                resetHeight();
            `;
            iframeDocument.head.append(script1);
        }

    }

}
</script>

<style scoped>

</style>
