<template>
  <div class="editor-config">
    <div class="config-header">内容</div>
    <div class="confit-item">
      <div class="config-title">
        富文本内容
      </div>
      <div class="config-setting">
        <quillEditor
          v-model="currentSub.html"
          :options="options"
          @change="onEditorChange($event)"
        />
      </div>
      <div class="editor-tips">{{ tiLength }}/{{ max }}</div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      tiLength: 0,
      max: 1000,
      options: {
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            [{ size: ['small', false, 'large'] }],
            ['bold', 'italic'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link'],
            [{ color: [] }, { background: [] }],
            [{ align: [] }]
          ],
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          }
        }
      }
    }
  },
  computed: {
    ...mapState('creationCamp', [
      'currentComponentKeyCode',
      'currentComponentConfig'
    ]),
    currentSub() {
      return this.currentComponentConfig
    }
  },
  watch: {
    currentSub: {
      handler: function handler() {
        this.setComponentConfig({
          keyCode: this.currentComponentKeyCode,
          content: this.currentSub
        })
      },
      deep: true
    }
  },
  methods: {
    ...mapMutations('creationCamp', ['setComponentConfig']),
    onEditorChange({ quill, html, text }) {
      quill.deleteText(this.max, 1, 0)
      if (this.content === '') {
        this.tiLength = 0
      } else {
        this.tiLength = quill.getLength() - 1
      }
    }
  }
}
</script>
<style lang="less" scoped>
.editor-config {
  /deep/ .ql-editor {
    height: 400px;
  }
  .editor-tips {
    text-align: right;
  }
}
</style>
