<template>
    <iframe class="iframe" src="about:blank" frameborder="0" allowtransparency="true" ></iframe>
</template>

<script>
    import vbEditBase from "./vbEditBase"
    export default {
        name: "vbEditIframe",
        props:{
            html:{
                type:String,
                default:""
            },
            limit:{//限制多少字符
                type:Number,
                default:null
            },
            placeholder: {
                type: String,
                default: "请输入文字"
            },
            limitFunc:{
                type:Function,
                default:null
            },
        },
        watch:{
            html:{
                immediate: true,
                handler(newV, oldV) {
                    console.log(newV)
                    this.setHtml(newV);
                }
            },
        },
        mounted(){
            let iframe=this.$el;
            this.iframewindow=iframe.contentWindow;
            this.iframedocument=this.iframewindow.document;
            this.iframeBody=$(this.iframedocument.body);
            // this.iframeBody.attr("contenteditable",true)
            let vm=this;
            this.baseComponent = new (Vue.extend({
                template: `<vbEditBase :styleCss="styleCss" :html="html"
                                            :placeholder="placeholder"
                                            :windowBase="windowBase"
                                            @blur="blur"
                                            @focus="focus"
                                            ref="vbEditBase"
                                            @input="input"></vbEditBase>`,
                data(){
                    return {
                        html:vm.html,
                        windowBase:vm.iframewindow,
                        styleCss:vm.styles,
                        placeholder:vm.placeholder
                    }
                },
                components:{vbEditBase},
                mounted(){
                },
                methods:{
                    input(innerHTML){
                        if(vm.limitFunc){
                            vm.limitFunc(this.$refs.vbEditBase.getHtml(),this.$refs.vbEditBase.getText());
                        }else if(vm.limit!=null){
                            let text=this.$refs.vbEditBase.getText();
                            if(text.length>vm.limit){
                                // this.$message.warning(`已超出限制字符数${vm.limit} !`)
                            }
                        };
                        vm.$emit("change");
                    },
                    blur(){
                        vm.$emit('blur');
                    },
                    focus(){
                        vm.$emit('focus');
                    },
                    setHtml(html){
                        this.html=html;
                    }
                }
            }))().$mount();
            vm.updateFrameBody();
            this.onpaste= function (e) {
                return false;
            };
            $(this.baseComponent.$el).on('paste',this.onpaste);
        },
        activated() {
            this.updateFrameBody();
        },
        deactivated() {
            // console.log("deactivated");
        },
        beforeDestroy() {
            let vm = this;
            $(this.baseComponent.$el).unbind("paste",this.onpaste);
        },
        methods:{
            updateFrameBody(){
                let vm=this;
                setTimeout(function () {
                    vm.baseEdit=vm.baseComponent.$refs.vbEditBase;
                    vm.baseEdit.window=vm.$el.contentWindow;
                    let body=$(vm.getIframeDocument().body);
                    body.css({
                        margin:0,
                        padding:0,
                        overflow: 'hidden',
                    }).html("").append(vm.baseComponent.$el);
                    vm.baseEdit.getSelection().removeAllRanges();
                },500);
            },
            setStyle(style){
                this.styles=style;
                this.baseComponent&&(this.baseComponent.styleCss=style);
            },
            setHtml(html){
                // this.html=html;
                this.baseComponent&&this.baseComponent.setHtml(html);
            },
            getIframeDocument(){
                return this.$el.contentWindow.document;
            },
            focus(){
                this.baseEdit=this.baseComponent.$refs.vbEditBase;
                this.baseEdit.focus();
                this.getIframeDocument().execCommand('CreateLink',false,'http://www.51js.com');
            },
            getHtml(){
                this.baseEdit=this.baseComponent.$refs.vbEditBase;
                return this.baseEdit.getHtml();
            },
            setColor(color){
                this.baseEdit=this.baseComponent.$refs.vbEditBase;
                // this.baseEdit.initRange();
                let vm=this;
                if(this.baseEdit.getSelection().rangeCount===0){
                    this.setHtml(color?`<font color="${color}">${this.baseEdit.getText()}</font>`:this.baseEdit.getText());
                    vm.$nextTick(function () {
                        vm.$emit("change");
                    })
                }else{
                    this.getIframeDocument().execCommand("ForeColor", false, color||"0");
                    this.baseEdit.getSelection().removeAllRanges();
                }
            }
        }
    }
</script>

<style scoped>
    .iframe{
        background-color: #fff;
        border: 0;
        box-sizing: border-box;
        flex: 1;
        -ms-flex-preferred-size: auto;
    }
</style>
