import { Component, OnInit } from '@angular/core'
import { HttpClient } from '@angular/common/http'
@Component({
    selector: 'farris-doc-html-editor',
    templateUrl: './html-editor-demo.component.html',
    styleUrls: ['./html-editor-demo.component.scss']
})
export class HtmlEditorDemoComponent implements OnInit {
    textDetail: string = '<div><p>cs</p><p>cs</p></div>'
    disable: boolean = false
    editor: any
    modules = {
        imageDrop: true,
        imageResize: true,
        tooltip: true
    }
    constructor(private http: HttpClient) {}

    ngOnInit() {}
    editorCreated(quill) {
        const toolbar = quill.getModule('toolbar')
        toolbar.addHandler('image', this.imageHandler.bind(this))
        this.editor = quill
    }

    contentChanged(v) {
        console.log(v)
    }

    imageHandler() {
        const imageInput = document.createElement('input')
        imageInput.setAttribute('type', 'file')
        imageInput.setAttribute(
            'accept',
            'image/png,image/gif,image/jpeg,image/bmp,,image/x-icon'
        )
        imageInput.classList.add('ql-image')
        imageInput.addEventListener('change', () => {
            const file = imageInput.files[0]
            const data: FormData = new FormData()
            data.append('file', file, file.name)
            if (imageInput.files != null && imageInput.files[0] != null) {
                // 上传图片http请求
                this.http.post('api/upload', data).subscribe(res => {
                    const range = this.editor.getSelection(true)
                    const index = range.index + range.length
                    this.editor.insertEmbed(
                        range[index],
                        'image',
                        'http://localhost:8002/' + (res as any).default
                    )
                    console.log(res)
                })
                console.log(data)
            }
        })
        imageInput.click()
    }
}