<template>
    <div>
        <div v-html="`<style>
            .edit-div {
                outline: none;
                user-select: text;
                text-align: left;
            }
            .edit-div[contenteditable=true] {
                user-modify: read-write-plaintext-only;
            }
            .edit-div:empty:before {
                content: attr(placeholder);
                display: block;
                color: #ccc;
            }
        </style>`"></div>
    <div class="edit-div"
         v-html="value"
         :style="styleCss"
         :contenteditable="true"
         spellcheck="false"
         :placeholder="placeholder"
         @focus="()=>{isLocked = true}"
         @blur="blur()"
         @click="click"
         @input="changeText"></div>
    </div>
</template>

<script>
    export default {
        name: "vbEditIframe",
        props: {
            html: {
                type: String,
                default: ""
            },
            placeholder: {
                type: String,
                default: "请输入文字"
            },
            windowBase:null,
            styleCss: {
                type: Object,
                default: ()=>{}
            }
        },
        data() {
            return {
                isLocked: false,
                value: "",
                window,
            }
        },
        watch: {
            html: {
                immediate: true,
                handler(newV, oldV) {
                    if (!this.isLocked) {
                        this.value = newV;
                    }
                }
            },
        },
        created(){
          this.window=this.windowBase||this.window;
        },
        mounted() {
        },
        methods: {
            click(){
                console.log("click")
                this.$emit('focus');
                let selection=this.getSelection();
                this.range =selection.rangeCount? selection.getRangeAt(0).cloneRange():null;
                this.lastEditRange=true;
            },
            blur(){
               this.isLocked = false;
               this.$emit('blur');
            },
            focus(){
                this.$emit('focus');
                if(!this.isLocked)this.keepLastIndex();
                // this.range = this.getSelection().getRangeAt(0).cloneRange();
                // $(this.getEditDiv()).focus();
            },
            initRange(){
                this.range&&this.getSelection().addRange(this.range);
            },
            changeText() {
                let editDiv = this.getEditDiv();
                this.innerText = editDiv.innerHTML;
                this.$emit('input', this.innerText);
            },
            getEditDiv(){
                return this.$el.getElementsByClassName("edit-div")[0];
            },
            getSelection() {
                return this.window.getSelection ? this.window.getSelection() : this.window.document.selection;
            },
            getSelectionText() {
                var selection = this.getSelection().getRangeAt(0);
                if (selection) {
                    return selection.toString();
                }
            },
            /**
             * 保持光标在最后
             * @param obj
             */
            keepLastIndex(obj=this.getEditDiv()) {
                console.log(obj)
                console.log(this.window.getSelection)
                console.log(this.window.document.selection)
                if (this.window.getSelection) { //ie11 10 9 ff safari
                    obj.focus(); //解决ff不获取焦点无法定位问题
                    var range = this.window.getSelection(); //创建range
                    range.selectAllChildren(obj); //range 选择obj下所有子内容
                    range.collapseToEnd(); //光标移至最后
                } else if (this.window.document.selection) { //ie10 9 8 7 6 5
                    var range = this.window.document.selection.createRange(); //创建选择对象
                    //var range = document.body.createTextRange();
                    range.moveToElementText(obj); //range定位到obj
                    range.collapse(false); //光标移至最后
                    range.select();
                }
            },
            getHtml() {
                return $(this.getEditDiv()).html();
            },
            getText() {
                return $(this.getEditDiv()).text();
            },
        }
    }
</script>
