<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :class="showToolbar == true?'':'tooll'"
      :defaultConfig="toolbarConfig"
      :mode="mode"

    />
    <Editor
      :style="`height:${height}px;overflow-y: hidden;`"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"

    />
  </div>
</template>

<script>
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import {
   imgUp
 } from '../../api/imgFlieUp'
export default {
  components: { Editor, Toolbar },
  props: {
    value:{
      type: String,
      default: ''
    },
      read: {
        type: Boolean,
        default: false
      },
      height:{
        type: Number,
        default: 300
      }
    },
  data() {
    return {
      // read:false,
      editor: null,
      showToolbar: true, // 默认显示编辑栏
      html: "",
      toolbarConfig: {
        // 不要的功能按钮
        excludeKeys: ['insertVideo','uploadVideo','insertImage'],

      },
      editorConfig: {
        maxLength:254,
        readOnly:false,
        placeholder: "请输入内容...",
        MENU_CONF: {
           uploadImage: {
                      customUpload: this.uploadImg, // 自定义上传方法
                    },
        },
      },
      mode: "default", // or 'simple'
    };
  },

  watch: {
  read: {
   handler(newVal, oldVal) {

          // this.showToolbar = !newVal;
          // this.editorConfig.readOnly = newVal;
         this.$nextTick(() => {
          this.showToolbar = !newVal;
          this.editorConfig.readOnly = newVal;
         });
       },
       immediate: true, // 添加此选项以立即执行回调
        deep:true
    },
value(newVule,old){
  if(newVule !='<p><br></p>'){
   this.html = this.value;
   console.log(newVule, old);
  }
},
  },
  // computed: {
  //   computedEditorConfig() {
  //     return {
  //       readOnly: this.read,
  //       placeholder: "请输入内容...",
  //       MENU_CONF: {
  //         uploadImage: {
  //           customUpload: this.uploadImg, // 自定义上传方法
  //         },
  //       },
  //     };
  //   }
  // },
  mounted() {
    // 异步渲染编辑器
    this.$nextTick(() => {
      this.html = this.value;
    });
  },
  methods: {
    // 上传图片
    uploadImg(file, insertFn) {
      const { type } = file;
      if (type.indexOf("image") < 0) {
        this.$message.warning("请选择上传图片");
        return false;
      }
      const formData = new FormData();
      formData.append("file", file);

      imgUp(formData)
        .then((res) => {
          console.log(res)
            if (res.code == '') {
            // 从 res 中找到 url alt href ，然后插入图片
            insertFn(res.data.url);
          } else {
            this.$message.error(res.statusText || "上传失败");
          }
        })
        .catch(() => {
          this.$message.error("上传失败");
        });
    },

    // 上传视频
    // uploadVideo(file, insertFn) {
    //   const { type } = file;
    //   if (type.indexOf("video") < 0) {
    //     this.$message.warning("请选择上传视频");
    //     return false;
    //   }
    //   const formData = new FormData();
    //   formData.append("file", file);
    //   this.$api
    //     .uploadFile(formData)
    //     .then((res) => {
    //       if (res.status === 200) {
    //         // 从 res 中找到 url poster(封面图) ，然后插入视频
    //         insertFn(res.data.url);
    //       } else {
    //         this.$message.error(res.statusText || "上传失败");
    //       }
    //     })
    //     .catch(() => {
    //       this.$message.error("上传失败");
    //     });
    // },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onChange() {
      this.$emit("input", this.html);
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>

<style scoped lang="scss">
@import url("./index.css");
::v-deep .tooll{
  .w-e-toolbar{
    display: none;
  }
}

</style>
