<template>
  <el-dialog
    v-loading = "loading"
    v-if="visible"
    :visible.sync="visible"
    :before-close="handleClose"
    :title="title"
    :append-to-body="appendToBody"
    width="60%">
    <quill-editor v-if="!disabled" ref="myQuillEditor" v-model="text" :height="300" :options="editorOption" />
    <div v-else class="ql-editor">
      <div v-html="text"/>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeWindow">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { quillEditor } from 'vue-quill-editor'
import waves from '@/directive/waves' // waves directive
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: { Pagination, quillEditor },
  directives: { waves },
  props: {
    title: {
      type: String,
      default: ''
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      text: '',
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            [
              'bold', 'italic', 'underline', 'strike',
              'blockquote', 'code-block',
              { header: 1 }, { header: 2 },
              { list: 'ordered' }, { list: 'bullet' },
              { script: 'sub' }, { script: 'super' },
              { indent: '-1' }, { indent: '+1' },
              { direction: 'rtl' },
              { color: [] }, { background: [] },
              { align: [] },
              { size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] },
              { header: [1, 2, 3, 4, 5, 6] },
              'clean'
            ]
          ]
        },
        placeholder: '请输入正文'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    init(e) {
      this.visible = true
      this.text = e.text
    },
    handleClose() {
      this.visible = false
      this.text = ''
    },
    closeWindow() {
      this.visible = false
      this.text = ''
    },
    save() {
      this.$emit('getResult', { text: this.text })
      this.visible = false
      this.text = ''
    }
  }
}

</script>

<style scoped>
.information >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
<style>
.ql-container{
  height: 300px;
}
</style>
