<script setup lang="ts">
import { onBeforeUnmount, computed, PropType, unref, nextTick, ref, watch, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ElMessage } from 'element-plus'
import { IDomEditor, IEditorConfig, DomEditor } from '@wangeditor/editor'

// const currentLocale = computed(() => localeStore.getCurrentLocale)

// i18nChangeLanguage(unref(currentLocale).lang)

const props = defineProps({
  editorId: {
    type: String,
    default: 'wangeEditor-1'
  },
  height: {
    type: String,
    default: '300px'
  },
  editorConfig: {
    type: Object as PropType<IEditorConfig>,
    default: () => undefined
  },
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['change', 'updateValue'])

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef<IDomEditor>()

const valueHtml = ref('')

watch(
  () => props.modelValue,
  (val: string) => {
    if (val === unref(valueHtml)) return
    valueHtml.value = val
  }
)

// 监听
watch(
  () => valueHtml.value,
  (val: string) => {
    emit('updateValue', val)
  }
)

const handleCreated = (editor: IDomEditor) => {
  editorRef.value = editor;
  editorRef.value.on('fullScreen', () => {
     const fullscreenBtn = <HTMLElement>document.querySelector('[data-menu-key="fullScreen"]'); 
     if (fullscreenBtn) { 
      fullscreenBtn.setAttribute('data-tooltip', '退出全屏');
     }
  })
  editorRef.value.on('unFullScreen', () => { 
      const fullscreenBtn = <HTMLElement>document.querySelector('[data-menu-key="fullScreen"]'); 
        if (fullscreenBtn) { 
      fullscreenBtn.setAttribute('data-tooltip', '全屏');
     }
  });
  valueHtml.value = props.modelValue
}

const toolbarConfig = ref({
  excludeKeys: ['group-video', 'emotion', 'insertImage', 'editImage','viewImageLink', 'deleteImage',  ]
});

// 编辑器配置
const editorConfig = computed((): IEditorConfig => {
  return Object.assign(
    {
      readOnly: false,
      customAlert: (s: string, t: string) => {
        switch (t) {
          case 'success':
            ElMessage.success(s)
            break
          case 'info':
            ElMessage.info(s)
            break
          case 'warning':
            ElMessage.warning(s)
            break
          case 'error':
            ElMessage.error(s)
            break
          default:
            ElMessage.info(s)
            break
        }
      },
      autoFocus: false,
      scroll: true,
      MENU_CONF: {
        uploadImage: {
          base64LimitSize: 20 * 1024 * 1024 ,
          uploadImgShowBase64: true,
          showBase64: true, // 设置为true表示上传图片将以Base64形式显示
        },
        fullScreen: {
          onClick: () => {
         //点击全屏
         console.log(';dianji');
         },
        }
      },
      onFullscreen: (isFullscreen) => {
      if (isFullscreen) {
      console.log('去');
      } else {
        console.log('去');
      }
    },
      uploadImgShowBase64: true,
    },
    props.editorConfig || {}
  )
})

const editorStyle = computed(() => {
  return {
    height: '300px'
  }
})

// 回调函数
const handleChange = (editor: IDomEditor) => {
  emit('change', editor)
}

// 组件销毁时，及时销毁编辑器
onBeforeUnmount(() => {
  const editor = unref(editorRef.value)

  // 销毁，并移除 editor
  editor?.destroy()
})

const getEditorRef = async (): Promise<IDomEditor> => {
  await nextTick()
  return unref(editorRef.value) as IDomEditor
}

defineExpose({
  getEditorRef
})
</script>

<template>
  <div class="border" id="wangeEditor-1" fullscreen>
    <!-- 工具栏 -->
    <Toolbar
      :editor="editorRef"
      :editorId="editorId"
       :defaultConfig="toolbarConfig"
      class="border-bottom"
    />
    <!-- 编辑器 -->
    <Editor
      v-model="valueHtml"
      :editorId="editorId"
      :defaultConfig="editorConfig"
      :style="editorStyle"
      @on-change="handleChange"
      @on-created="handleCreated"
    />
  </div>
</template>

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