<template>
  <div class="aos-markdown">
    <quill-editor
      v-show="edit"
      ref="markdownRef"
      v-model="markdownContent"
      :options="markdownOptions"
      @blur="handleEditorBlur($event)"
      @focus="handleEditorFocus($event)"
      @change="handleEditorChange($event)"
      @ready="handleEditorReady($event)">
    </quill-editor>
    <div v-show="!edit" v-html="markdownContent">
    </div>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'AosMarkdown',
  components: {
    quillEditor
  },
  props: {
    // 编辑状态
    edit: {
      type: Boolean,
      default: true
    },
    // 内容
    content: {
      type: String,
      default: ''
    }
  },
  data(){
    return {
      markdownOptions: {}
    }
  },
  methods: {
    handleEditorChange($event){
      this.$emit('change',$event,$event.html);
    },
    handleEditorReady($event){
      this.$emit('ready',$event,$event.html);
    },
    handleEditorBlur($event){
      this.$emit('blur',$event,$event.html);
    },
    handleEditorFocus($event){
      this.$emit('focus',$event,$event.html);
    }
  },
  computed: {
    markdownContent(){
      return this.content;
    }
  }
}
</script>

