<template>
  <div class="shape shape-text" :id="`shape-${elementInfo.id}`"
    :style="isLayerEdit?{
      top: elementInfo.top + 'px',
      left: elementInfo.left + 'px',
      width: elementInfo.width + 'px',
      height: elementInfo.height + 'px',
    }:{
      top: elementInfo.percentageTop*100 + '%',
      left: elementInfo.percentageLeft*100 + '%',
      width: elementInfo.percentageWidth*100 + '%',
      height: elementInfo.percentageHeight*100 + '%',
      pointerEvents:'none'
    }"
    @mousedown.stop="(e)=>{handleMoveStart(e,'move')}"
    @contextmenu.stop="showContentMenu"
  >
    <!-- 裹一层,方便拖拽和移动 -->
    <div class="layer-editor-wrap">
      <div style="width:100%;height:100%;" :id="`${elementInfo.id}-editorDom`" @mousedown.stop>
        <template v-if="isLayerEdit">
          <Editor v-model="elementInfo.richContent" :init="setting" ref="editor"></Editor>
        </template>
        <template v-else>
          <div class="editor-content"
              :style="{width:(elementInfo.width - 20)+'px'}" 
          v-html="elementInfo.richContent"></div>
        </template>
      </div>
    </div>
    <div class="borderline" v-if="isActive">
      <div class="left-1 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'LEFT_TOP')}"></div>
      <div class="left-2 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'LEFT')}"></div>
      <div class="left-3 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'LEFT_BOTTOM')}"></div>
      <div class="line-middle-1 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'TOP')}"></div>
      <div class="line-middle-2 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'BOTTOM')}"></div>
      <div class="right-1 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'RIGHT_TOP')}"></div>
      <div class="right-2 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'RIGHT')}"></div>
      <div class="right-3 resize-handle" @mousedown.stop="(e)=>{handleScaleStart(e,'RIGHT_BOTTOM')}"></div>
    </div>
<!--     <div class="borderline" v-if="!isActive&&isLayerEdit"></div> -->
    <!-- 自定义右键菜单 -->
    <ContextMenu :menu="contextmenus" :menuId="elementInfo.id"
      @deleteShape="handleDeleteLayer"
      @copyShape="handleCopyShape"
    />
  </div>
</template>

<script>
import {BaseTextShape} from '../../../utils/config';
import shapeMixin from './shapeMixin';
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 {
  mixins:[shapeMixin],
  props:{
    elementInfo:{
      type:Object,
      default:()=>{
        return BaseTextShape
      }
    }
  },
  components:{Editor},
  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: `#${this.elementInfo.id}-editorDom`,
        paste_as_text: true,
        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: ".layer-text-toolbar",//将toolbar放到指定div上
        skin_url: "/static/css",
        content_url: "/static/css",
        //加placeholder
        placeholder:"点击输入文本内容"
      }
    };
  },
  watch:{
    'elementInfo.richContent'(val){
      console.log(`id-${this.elementInfo.id}`,'val:',val.length)
    }
  },
  methods: {},
};
</script>
<style lang="scss">
.shape{
  z-index: 4;
  .layer-editor-wrap{
    .editor-content{
      ul{
        margin-left: 1em;
        list-style-type: disc;
      }
      ol{
        margin-left: 1em;
        list-style-type: decimal;
      }
    }
  }
}
</style>
<style scoped lang="scss">
.shape{
  position:absolute;
 .layer-editor-wrap{
    width:100%;
    height: 100%;
    padding: 10px;
    z-index:2;//要比borderline的层级高,但又不能比chart-wrap的层级高
    box-sizing: border-box;
    position:relative;
    >div{
      cursor: pointer;
    }
    .editor-content{
      /* width:calc(100% - 20px); */
      padding:10px;
      font-size: 16px;
      position: absolute;
      transform-origin: 0 0;
      word-wrap: break-word;
    }
    .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
      left:10px !important;
    }
  }
  .borderline{
    z-index: 1;
  }
}
</style>
