<template>
  <div
    :class="{ fullscreen: fullscreen }"
    class="tinymce-container"
    :style="{ width: containerWidth }"
  >
    <textarea :id="tinymceId" class="tinymce-textarea"/>
  </div>
</template>

<script>
import plugins from "./plugins";
import toolbar from "./toolbar";
import load from "./dynamicLoadScript";
import urlConfig from "@/apis/url-config";
import { getToken } from "@/utils/auth";
// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
const tinymceCDN =
  "https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js";

export default {
  name: "Tinymce",
  // components: { editorImage },
  props: {
    id: {
      type: String,
      default: function () {
        return (
          "vue-tinymce-" +
          +new Date() +
          ((Math.random() * 1000).toFixed(0) + "")
        );
      },
    },
    value: {
      type: String,
      default: "",
    },
    toolbar: {
      type: Array,
      required: false,
      default() {
        return [];
      },
    },
    menubar: {
      type: String,
      default: "",
    },
    height: {
      type: [Number, String],
      required: false,
      default: 360,
    },
    width: {
      type: [Number, String],
      required: false,
      default: "auto",
    },
  },
  data() {
    return {
      hasChange: false,
      hasInit: false,
      tinymceId: "mytinymceId", //this.id,
      fullscreen: false,
      languageTypeList: {
        en: "en",
        zh: "zh_CN",
        es: "es_MX",
        ja: "ja",
      },
    };
  },
  computed: {
    containerWidth() {
      const width = this.width;
      if (/^[\d]+(\.[\d]+)?$/.test(width)) {
        // matches `100`, `'100'`
        return `${width}px`;
      }
      return width;
    },
  },
  watch: {
    value(val) {
      if (!this.hasChange && this.hasInit) {
        this.$nextTick(() =>
          window.tinymce.get(this.tinymceId).setContent(val || "")
        );
      }
    },
  },
  mounted() {
    this.init();
  },
  activated() {
    if (window.tinymce) {
      this.initTinymce();
    }
  },
  deactivated() {
    this.destroyTinymce();
  },
  destroyed() {
    this.destroyTinymce();
  },
  methods: {
    init() {
      // dynamic load tinymce from cdn
      load(tinymceCDN, (err) => {
        if (err) {
          this.$message.error(err.message);
          return;
        }
        this.initTinymce();
      });
    },
    initTinymce() {
      const _this = this;
      window.tinymce.init({
        selector: `#${this.tinymceId}`,

        content_style:
          "html,body { width: 100%;height: 100%;position: relative; background: transparent;padding:0;margin: 0;box-sizing: border-box;} body{padding:16px} p{margin:0;line-height:40px} img{ display: inline-block;}",
        language: this.languageTypeList["zh"],
        height: this.height,
        body_class: "panel-body ",
        object_resizing: false,
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar, //工具栏
        menubar: "", //this.menubar,
        plugins: plugins,
        end_container_on_empty_block: true,
        paste_data_images: true, // 粘贴的同时能把内容里的图片自动上传，非常强力的功能
        powerpaste_word_import: "clean",
        // imagetools_toolbar: "editimage", // 图片控制的工具栏
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: "square",
        advlist_number_styles: "default",
        // imagetools_cors_hosts: ["www.tinymce.com", "codepen.io"],
        default_link_target: "_blank",
        link_title: false,
        nonbreaking_force_tab: false, // 插入非中断空间；需要不间断的空间插件
        init_instance_callback: (editor) => {
          if (_this.value) {
            editor.setContent(_this.value);
          }
          _this.hasInit = true;
          editor.on("NodeChange Change KeyUp SetContent", () => {
            this.hasChange = true;
            this.$emit("input", editor.getContent());
          });
        },
        setup(editor) {
          editor.on("FullscreenStateChanged", (e) => {
            _this.fullscreen = e.state;
          });
        },
        // it will try to keep these URLs intact
        // https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@convert_urls/
        // https://stackoverflow.com/questions/5196205/disable-tinymce-absolute-to-relative-url-conversions
        convert_urls: false,
        // 整合七牛上传
        // images_dataimg_filter(img) {
        //   setTimeout(() => {
        //     const $image = $(img);
        //     $image.removeAttr('width');
        //     $image.removeAttr('height');
        //     if ($image[0].height && $image[0].width) {
        //       $image.attr('data-wscntype', 'image');
        //       $image.attr('data-wscnh', $image[0].height);
        //       $image.attr('data-wscnw', $image[0].width);
        //       $image.addClass('wscnph');
        //     }
        //   }, 0);
        //   return img
        // },
        images_upload_handler(blobInfo, success, failure, progress) {
          console.log(blobInfo.blob());
          // console.log(success);
          // console.log(failure);
          // console.log(progress);
          progress(0);
          // const token = _this.$store.getters.token;
          // getToken(token).then(response => {
          //   const url = response.data.qiniu_url;
          //   const formData = new FormData();
          //   formData.append('token', response.data.qiniu_token);
          //   formData.append('key', response.data.qiniu_key);
          //   formData.append('file', blobInfo.blob(), url);
          //   upload(formData).then(() => {
          //     success(url);
          //     progress(100);
          //   })
          // }).catch(err => {
          //   failure('出现未知问题，刷新页面，或者联系程序员')
          //   console.log(err);
          // });

          let form = new FormData();
          form.append("image", blobInfo.blob());
          form.append("token", getToken());
          axios
            .post(`${urlConfig.baseURL}admin/uploadimg`, form)
            .then((res) => {
              if (res && res.data && res.status === 200) {
                const { code, data } = res.data;
                if (code === 0) {
                  const { url, name } = data[0];
                  success(`${urlConfig.baseURL}storage/${url}`);
                  progress(100);
                } else if (code >= 100 && code <= 104) {
                  failure("登录信息已失效，请重新登录！");
                } else {
                  failure("出现未知问题，刷新页面，或者联系程序员！");
                }
              } else {
                failure("出现未知问题，刷新页面，或者联系程序员");
              }
            })
            .catch((error) => {
              reject();
            });
        },
      });
    },
    destroyTinymce() {
      const tinymce = window.tinymce.get(this.tinymceId);
      if (this.fullscreen) {
        tinymce.execCommand("mceFullScreen");
      }

      if (tinymce) {
        tinymce.destroy();
      }
    },
    setContent(value) {
      window.tinymce.get(this.tinymceId).setContent(value);
    },
    getContent() {
      window.tinymce.get(this.tinymceId).getContent();
    },
    imageSuccessCBK(arr) {
      arr.forEach((v) =>
        window.tinymce
          .get(this.tinymceId)
          .insertContent(`<img class="wscnph" src="${v.url}" >`)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
div {
}

// .tinymce-container {
//   position: relative;
//   // line-height: normal;
//   width: 100%;
//   box-sizing: border-box;
//   ::v-deep {
//     .mce-fullscreen {
//       z-index: 10000;
//       width: 100%;
//       box-sizing: border-box;
//     }
//     .mce-container {
//       position: relative;
//       // margin: -100px 0 0 0;
//       &::after,
//       &::before {
//         content: "";
//         display: block;
//         clear: both;
//       }
//     }
//     iframe {
//       width: 100%;
//       top:0;
//       left:0;
//       z-index:2;
//       position: absolute;
//       float: left !important;
//       // margin: -100px 0 0 0;
//     }
//   }
// }

// .tinymce-textarea {
//   visibility: hidden;
//   z-index: -1;
// }

// .editor-custom-btn-container {
//   position: absolute;
//   right: 4px;
//   top: 4px;
//   /*z-index: 2005;*/
// }

// .fullscreen .editor-custom-btn-container {
//   z-index: 10000;
//   position: fixed;
// }

// .editor-upload-btn {
//   display: inline-block;
// }
</style>
