<template>
  <div class="tinymce-boxz" style="width: 100%">
    <Editor v-model="content" :init="init"/>
  </div>
</template>

<script setup>
import tinymce from 'tinymce'
import Editor from "@tinymce/tinymce-vue";
import {defineProps} from "vue";
import {ElLoading, ElMessage, ElNotification} from "element-plus";
import {getToken} from '@/utils/auth'
import axios from "axios";

import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/media'
import 'tinymce/plugins/template'
import 'tinymce/plugins/code'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/table'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/autosave'
import '@/assets/axupimgs/plugin.js'//多图上传插件

const emit = defineEmits(['update:value'])
const props = defineProps({
  //默认值
  value: {
    type: String,
    default: "",
  },
  imageUrl: {
    type: String,
    default: "",
  },
  fileUrl: {
    type: String,
    default: "",
  },
  plugins: {
    type: [String, Array],
    default:
        "preview searchreplace autolink directionality visualblocks visualchars fullscreen image axupimgs link media template code codesample table pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave",
  },
  toolbar: {
    type: [String, Array],
    default: [
      "fullscreen undo redo | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | blockquote subscript superscript removeformat ",
      "styleselect formatselect fontselect fontsizeselect |  table image axupimgs media  pagebreak insertdatetime  selectall visualblocks searchreplace | code preview | indent2em lineheight formatpainter",
    ],
  },
  fontFormats: {
    type: [String, Array],
    default: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;"
  },
  width: {
    type: String,
    default: 'auto'
  },
  height: {
    type: Number,
    default: 500
  }
})
const content = ref(props.value);
const imgUrl = ref();
// const apiKey = reactive("v4zo4n22oanvco29ws5drh0pecuf3gh53clx53cccj3grjwg");
const init = reactive({
  language_url: '/langs/zh_CN.js', //汉化路径是自定义的
  skin_url: '/skins/ui/oxide', //皮肤
  content_css: '/skins/content/default/content.css',
  language: 'zh_CN',
  placeholder: "在这里输入文字", //textarea中的提示信息
  min_width: 300,
  min_height: 200,
  width: props.width,
  height: props.height, //注：引入autoresize插件时，此属性失效
  resize: "both", //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
  promotion: false,
  branding: false, //tiny技术支持信息是否显示
  statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
  elementpath: false, //元素路径是否显示
  font_formats: props.fontFormats,  //字体样式
  plugins: props.plugins, //插件配置 axupimgs indent2em
  toolbar: props.toolbar, //工具栏配置，设为false则隐藏
  menubar: "file edit view format table tools", //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
  images_upload_url: '/workflow/process/file/upload',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
  // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
  paste_data_images: true, //图片是否可粘贴
  file_picker_types: "file image", //file image media分别对应三个类型文件的上传：link插件，image和axupimgs插件，media插件。想屏蔽某个插件的上传就去掉对应的参数
  // 文件上传处理函数
  setup: function (editor) {
    editor.on('change', function (e) {
      tinymce.activeEditor.save();//执行自动保存
    });
  },
  //此处为图片上传处理函数
  images_upload_handler: (blobInfo, success) => {
    // new Promise((resolve, reject) => {
    let formData = new FormData()
    formData.append('file', blobInfo.blob())
    //上传图片接口 上传成功后返回图片地址，用于显示在富文本中
    uploadFile(formData, props.imageUrl, success, true)
    // }),
  },
  images_upload_handler_not_loading: (blobInfo, success) => {
    let formData = new FormData()
    formData.append('file', blobInfo.blob())
    //上传图片接口
    uploadFile(formData, props.imageUrl, success, false)
  },
  file_picker_callback: (callback, value, meta) => {
    // 使用案例http://tinymce.ax-z.cn/general/upload-images.php
    // meta.filetype  //根据这个判断点击的是什么file image media
    let filetype; //限制文件的上传类型,需要什么就添加什么的后缀
    if (meta.filetype == "image") {
      filetype = ".jpg, .jpeg, .png, .gif, .ico, .svg";
    } else if (meta.filetype == "media") {
      filetype = ".mp3, .mp4, .avi, .mov";
    } else {
      filetype =
          ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4, .jpg, .jpeg, .png, .gif, .ico, .svg";
    }
    let inputElem = document.createElement("input"); //创建文件选择
    inputElem.setAttribute("type", "file");
    inputElem.setAttribute("accept", filetype);
    inputElem.click();
    inputElem.onchange = () => {
      let file = inputElem.files[0]; //获取文件信息
      let xhr, formData;
      xhr = new XMLHttpRequest();
      xhr.withCredentials = false;
      xhr.open('POST', import.meta.env.VITE_BASE_URL + props.imageUrl);
      xhr.setRequestHeader(
          'Authorization', getToken()
      )
      let loading = ElLoading.service({
        lock: true,
        text: '文件上传中...',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      xhr.onload = function () {
        let res;
        // if (xhr.status != 200) {
        //   failure('HTTP Error: ' + xhr.status);
        //   return;
        // }
        res = JSON.parse(xhr.responseText);
        ElNotification({
          title: '提示',
          message: res.code === 1000 ? '上传成功' : '上传失败',
          type: res.code === 1000 ? 'success' : 'error'
        })
        loading.close()
        const fileUrl = res.data.url;
        // '?fileId='+res.data.id+
        callback(fileUrl + '?fileName=' + res.data.originalFilename, {text: file.name, title: file.name});
      };
      formData = new FormData();
      formData.append('file', file, file.name);
      xhr.send(formData);
      //
      // let reader = new FileReader();
      // reader.readAsDataURL(file);
      // reader.onload = function () {
      //   let formData;
      //   let id = "blobid" + new Date().getTime();
      //   let blobCache = tinymce.activeEditor.editorUpload.blobCache;
      //   let base64 = reader.result.split(",")[1];
      //   let blobInfo = blobCache.create(id, file, base64);
      //   blobCache.add(blobInfo);
      //   // callback(blobInfo.blobUri(), {alt: file.name});
      //   formData = new FormData();
      //   formData.append('file', file, file.name );
      //   uploadFile(formData, props.imageUrl,callback)
      // };
    };
  },
});
//内容有变化，就更新内容，将值返回给父组件
watch(() => {
  emit("update:value", content.value);
});
const uploadFile = (formData, url, success, isLoading) => {
  let loading = null
  if (isLoading) {
    loading = ElLoading.service({
      lock: true,
      text: '图片上传中...',
      background: 'rgba(0, 0, 0, 0.7)',
    })
  }

  axios.post(
      import.meta.env.VITE_BASE_URL + url,
      formData,
      {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: getToken()
        }
      }
  ).then(res => {
    // if (res.status !== 200) {
    //   ElMessage.error("上传失败!")
    // }
    let data = res.data
    if (data.code !== 1000) {
      ElMessage.error(data.msg)
      if (loading) {
        loading.close()
      }
    } else {
      if (isLoading) {
        success(data.data.url)
      } else {
        success(data.data.url, data.data.originalFilename)
      }
      if (loading) {
        loading.close()
      }
    }
  })
}
</script>
<style scoped lang="scss">
.tox-sidebar-wrap {
  &::-webkit-scrollbar {
    width: 6px;
  }

  // 滚动条轨道
  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  // 小滑块
  &::-webkit-scrollbar-thumb {
    background: rgba(80, 81, 82, 0.29);
    border-radius: 10px;
  }
}

.tinymce-boxz > textarea {
  display: none;

}

</style>
<style lang="scss">
/* 隐藏apikey没有绑定当前域名的提示 */
.tox-notifications-container .tox-notification--warning {
  display: none !important;
}

.tox.tox-tinymce {
  max-width: 100%;
}
</style>
