<template>
  <div class="edit_container" :class="{ isError: isError && isValidator, isFocus, isDisable: disable, isBlur }">
    <!-- 工具栏 -->
    <Toolbar id="editor-toolbar" :editor="editor" :defaultConfig="toolbarsConfig" />
    <!-- 编辑器 -->
    <Editor
      id="editor-text-area"
      :style="{ height: height + 'px', 'overflow-y': 'hidden' }"
      :defaultConfig="editorsConfig"
      v-model="html"
      @onChange="onChange"
      v-bind="$attrs"
      v-on="$listeners"
      @onCreated="onCreated"
      @onBlur="onBlur"
      @onFocus="onFocus"
    />
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

export default {
  name: 'firefly-edit',
  components: { Editor, Toolbar },
  props: {
    maxLength: {
      type: Number
    },
    value: {
      require: true
    },
    height: {
      default: '400'
    },
    editorConfig: {
      default: () => {}
    },
    toolbarConfig: {
      type: Object,
      default: () => {}
    },
    disable: {
      type: Boolean,
      default: false
    },
    isValidator: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    disable(newVal) {
      this.$nextTick(() => {
        newVal ? this.editor.disable() : this.editor.enable();
        this.isFocus = false;
      });
    },
    value(newVal, oldVal) {
      if (!oldVal && newVal) {
        this.editor.setHtml(newVal);
      }
    }
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarsConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
        ...this.toolbarConfig
      },
      editorsConfig: {
        placeholder: '请输入内容...',
        autoFocus: false,
        maxLength: this.maxLength,

        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {},
        ...this.editorConfig
      },
      isEmpty: false,
      isError: false,
      isFocus: false,
      isBlur: true
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      this.$emit('input', editor.getHtml());
      this.isEmpty = !editor.getText();
    },
    onBlur(editor) {
      this.isError = this.isEmpty;
      this.isFocus = false;
      this.isBlur = true;
    },
    onFocus(editor) {
      this.isError = false;
      this.isFocus = true;
      this.isBlur = false;
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      // this.html = this.value;
      this.disable ? this.editor.disable() : this.editor.enable();
    });
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  }
};
</script>

<style lang="scss" scope>
@import url('@wangeditor/editor/dist/css/style.css');

.w-e-full-screen-container {
  z-index: 999999999999999;
}

.edit_container {
  --w-e-toolbar-active-bg-color: #fff;
  //   --w-e-toolbar-active-color: #3a86ff;
  --w-e-toolbar-active-color: #3a86ff;
  --w-e-toolbar-color: #24222f;
  --w-e-toolbar-disabled-color: #a8a8a8;
  border: 1px solid #eaeaec;
  border-radius: 6px;
  &.isFocus {
    border: 1px solid #3a86ff;
    border-radius: 6px;
  }
  &.isDisable {
    border: 1px solid #eaeaec;
    .w-e-bar {
      background: #f6f7f9;
      cursor: not-allowed;
    }
    .w-e-text-container {
      background: #f6f7f9;
      cursor: not-allowed;
    }
  }
  &.isError {
    border: 1px solid #e85d3d;
    border-radius: 6px;
  }

  #editor-toolbar {
    border-bottom: 1px solid #eaeaec;
  }
  #editor-text-area {
    border-radius: 0 0 6px 6px;
  }
  .w-e-bar {
    padding: 0 4px;
    border-radius: 6px;

    .w-e-bar-item {
      height: 32px;
    }

    * {
      line-height: 32px;
    }

    .w-e-bar-divider {
      height: 30px;
    }
  }

  .w-e-menu-tooltip-v5:after {
    z-index: 2;
    top: 20px;
  }
  .w-e-menu-tooltip-v5:before {
    top: 30px;
  }

  .w-e-bar-item button {
    height: 16px;
  }

  .w-e-bar-item-group .w-e-bar-item-menus-container {
    margin-top: 32px;
  }

  .w-e-bar-item button.active {
    background-color: #fff;
    color: #3a86ff;

    svg {
      fill: #3a86ff;
    }
  }

  .w-e-menu-tooltip-v5:before {
    background-color: #333;
  }

  .w-e-menu-tooltip-v5:after {
    border-bottom: 5px solid #333;
  }

  .w-e-select-list ul .selected {
    color: var(--w-e-toolbar-active-color);
    svg {
      fill: var(--w-e-toolbar-active-color);
    }
  }

  .w-e-select-list ul li:hover {
    background-color: #ebf2ff;
  }

  .w-e-drop-panel {
    margin-top: 32px;
  }
}
</style>
