<template>
  <div  v-show="myConfig.visible" @keydown.enter.stop="keyDown" @blue="onEditorBlur">
    <!-- 图片上传组件辅助-->
    <UploadBox v-show="false" id="iviewUp"  ref="uploadbox"  class="avatar-uploader" :config="myConfig"  @success="handleSuccess" :headers="headers"/>
    <Editor ref="myQuillEditor" :style="myConfig.editorStyle" :myConfig="myConfig" :toolbarOptions="myConfig.toolbarOptions" :value="value"  @updateValue="onEditorChange" @imgClick="imgClick" @initQuill="initQuill" />
  </div>
</template>
<script>
// 工具栏配置
import Base from '@/components/base/controlbase.vue';
import UploadBox from '@/components/picturebox/uploadbox.vue'
import { Quill } from '@vueup/vue-quill'
import Editor from './editor.vue';
export default {
    name: 'richtextbox',
    components:{
        UploadBox,Editor
    },
    extends: Base,
    data () {
        return {
            myConfig:{
                fileType:['jpg','jpeg','png','gif'],
                fileSize: 2,
                multiSelect:true,
                editorStyle:{
                    'height':'auto'
                },
                simpleFlag:false,
                showImage:true,
                uploadfile:'',
                toolbarOptions:[
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'header': 1 }, { 'header': 2 }],
                    [{ list:'ordered' }, { list:'bullet' }],
                    [{ script:'sub' }, { script:'super' }],
                    [{ 'indent': '-1' }, { 'indent': '+1' }],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'size': [false, '42px', '36px', '26px', '24px', '22px', '18px', '16px','15px', '14px', '12px', '10.5px', '9px', '7.5px','6.5px', '5.5px','5px'] }],
                    [{ 'font': [false,'SimSun','KaiTi','FangSong','SimHei','Microsoft-YaHei','PmingLiu','Impact','Georgia','Tahoma','Arial','Verdana'] }],
                    [{ header:[1, 2, 3, 4, 5, 6, false] }],
                    [{ 'align': [] }],
                    ["clean"]
                ],
              },
          
            quillUpdateImg:false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
            headers:{
                'billmoduleid':'img',
                'billno':'img'
                // token: sessionStorage.token
            }, // 有的图片服务器要求请求头需要有token
        };
    },

    mounted () {
        //eslint-disable-next-line no-labels
        this.onEditorFocus();
    },
    methods:{
        customInit () {
            if (!this.myConfig.simpleFlag) {
                if (!this.myConfig.uploadfile) {
                    this.myConfig.uploadfile = this.OmdUrl.uploadfile;
                }
            }
            if (this.myConfig.showImage) {
              this.myConfig.toolbarOptions.push(['link', 'image'])
            }
        },
        onEditorBlur () {
        // 失去焦点事件
            this.onEditorChange(this.quill.getHTML());
        },
        onEditorFocus (e) {
            if (this.myConfig.readOnly) {
                this.quill.enable(false);
            } else {
                this.quill.enable(true);
            }
        // 获得焦点事件
        },
        onEditorChange (value) {
            this.value = value;
        // 内容改变事件
            this.setFatherValue();
            //this.$emit('inputValue', this.content);
        },
   
        // 富文本图片上传前
        beforeUpload () {
        // 显示loading动画
            this.quillUpdateImg = true;
        },
        imgClick(value) {
            if (value) {
                if (!this.myConfig.readOnly) {
                    document.querySelector('#iviewUp input').click();
                }
            } else {
                this.quill.format('image', false);
            }
        },
        handleSuccess (res) {
        // res为图片服务器返回的数据
        // 获取富文本组件实例
            let quill = this.quill;
            // 如果上传成功
            if (res.returncode === '0') {
                // 获取光标所在位置
                let length = quill.getSelection().index;
                // 插入图片  res.url为服务器返回的图片地址
                let url = '';
                if (res.data[0].url) {
                    url = res.url;
                } else {
                    if (res.data[0].fileKey) {
                        res.data[0].filekey = res.data[0].fileKey;
                    }
                    url = this.OmdUrl.downfile + res.data[0].filekey;
                }
                quill.insertEmbed(length, 'image', url);
                // 调整光标到最后
                quill.setSelection(length + 1);
            } else {
                this.$message.error('图片插入失败');
            }
            // loading动画消失
            this.quillUpdateImg = false;
        },
        // 富文本图片上传失败
        uploadError () {
        // loading动画消失
            this.quillUpdateImg = false;
            this.$message.error('图片插入失败');
        },
        addQuillTitle () {
            // eslint-disable-next-line one-var
            const oToolBar = document.querySelector('.ql-toolbar'),
                aButton = oToolBar.querySelectorAll('button'),
                aSelect = oToolBar.querySelectorAll('select');
            aButton.forEach(function (item) {
                if (item.className === 'ql-script') {
                    item.value === 'sub' ? (item.title = '下标') : (item.title = '上标');
                } else if (item.className === 'ql-indent') {
                    item.value === '+1'
                        ? (item.title = '向右缩进')
                        : (item.title = '向左缩进');
                } else {
                    // eslint-disable-next-line no-undef
                    item.title = titleConfig[item.classList[0]];
                }
            });
            aSelect.forEach(function (item) {
                // eslint-disable-next-line no-undef
                item.parentNode.title = titleConfig[item.classList[0]];
            });
        },
        keyDown (e) {
            //e.stopPropagation();
        },
        initQuill(obj) {
            this.quill = obj.quill;
        },
        setDynamicText(value) {
          let quill = this.quill;
          let range = quill.getSelection(true);
          quill.insertEmbed(range.index, 'atusertag', {text:value}, Quill.sources.USER);
          quill.setSelection(range.index + 1, Quill.sources.SILENT);
          //quill.focus();
          //quill.update();
        },
        setCustomPro(obj) {
            if (obj) {
                this.myConfig = Object.assign({}, this.myConfig, obj);
            }
            if (obj.readOnly !== undefined) {
                this.onEditorFocus();
            }   
        }
    }
};
</script>

<style>
  .customEditor {
    line-height: normal !important;
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode=video]::before {
    content: "请输入视频地址:";
  }

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "四号";
  font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "四号";
  font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="42px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="42px"]::before {
  content: "初号";
  font-size: 42px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
  content: "小初";
  font-size: 36px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
  content: "一号";
  font-size: 26px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
  content: "小一";
  font-size: 24px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
  content: "二号";
  font-size: 22px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "小二";
  font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "三号";
  font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="15px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="15px"]::before {
  content: "小三";
  font-size: 15px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: "小四";
  font-size: 12px;
}


.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10.5px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10.5px"]::before {
  content: "五号";
  font-size: 10.5px;
}



.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="9px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="9px"]::before {
  content: "小五";
  font-size: 9px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="7.5px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="7.5px"]::before {
  content: "六号";
  font-size: 7.5px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="6.5px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="6.5px"]::before {
  content: "小六";
  font-size: 6.5px;
}


.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="5.5px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="5.5px"]::before {
  content: "七号";
  font-size: 5.5px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="5px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="5px"]::before {
  content: "八号";
  font-size: 5px;
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '黑体';
  }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimSun']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimSun']::before {
  content: "宋体";
  font-family: SimSun,sans-serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='KaiTi']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='KaiTi']::before {
  content: "楷体";
  font-family: KaiTi,sans-serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='FangSong']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='FangSong']::before {
  content: "仿宋";
  font-family: FangSong,sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimHei']::before {
  content: "黑体";
  font-family: SimHei,sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Microsoft-YaHei']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Microsoft-YaHei']::before {
  content: "微软雅黑";
  font-family: Microsoft YaHei,sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='PmingLiu']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='PmingLiu']::before {
  content: "PmingLiu";
  font-family: PmingLiu,sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Impact']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Impact']::before {
  content: "Impact";
  font-family: Impact,sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Georgia']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Georgia']::before {
  content: "Georgia";
  font-family: Georgia,sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Tahoma']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Tahoma']::before {
  content: "Tahoma";
  font-family: Tahoma,sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
  content: "Arial";
  font-family: Arial,sans-serif;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Verdana']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Verdana']::before {
  content: "Verdana";
  font-family: Verdana,sans-serif;
}
.ql-font-SimSun {
      font-family: SimSun , sans-serif;
}
.ql-font-KaiTi {
      font-family: KaiTi , sans-serif;
}
.ql-font-FangSong {
      font-family: FangSong , sans-serif;
}
.ql-font-SimHei {
      font-family: SimHei , sans-serif;
}
.ql-font-KaiTi {
      font-family: KaiTi , sans-serif;
}
.ql-font-Microsoft-YaHei {
      font-family: Microsoft YaHei , sans-serif;
}
.ql-font-PmingLiu {
      font-family: PmingLiu , sans-serif;
}

.ql-font-Impact {
      font-family: Impact , sans-serif;
}

.ql-font-Georgia {
      font-family: Georgia , sans-serif;
}

.ql-font-Tahoma {
      font-family: Tahoma , sans-serif;
}

.ql-font-Arial {
      font-family: Arial , sans-serif;
}
.ql-font-Verdana {
      font-family: Verdana , sans-serif;
}
.ql-picker-options {
    height: 300px;
    overflow: auto;
}
</style>
