<template>
  <div class="richText">
    <Toolbar class="toolBar" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      style="height: 500px; overflow-y: hidden"
      class="toolEditor"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { sysUpload } from '@/api/login.js';
import bus from '@/utils/mitt';

const props = defineProps({
  modelValue: [String],
});

const emit = defineEmits();
const { proxy } = getCurrentInstance();
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref('');
const mode = ref('default');
const toolbarConfig = ref({});
const editorConfig = ref({
  placeholder: '请输入内容...',
  MENU_CONF: {},
});

// 富文本上传图片
editorConfig.value.MENU_CONF['uploadImage'] = {
  // 自定义上传图片方法
  customUpload(file, insertFn) {
    proxy.$modal.loading('正在上传中...');
    let formdata = new FormData();
    formdata.append('file', file);
    let config = {
      headers: { 'Content-Type': 'multipart/form-data' },
    };
    sysUpload(formdata, config).then(res => {
      if (res && res.code === 200) {
        // 富文本中插入图片
        insertFn(res.data.url);
      }
      proxy.$modal.closeLoading();
    });
  },
};
// 富文本上传视频
editorConfig.value.MENU_CONF['uploadVideo'] = {
  // 自定义上传方法
  customUpload(file, insertFn) {
    proxy.$modal.loading('正在上传中...');
    let formdata = new FormData();
    formdata.append('file', file);
    let config = {
      headers: { 'Content-Type': 'multipart/form-data' },
    };
    sysUpload(formdata, config).then(res => {
      if (res && res.code === 200) {
        // 富文本中插入图片
        insertFn(res.data.url);
      }
      proxy.$modal.closeLoading();
    });
  },
};

// 编辑器回调函数
const handleCreated = editor => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

//输入改变
const handleChange = editor => {
  emit('update:modelValue', editor.getHtml());
};

watch(
  () => props.modelValue,
  val => {
    if (!!!val) return;
    // console.log('富文本编辑器默认显示内容--', val);
    valueHtml.value = val;
  },
  { immediate: true, deep: true }
);
// 模拟 ajax 异步获取内容
onMounted(() => {
  bus.on('changeEdit', i => {
    if (!i) editorRef.value.disable();
    else editorRef.value.enable();
  });
});
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script>
<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.richText {
  .toolBar {
    .w-e-bar {
      background: $mainColor1;
      border-bottom: 1px solid #c6c6c6;
      color: #fff;
    }
    .w-e-bar-item {
      .w-e-select-list {
        background: $mainColor1 !important;
      }
      .w-e-select-list ul .selected {
        background: $mainColor2 !important;
      }
      .w-e-select-list ul li {
        &:hover {
          background: $mainColor2 !important;
        }
      }
      button {
        color: #fff;
        &:hover {
          background: $mainColor1;
        }
      }
      .active {
        background: $mainColor1;
      }
    }
    .w-e-bar-item-group .w-e-bar-item-menus-container {
      background: $mainColor1;
      border-color: #c6c6c6;
    }
  }
  .toolEditor {
    .w-e-scroll {
      background: $mainColor1;
      color: #fff;
    }
  }
}
</style>