<template>
  <q-editor :toolbar="toolbar" :fonts="fonts" v-model="editMsg" :class="classStr"
    :definitions="{bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}}" @input="getEditorValue" />
</template>
<script>
  import {
    getFontConfig,
  } from '../../api/common/common'
  export default {
    props: {
      //默认数据
      defaultMsg: {
        type: String,
        default: ""
      },
      classStr: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        editMsg: "",
        toolbar: [],
        fonts: {},
      }
    },
    watch: {
      defaultMsg: {
        handler(newValue) {
          if (this.defaultMsg) {
            this.editMsg = this.defaultMsg;
          }
        },
        immediate: true
      }
    },
    mounted() {
      this.initToolBar();
    },
    methods: {
      //获取编辑器值
      getEditorValue() {
        this.$emit('getEditValue', this.editMsg);
      },
      //初始化配置
      initToolBar() {
        this.toolbar = [
          [{
            label: '对齐',
            icon: this.$q.iconSet.editor.align,
            fixedLabel: true,
            list: 'only-icons',
            options: ['left', 'center', 'right', 'justify']
          }],
          ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
          [{
              label: '格式',
              icon: this.$q.iconSet.editor.formatting,
              list: 'no-icons',
              fixedLabel: true,
              fixedIcon: true,
              options: [
                'p',
                'h1',
                'h2',
                'h3',
                'h4',
                'h5',
                'h6',
                'code'
              ]
            },
            {
              label: '字号',
              icon: this.$q.iconSet.editor.fontSize,
              fixedLabel: true,
              fixedIcon: true,
              list: 'no-icons',
              options: [
                'size-1',
                'size-2',
                'size-3',
                'size-4',
                'size-5',
                'size-6',
                'size-7'
              ]
            },
            {
              label: '字体',
              icon: this.$q.iconSet.editor.font,
              fixedLabel: true,
              fixedIcon: true,
              list: 'no-icons',
              options: [
                'default_font',
                'arial',
                'arial_black',
                'comic_sans',
                'courier_new',
                'impact',
                'lucida_grande',
                'times_new_roman',
                'verdana'
              ]
            },
            'removeFormat'
          ],
          ['ordered', 'outdent', 'indent'],
        ];
        this.fonts = getFontConfig();
      },
    }
  }
</script>