<style>
  #vue-editormd .editormd-menu {
    line-height: 0;
  }

  #vue-editormd .editormd-dialog-header {
    padding: 0 11px;
  }

  #vue-editormd .editormd-dialog-container .editormd-form label {
    font-size: 14px;
    font-weight: 400;
  }

  #vue-editormd .editormd-dialog-container .editormd-form label:first-child {
    padding: 7px 0 15px 5px;
  }

  #vue-editormd {
    z-index: 1002;
    border:none;
    margin-bottom:0;
    border-bottom: solid 1px #F7F7F7;
    box-shadow: 0 15px 0 #F7F7F7;
  }
</style>
<template>
  <div id="vue-editormd"></div>
</template>

<script>
import util from '../common/util.js'

const EDITORMD_HOME_URL = './lib/editormd/'
let contentLoaded = false
export default {
  data() {
    return {
      instance: null,
      defaultConfig: {
        width: '100%',
        height: 800,
        syncScrolling: 'single',
        path: this.homeurl + 'lib/',
        toolbarIcons: function () {
          return ['bold', 'del', 'quote', '|', 'h1', 'h2', 'h3', 'h4', 'h5', '|', 'list-ul', 'list-ol', 'hr', '|', 'link', 'image', 'code', 'code-block', 'table', '|', 'fullscreen']
        }
      }
    }
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    homeurl: {
      // EditorMD js 所在目录的路径
      type: String,
      required: false,
      default: () => EDITORMD_HOME_URL
    },
    config: {
      // EditorMD 配置项
      type: Object,
      required: false,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    content(val, oldVal) {
      if (contentLoaded) {
        return
      }
      let self = this
      let timer = null
      var setInitContent = function () {
        if (self.instance && self.instance.state.loaded && val !== self.instance.getMarkdown()) {
          contentLoaded = true
          self.instance.setMarkdown(val)
          if (timer !== null) {
            clearTimeout(timer)
          }
        }
      }
      if (val !== '' && oldVal === '') {
        // editormd 现使用异步加载机制，editormd 相关插件相关的 js (如 CodeMirror)也使用异步加载的方式，所以增加了个定时器更新初始内容
        timer = setInterval(() => {
          setInitContent()
        }, 300)
      }
    }
  },
  async mounted() {
    if (typeof window.MD === 'undefined') {
      try {
        await util.loadJS(this.homeurl + 'editormd.min.js')
      } catch (e) {
        console.error('editormd.min.js is missing', e.toString())
        return
      }
      try {
        await util.loadCSS(this.homeurl + 'css/editormd.css')
      } catch (e) {
        console.error('editormd.css is missing', e.toString())
        return
      }
      this.initEditorMD()
    } else {
      this.initEditorMD()
    }
    this.$emit('loaded')
  },
  methods: {
    initEditorMD() {
      this.$nextTick(() => {
        if (this.content !== '') {
          contentLoaded = true
        }
        this.instance = window.editormd('vue-editormd', Object.assign({markdown: this.content}, this.defaultConfig, this.config))
        this.instance.on('change', () => {
          let html = this.instance.getMarkdown()
          if (html !== this.content) {
            this.$emit('contentChange', html)
            this.$emit('update:content', html)
          }
        })
      })
    }
  }
}
</script>
