/* * @Author: Keene * @Date: 2020-12-24 15:00:26 * @Last Modified by: Keene * @Last Modified time:
2020-12-24 15:00:26 */
<template>
  <div
    class="x-rich-text editor"
    :class="{
      'editor-disabled': readOnly,
      'editor-error': validateInfo && validateInfo.validate === 'error'
    }"
  >
    <div v-show="needTool" :ref="vmData.editorToolId"></div>
    <div :ref="vmData.editorId" :data-placeholder="virtualPlaceholder"></div>
    <div v-if="type === 'ide'" class="maskEditor"></div>
    <div v-if="readOnly" class="readOnlyEditor"></div>
    <div v-if="sourceShow" class="w-e-toolbar source-code-textarea">
      <div class="w-e-menu back-source" @click="handleSourceMenuClick">
        <i class="w-e-icon-terminal x-icon-soure-code"></i>
      </div>
      <textarea ref="sourceCode" class="source-code-box"></textarea>
    </div>
  </div>
</template>
<script>
import WangEditor from 'wangeditor'
export default {
  name: 'XRichText',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      require: true
    },
    type: {
      type: String,
      default: 'edit'
    },
    validateInfo: {
      type: Object,
      default: () => {
        return {
          validate: 'validate'
        }
      }
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    customUploadImg: {
      type: Function
    },
    needTool: {
      type: Boolean,
      default: true
    },
    canPaste: {
      type: Boolean,
      default: true
    },
    canEnter: {
      type: Boolean,
      default: true
    },
    sourceCodeMode: {
      type: Boolean,
      default: false
    },
    toolList: {
      type: Array,
      default: function() {
        return [
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'image', // 插入图片
          'table', // 表格
          'video', // 插入视频
          'code', // 插入代码
          'undo', // 撤销
          'redo' // 重复
        ]
      }
    }
  },
  data() {
    return {
      vmData: {
        editorId: new Date().getTime(),
        editorToolId: new Date().getTime() + 1,
        editorInstance: undefined
      },
      flag: false,
      textPlaceholder: '',
      showPlaceHolder: false,
      sourceShow: false // 标识是否是源码模式
    }
  },
  computed: {
    virtualPlaceholder() {
      return this.showPlaceHolder && !this.readOnly ? this.placeholder : undefined
    }
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        if (!newValue) {
          this.showPlaceHolder = true
          this.$nextTick(() => {
            if (this.vmData.editorInstance) {
              this.vmData.editorInstance.txt.html('<p><br></p>')
            }
          })
        } else {
          this.showPlaceHolder = false
          if (!this.flag) {
            this.$nextTick(() => {
              if (newValue && this.vmData.editorInstance) {
                this.vmData.editorInstance.txt.html(this.value)
              }
            })
          }
        }
      }
    },
    readOnly: {
      handler(newValue, oldValue) {
        if (this.vmData.editorInstance) {
          if (newValue) {
            this.vmData.editorInstance.$textElem.attr('contenteditable', false)
          } else {
            this.vmData.editorInstance.$textElem.attr('contenteditable', true)
          }
        }
      },
      immediate: true
    },
    placeholder: {
      handler(newValue, oldValue) {
        if (this.vmData.editorInstance && this.vmData.editorInstance.config) {
          let textContainerDom = this.vmData.editorInstance.$textContainerElem.elems.find(
            (item) => item.className === 'w-e-text-container'
          )
          let placeholderDom = textContainerDom.querySelector('.placeholder')
          placeholderDom.innerText = newValue
          this.vmData.editorInstance.config.placeholder = newValue
        }
      },
      immediate: true
    }
  },
  mounted() {
    if (this.$refs[this.vmData.editorId]) {
      this.vmData.editorInstance = new WangEditor(
        this.$refs[this.vmData.editorToolId],
        this.$refs[this.vmData.editorId]
      )

      const config = this.vmData.editorInstance.config || this.vmData.editorInstance.customConfig
      config.menus = this.toolList
      config.placeholder = this.placeholder
      if (this.sourceCodeMode) {
        config.menus.push('source') // 源码编辑
      }
      config.uploadImgShowBase64 = true
      config.onchangeTimeout = 5
      if (this.canPaste === false) {
        config.pasteTextHandle = (content) => {
          // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
          return ''
        }
      }
      config.onchange = (html) => {
        this.flag = true
        // console.log('change', html)
        if (html === '<p><br></p>') {
          this.$emit('change', '')
          // this.$set(this.formData, this.propKey, '')
          this.showPlaceHolder = true
          // this.$nextTick(() => {
          //   this.$refs.placeholderInput.focus()
          // })
        } else {
          this.$emit('change', html)
          this.showPlaceHolder = false
          // if (!this.formValue) {
          //   this.$refs['formRichText'].getBuildFormItem().clearValidate()
          //   return
          // }
        }
        // var sst = this.$refs['formRichText'].getBuildFormItem().validate('change')
        // // this.validateState = this.$refs['formRichText'].getBuildFormItem().validateState
        // if (!sst) {
        //   return
        // }
        // this.$refs['formRichText'].getBuildFormItem().clearValidate()

        // 这里加上nextTick是原因：因为flag为false会触发watch事件，需要等wangeditor渲染完再将flag设为false
        this.$nextTick(() => {
          this.flag = false
        })
        // this.flag = false
      }
      // config.onblur = (html) => {
      //   console.log('blur', html)
      //   if (this.formValue === undefined || this.formValue === '') {
      //     this.vmData.editorInstance.txt.html(`<p style="color: #b2b2b2;">${this.widget.placeholder}</p>`)
      //   }
      // }
      config.onfocus = (html) => {
        // console.log('onfocus', html)
        // if (this.formValue === undefined || this.formValue === '') {
        //   this.vmData.editorInstance.txt.html('')
        // }
      }
      config.customUploadImg = this.customUploadImg

      this.vmData.editorInstance.create()
      if (this.sourceCodeMode) {
        const sourceMenu = document.createElement('div')
        sourceMenu.classList.add('w-e-menu')
        sourceMenu.innerHTML = `<i class="w-e-icon-terminal x-icon-soure-code"></i>`
        sourceMenu.onclick = ($event) => this.handleSourceMenuClick($event)
        // console.log(this.vmData.editorInstance)
        // this.vmData.editorInstance.$toolbarElem[0].appendChild(sourceMenu)
      }
      this.vmData.editorInstance.$textElem.attr('contenteditable', false)
      if (this.readOnly) {
      } else {
        this.vmData.editorInstance.$textElem.attr('contenteditable', true)
      }
      this.vmData.editorInstance.txt.html(this.value)
      this.vmData.editorInstance.$textElem.on('keydown', (e) => {
        if (this.canEnter === false) {
          if (e.keyCode === 13) {
            e.preventDefault()
            e.stopPropagation()
            return
          }
        }
        if (this.$refs[this.vmData.editorId]) {
          if (this.$refs[this.vmData.editorId].firstChild) {
            // console.log('keydown', this.$refs[this.vmData.editorId].firstChild.innerHTML)
            const a = this.$refs[this.vmData.editorId].firstChild.innerHTML
            if (this.$refs[this.vmData.editorId].firstChild.innerHTML === '<p><br></p>') {
              this.showPlaceHolder = true
            } else {
              this.showPlaceHolder = false
            }
          }
        }
      })
      this.vmData.editorInstance.$textElem.on('keyup', (e) => {
        if (this.$refs[this.vmData.editorId]) {
          if (this.$refs[this.vmData.editorId].firstChild) {
            // console.log('keyup', this.$refs[this.vmData.editorId].firstChild.innerHTML)
            const a = this.$refs[this.vmData.editorId].firstChild.innerHTML
            if (this.$refs[this.vmData.editorId].firstChild.innerHTML === '<p><br></p>') {
              this.showPlaceHolder = true
            } else {
              this.showPlaceHolder = false
            }
          }
        }
      })
      // this.vmData.editorInstance.$textElem.on()
      if (this.value) {
        this.showPlaceHolder = false
      } else {
        this.showPlaceHolder = true
      }
      // 由于富文本会自动获取焦点，先使input夺取焦点，然后不显示该input
      // this.$refs[this.vmData.editorId + "input"].focus();
      // this.$refs[this.vmData.editorId + "input"].style.display = "none";
    }
  },
  methods: {
    appendHtml(e) {
      this.vmData.editorInstance.txt.append(e)
      this.$emit('change', this.vmData.editorInstance.txt.html())
      this.showPlaceHolder = false
    },
    handleSourceMenuClick($event) {
      if (!this.sourceShow) {
        this.sourceShow = true
        // if ($event.srcElement.tagName === 'I') {
        //   $event.srcElement.parentElement.classList.add('w-e-active')
        // } else {
        //   $event.srcElement.classList.add('w-e-active')
        // }
        // 获取全部内容填充给弹框
        this.$nextTick(() => {
          this.$refs.sourceCode.value = this.vmData.editorInstance.txt.html()
        })
      } else {
        // if ($event.srcElement.tagName === 'I') {
        //   $event.srcElement.parentElement.classList.remove('w-e-active')
        // } else {
        //   $event.srcElement.classList.remove('w-e-active')
        // }
        // 将所有格式全部返回给富文本编辑器
        this.vmData.editorInstance.txt.html(this.$refs.sourceCode.value)
        this.sourceShow = false
        if (this.vmData.editorInstance.txt.text()) {
          this.showPlaceHolder = false
        }
        this.$emit('change', this.vmData.editorInstance.txt.html())
      }
    }
  }
}
</script>