<script setup lang="ts">
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {IDomEditor} from '@wangeditor/editor'
import MentionModal from "./MentionModal.vue";

const emit = defineEmits(['confirm'])

// mention
const isShowModal = ref(false)
const showModal = () => {
  isShowModal.value = true
}
const hideModal = () => {
  isShowModal.value = false
}
const insertMention = (id, name) => {
  const mentionNode = {
    type: 'mention',
    value: name,
    info: {id},
    children: [{text: ''}],
  }
  const editor = editorRef.value
  if (editor) {
    editor.restoreSelection()
    editor.deleteBackward('character')
    editor.insertNode(mentionNode)
    editor.move(1)
  }
}

// Dialog
const dialogVisible = ref(false)
const open = async (template) => {
  dialogVisible.value = true
  valueHtml.value = template
}
defineExpose({open})
const handleConfirm = () => {
  emit('confirm', valueHtml.value)
  dialogVisible.value = false
}

// Editor
const editorRef = shallowRef<IDomEditor>()
const editorId = ref('wangeEditor-1')
const toolbarConfig = {
  excludeKeys: ['group-video'],
  insertKeys: {
    index: 31,
    keys: ['ProcessRecordMenu']
  }
}
const editorConfig = {
  placeholder: '请输入内容...',
  EXTEND_CONF: {
    mentionConfig: {
      showModal,
      hideModal,
    },
  },
}
const valueHtml = ref()
const handleCreated = (editor: IDomEditor) => {
  editorRef.value = editor
}

// onBeforeUnmount
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
</script>

<template>
  <el-dialog v-model="dialogVisible" title="自定义模板" fullscreen>
    <div style="margin: 0 10px;">
      <el-alert title="输入 @ 可选择插入流程表单选项和默认选项" type="info" show-icon
                :closable="false"/>
    </div>
    <div style="border: 1px solid #ccc;margin: 10px;">
      <Toolbar
        style="border-bottom: 1px solid #ccc;"
        :editor="editorRef"
        :editorId="editorId"
        :defaultConfig="toolbarConfig"
      />
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :editorId="editorId"
        @onCreated="handleCreated"
      />
      <MentionModal v-if="isShowModal"
                    @hideMentionModal="hideModal"
                    @insertMention="insertMention"/>
    </div>
    <div style="margin-right: 10px;float: right;">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<style src="../../../../../../node_modules/@wangeditor/editor/dist/css/style.css"></style>
