<template>
  <a-modal v-model="isShow" :footer="null" :title="title" @cancel="cancel">
    <table>
      <tr>
        <sd-quill-editor v-model="data" :options="editorOption" @onreset="() => onKey++" />
      </tr>
    </table>
  </a-modal>
</template>

<script>
import components from './_import-components/audit-model-logic-import'

export default {
  name: 'AuditModelLogic',
  metaInfo: {
    title: 'AuditModelLogic',
  },
  components,
  // 是否显示
  model: {
    prop: 'value',
    event: 'input',
  },
  props: {
    title: {
      type: String,
      default: '模型逻辑',
    },
    // 内容
    content: {
      type: String,
      default: '',
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      data: '',
      onKey: 0,
      // 富文本
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // toggled buttons
              ['blockquote', 'code-block'],
              [{ header: 1 }, { header: 2 }], // custom button values
              [{ list: 'ordered' }, { list: 'bullet' }],
              [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
              [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
              [{ direction: 'rtl' }], // text direction
              [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ color: [] }, { background: [] }], // dropdown with defaults from theme
              [{ font: [] }],
              [{ align: [] }],
              ['clean'], // remove formatting button
              ['link', 'image'], // link and image, video
            ],
          },
        },
      },
      isShow: false,
    }
  },
  watch: {
    value(val) {
      this.isShow = val
      if (val) {
        this.data = this.content
      }
    },
  },
  created() {
    this.isShow = this.value
  },
  methods: {
    // 取消
    cancel() {
      this.isShow = false
      this.$emit('input', false)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
