<script setup>
import { reactive,ref ,onMounted,watch} from 'vue'
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css' // 样式
import '@vueup/vue-quill/dist/vue-quill.snow.css';
// import { QuillEditor } from '@vueup/vue-quill'
// import ImageUploader from 'quill-image-uploader';
// // import ImageResize from 'quill-image-resize-module';
// import 'quill-image-resize-module/image-resize.min.js';
// var fontSizeStyle = Quill.import('attributors/style/size');
// fontSizeStyle.whitelist = ['12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px']
// Quill.register(fontSizeStyle, true);
// var align = Quill.import('attributors/style/align');
// align.whitelist = ['left', 'center', 'right', 'justify']
// // Quill.register('modules/ImageResize', ImageResize);
// Quill.register('modules/ImageResize', resizeImage);

const props = defineProps({
    modelValue: String,
    className: String,
    contentType: {
        type: String,
        default: ()=> 'html'
    },
    uploadFn: Function,
    toolbar: Array,
    modules: Array,
    placeholder: {
        type: String,
        default: ()=> '请输入内容'
    }
})

const state = reactive({
    content: props.modelValue ?? '',
    toolbar: props.toolbar ?? 
        [
            ["bold", "italic", "underline", "image"], // toggled buttons
            // [{ indent: "-1" }, { indent: "+1" }],
            [{ header: 1 }, { header: 2 }],
            // ["bold", "italic", "underline", "strike", "indent"], // toggled buttons
            // ["blockquote", "code-block"],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }], // superscript/subscript
            //             // 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
            [{ align: [] }],
            ["clean"] // remove formatting button
        ],
    modules: props.modules ??[
      {
          name: 'imageUploader',
          module: ImageUploader,
          options: {
              upload: file => {
                  return new Promise((resolve, reject) => {
                      if(props.uploadFn && props.uploadFn instanceof Function){
                          props.uploadFn(file,(url)=>{
                              resolve(url);
                          })
                      }else{
                        const reader = new FileReader();
                        reader.readAsDataURL(file)
                        reader.onload = function(){
                            resolve(this.result);
                        }   
                      }
                  })
              }
          }
      },
      {
          name: 'ImageResize',
          module: ImageResize,
      }
  ]
})

const emit = defineEmits()
watch(()=>state.content,(newVal)=>{
    emit('update:modelValue',newVal)
})



</script>

<template>
    <div :class="['tag-box',props.className??'']">
        <QuillEditor 
        v-model:content="state.content" 
        :contentType="props.contentType" 
        :toolbar="state.toolbar" 
        :modules="state.modules" 
        style="padding-bottom:100px;"
        ></QuillEditor>
    </div>
</template>

<style scoped>
.tag-item{margin: 5px;}
.tag-box{text-align: left;}
</style>
        