<template>
  <div
    :draggable="this.$parent.type === 'edit'"
    class="editor-wrap flex-center"
    :id="`text_${index}_${position}`"
  >
    <template v-if="$parent.type!=='show'">
      <Editor 
        v-model="content" 
        :init="setting" 
        ref="editor"></Editor>
    </template>
    <template v-else>
      <div class="content-wrap">
        <div class="content" id="content" v-html="getRichContent()" :style="getTextContentSize()"></div>
      </div>
    </template>
    <template v-if="$parent.type!=='show'">
      <div class="line-top"></div>
      <div class="line-left"></div>
      <div class="line-right"></div>
      <div class="line-bottom"></div>
    </template>
    <!-- 透明遮罩层,防止交换位置时,图片拖入富文本 -->
    <template v-if="this.$parent.type === 'edit' && this.$parent.choosedId !== this.$parent.pageItem.id ">
      <div class="cover-box" @click="initEditor"></div>
    </template>
    <el-tooltip content="按住拖动" placement="bottom" v-if="this.$parent.type === 'edit' 
            && this.$parent.choosedId === this.$parent.pageItem.id &&![1,6].includes($parent.modelId)">
    <div 
        class="dragBtn"
    ></div>
  </el-tooltip>
  </div>
</template>

<script>
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/quickbars"; //快速栏插件
import "tinymce/plugins/fullscreen"; //全屏插件
import "tinymce/plugins/paste"; //黏贴插件
import "tinymce/icons/default/icons";
export default {
  components:{Editor},
  props:{
    index:{//pageIndex
      type:Number
    },
    position:{//elmants.position
      type:Number
    },
  },
  data() {
    return {
      setting: {
        language: "zh_CN",
        language_url: require("../../utils/zh_CN.js"),
        menubar: false,
        toolbar: [
          "indent outdent alignleft aligncenter alignright alignjustify forecolor",
          "bold italic underline strikethrough numlist bullist backcolor",
          "fontselect fontsizeselect",
        ],
        quickbars_selection_toolbar:false,  
        quickbars_insert_toolbar: false,
        plugins: "lists quickbars paste",
        height: 350,
        inline: true,
        selector: `#text_${this.index}_${this.position}`,
        paste_as_text: true,
       /*  paste_block_drop: true, 开启后阻止drop事件*/
        fontsize_formats:'12px 14px 16px 18px 20px 22px 24px 36px 48px',
        font_formats:`微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';
                      楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;
                      Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;
                      Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;
                      Courier New=courier new,courier;Georgia=georgia,palatino;
                      Helvetica=helvetica;Impact=impact,chicago;
                      Webdings=webdings;Wingdings=wingdings`,
        /* toolbar_persist:true,//始终显示toolbar */
        fixed_toolbar_container: ".richtext-tool",//将toolbar放到指定div上
        skin_url: "/static/css",
        content_url: "/static/css",
        placeholder:"点击输入文本内容"
      },
      content:'',
      initFlag: false,
    };
  },
  watch:{
    content(con) {
      const { elementId } = this.$refs.editor;
      if (this.initFlag) {
        //不会触发contentWatch但是会改变getContent
        tinymce.editors[elementId].setContent(con);
        this.initFlag = false;
      }
      let richContent = tinymce.editors[elementId].getContent();
      let val = tinymce.editors[elementId].getContent({ format: "text" });
      this.$emit("getText", { val, richContent });
    },
  },
  methods: {
    initTiny() {
      const { elements } = this.$parent.pageItem;
      const el = elements.find((i) => i.position === this.position);
      if (el) {
        this.content = el.richContent;
        this.initFlag = true;
      }
    },
    initEditor(){
      this.getFocus()
      this.$parent.initEditor(this.position)
    },
    getRichContent(){
      return this.$parent.getRichContent(this.position)
    },
    getTextContentSize(){
      return this.$parent.getTextContentSize(this.$parent.pageItem.modelId,this.position)
    },
    setMode(mode){
      const { elementId } = this.$refs.editor;
      tinymce.editors[elementId].setMode(mode);
    },
    getFocus(){
      const { elementId } = this.$refs.editor;
      tinymce.editors[elementId].show()
      tinymce.editors[elementId].focus()
    },
  },
};
</script>

<style scoped lang="scss">
.editor-wrap{
  .cover-box{
    position:absolute;
    left: 0;
    right:0;
    top:0;
    bottom: 0;
    background-color: transparent;
  }
  .dragBtn{
    left:-10px;
    top:-10px;
  }
  .mce-content-body {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    &:focus-visible{
      outline: 0;
    }
    ul{
      margin-left: 1em;
      list-style-type: disc;
    }
    ol{
      margin-left: 1em;
      list-style-type: decimal;
    }
  }
  .mce-edit-focus{
    outline: 0;
  }
  .tox .tox-tbtn--bespoke .tox-tbtn__select-label{
    width:4.5em !important;
  }
  .tox .tox-tbtn{
    width:32px;
  }
  .tox-menu.tox-swatches-menu.tox-selected-menu{
    left:185px !important;
  }
  .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
    left:10px !important;
  }
}
</style>
