<!--
 * @Description: 对wangeditor封装
 * @Author: kcz
 * @Date: 2020-03-30 12:44:03
 * @LastEditors: kcz
 * @LastEditTime: 2020-04-26 19:21:27
 -->
<template>
  <div style="width: 650px">
    <Editor :value="value" @input="onEditorChange($event)" :init="init" :key="activeKey"></Editor>
    <ImageLibrary :visible="isshow" :onlyImg="true" @changeModalStatus="changeModalStatus" />
  </div>
</template>
<script>
import { uploadFile } from '@/api/common.js'
import { linkUrl } from '@/utils/util.js'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/lineheight'
import 'tinymce/plugins/formatpainter'
import 'tinymce/plugins/indent2em'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/media'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/pagebreak'
export default {
  name: 'Edior',
  props: {
    value: {
      type: String,
      default: ''
    },
    editContent: {
      type: String,
      default: '请输入内容'
    },
    options: {
      type: Object,
      default: () => {
        return {}
      }
    },
    activeKey: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      tinymceHtml: '',
      editor: null,
      init: {
        selector: `Editor${this.activeKey}`,
        language_url: './static/zh_CN.js',
        language: 'zh_CN',
        skin_url: './static/tinymce/skins/ui/oxide',
        content_css: './static/tinymce/skins/content/default/content.css',
        height: 520,
        content_style: 'p{margin:0 !important;padding:0} body{margin:0 !important;padding:0 28px !important},',
        // width: 375,
        menubar: false,
        toolbar_mode: 'sliding',
        plugins:
          'link lists image indent2em  code table colorpicker textcolor wordcount contextmenu lineheight formatpainter media  | hr | pagebreak | filemanager',
        toolbar: [
          ' bold italic underline lineheight formatpainter indent2em strikethrough | fontsizeselect | forecolor backcolor | bullist numlist | alignleft aligncenter alignright alignjustify | outdent indent blockquote | link unlink image media | hr pagebreak | undo redo | removeformat | code | filemanager'
        ],
        setup: editor => {
          editor.ui.registry.addIcon(
            'shopping-cart',
            '<button aria-label=="文件管理" title="文件管理" ><svg t="1632912958983" class="icon" viewBox="0 0 1131 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3795" width="24" height="24"><path d="M103.94233 1023.960744a96.710483 96.710483 0 0 1-64.04117-23.287698 118.733991 118.733991 0 0 1-39.389477-99.80442V122.593761A121.195834 121.195834 0 0 1 128.527485 0.699296H446.271489A71.060747 71.060747 0 0 1 456.251931 0.000665a107.622433 107.622433 0 0 1 92.219284 62.24469 1172.36925 1172.36925 0 0 1 45.577352 68.964854 24.551887 24.551887 0 0 0 11.07829 2.495111h414.920241a112.579385 112.579385 0 0 1 78.812224 27.080266 107.822041 107.822041 0 0 1 32.037218 82.504987v661.237548a118.40131 118.40131 0 0 1-23.287697 86.164483 96.477606 96.477606 0 0 1-77.581303 32.037218z m302.740073-291.595247c-18.929572 0-47.906121 16.301389-47.906122 36.395345v19.395326c0 20.792587 29.076354 36.594954 47.906122 36.594954h482.920319c18.929572 0 47.93939-16.334657 47.939389-36.594954v-19.395326c0-20.759319-29.076354-36.395345-47.939389-36.395345z m-164.311343 0A46.109642 46.109642 0 1 0 288.51397 778.475139a46.176178 46.176178 0 0 0-46.109642-46.109642z m164.311343-188.264403c-18.929572 0-47.906121 16.301389-47.906122 36.395345v19.428593c0 20.759319 29.076354 36.395345 47.906122 36.395345h482.920319c18.929572 0 47.93939-16.301389 47.939389-36.395345v-19.428593c0-20.759319-29.076354-36.395345-47.939389-36.395345z m-164.311343 0a46.109642 46.109642 0 1 0 46.109642 46.109641 46.176178 46.176178 0 0 0-46.076374-46.109641z m164.344611-188.131332c-18.929572 0-47.906121 16.334657-47.906122 36.594954v19.395326c0 20.759319 29.076354 36.395345 47.906122 36.395345h482.887051c18.929572 0 47.93939-16.301389 47.939389-36.395345V392.564716c0-20.792587-29.076354-36.594954-47.939389-36.594954z m-164.311343 0a46.109642 46.109642 0 1 0 46.109642 46.14291A46.176178 46.176178 0 0 0 242.404328 355.969762z" fill="#333333" p-id="3796"></path></svg></button>'
          )
          editor.ui.registry.addButton('filemanager', {
            icon: 'shopping-cart',
            onAction: _ => {
              this.isshow = true
              this.editor = editor
            }
          })
        },
        file_picker_types: 'media image',
        media_poster: true,
        convert_urls: false,
        paste_data_images: true,
        images_upload_handler: function(blobInfo, succFun, failFun) {
          const file = blobInfo.blob()
          const formData = new FormData()
          formData.append('file', file)
          uploadFile(formData)
            .then(response => {
              // console.log(response.data)
              succFun(linkUrl(response.data.filename_disk))
              // this.image = response.data.data
            })
            .catch(error => {
              this.$message.error('图片上传失败')
            })
        },
        file_picker_callback: (callback, value, meta) => {
          if (meta.filetype === 'media') {
            const input = document.createElement('input')
            input.setAttribute('type', 'file')
            input.onchange = function() {
              const file = this.files[0]
              const formData = new FormData()
              formData.append('file', file)
              this.loading = true
              uploadFile(formData)
                .then(response => {
                  callback(linkUrl(response.data.filename_disk), { title: file.name })
                  this.loading = false
                })
                .catch(error => {
                  this.loading = false
                  this.$message.error('视频上传失败')
                })
            }
            input.click()
          }
          if (meta.filetype === 'image') {
            const input = document.createElement('input')
            input.setAttribute('type', 'file')
            input.onchange = function() {
              const file = this.files[0]
              const formData = new FormData()
              formData.append('file', file)
              this.loading = true
              uploadFile(formData)
                .then(response => {
                  callback(linkUrl(response.data.filename_disk), { title: file.name })
                  this.loading = false
                })
                .catch(error => {
                  this.loading = false
                  this.$message.error('视频上传失败')
                })
              console.log('到这里了')
            }
            input.click()
          }
        },
        fontsize_formats: '8px 10px 12px 14px 16px 18px 20px 22px',
        lineheight_formats: '1 1.5 2',
        branding: false,
        init_instance_callback: function(editor) {
          // editor.getBody().focus() //将光标聚集在富文本上
        }
      },
      isshow: false,
      loading: false
    }
  },
  components: { Editor },
  mounted() {
    tinymce.init({
      content_style: 'p{margin:0;padding:0}'
    })
  },
  beforeDestroy() {
    this.tinymce && this.tinymce.destory()
  },

  watch: {
    editContent(val) {
      this.tinymceHtml = val
    }
  },
  methods: {
    close() {
      this.$emit('changeModalStatus', false, 'cancel')
    },
    centain() {
      this.$emit('changeModalStatus', false, 'centain')
    },
    changeModalStatus(status, centain) {
      this.isshow = status
      if (centain) {
        console.log('确定')
        console.log(centain)
        if (centain.fileSuffix === 'img') {
          this.editor.insertContent(`<div><img class='goodsImg' src='${centain.link}' width="100%" /></div>&nbsp;`)
        } else if (centain.fileSuffix === 'video') {
          this.editor.insertContent(
            `<p><video controls="controls" width="100%" height="auto">
<source src='${centain.link}' type="video/mp4" />
此浏览器不支持该视频格式
</video></p>`
          )
        }
      }
    },
    onEditorChange(e) {
      this.$emit('change', e)
    }
  }
}
</script>
<style lang="less" scoped>
.tinymce {
  margin: 0;
  padding: 0;
  ::-webkit-scrollbar {
    height: 6px;
    width: 0px;
  }
}
</style>
