import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { defaultModules } from './html-editor-defaults'
@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 = '<p><span class="ql-size-huge">  资成本比上月增加  195,183.2元</span></p>'
    disable: boolean = false
    editor: any
    modules = {
        toolbar: defaultModules.toolbar
    }
    constructor(private http: HttpClient, private render: Renderer2) {}

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

    contentChanged(v) {
        console.log(v)
        // this.render.appendChild(this.EmbeddView.nativeElement, this.textDetail)
    }

    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) {
                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()
    }
    propertiesData= [
        {
            propertiy: '[disabled]',
            default: 'false',
            type: 'boolean',
            description: '设置是否禁用组件'
        },
        {
            propertiy: '[disabled]',
            default: 'false',
            type: 'boolean',
            description: '设置是否禁用组件'
        },
        {
            propertiy: '[placeholder]',
            default: '',
            type: 'string',
            description: '空白提示符'
        },
        {
            propertiy: '[maxLength]',
            default: '',
            type: 'number',
            description: '最大长度'
        },
        {
            propertiy: '[minLength]',
            default: '',
            type: 'number',
            description: '最小长度'
        },
        {
            propertiy: '[styles]',
            default: '',
            type: '{}',
            description: '自定义编辑区样式，例如 {height: "200px"} '
        },
        {
            propertiy: '(onEditorCreated)',
            default: '',
            type: 'EventEmitter<any>',
            description: '创建编辑器时触发得回调'
        },
        {
            propertiy: '(onContentChanged)',
            default: '',
            type: 'EventEmitter<any>',
            description: '内容改变时触发得回调'
        },
        {
            propertiy: '(onFocus)',
            default: '',
            type: 'EventEmitter<>',
            description: '获得焦点时触发得回调'
        },
        {
            propertiy: '(onBlur)',
            default: '',
            type: 'EventEmitter<>',
            description: '失去焦点时触发得回调'
        }
    ]
}