"use strict";
import {base} from './base.js'
import { util } from '../../util/util.js'
import {config} from "../../config.js";
class inputEditor extends base{
    constructor(data) {
        super(data);
        this.type='editor';
    }
    render(parentObjID){
        let data=this.data
        if(data.kind==undefined||data.kind=='default'){
            this.renderDefault(parentObjID);
        }
        if(data.kind=='custom'){
            this.renderCustom(parentObjID);
        }
    }
    hide(){
        document.getElementById(this.objID).setAttribute('style', 'display:none');//隐藏
    }
    show(){
        document.getElementById(this.objID).setAttribute('style', '');//展示
    }
    getValue() {
        return document.querySelector('#' + this.eleID).children[0].innerHTML;
    }
    setValue(value) {
        document.querySelector('#' + this.eleID).children[0].innerHTML=value;
        //document.querySelector('#' + this.eleID).children[0].innerHTML='<p><a href="baidu.com" rel="noopener noreferrer" target="_blank">111111</a></p>'
    }
    renderDefault(parentObjID){
        let that=this;
        let data=that.data
        let labelName=data.label_name;
        let canNull=data.can_null;
        that.initFormCol(that);
        let questionCircleHtml=that.getQuestionCircleIconHtml();
        let htmlTemplate=`
        <div class="form-group row col-sm-${data.col}"  id="${that.objID}" style="display: none">
        <label class="col-form-label col-sm-${that.labelCol} text-sm-right" style="line-height:25px;vertical-align: middle;">
        <font id="${that.objID}CanNull" style="font-size: 22px;vertical-align: middle;${canNull!='Y'?'display:none;':''}" color="red">*</font>
        ${labelName}
        ${questionCircleHtml}
        </label>
        <div class="col-sm-${that.inputCol}">
        <div class="card mb-4"><div id="${that.eleID}" style="height: 500px;"></div></div>
        <small class="form-text text-muted"><font style="display:none;"  validate="validate"  color="red">12412345123</font></small>
        </div></div>
        `;
        document.getElementById(parentObjID).insertAdjacentHTML("beforeEnd",htmlTemplate);
        //字体
        let fonts = [false, 'SimSun', 'FangSong', 'SimHei', 'KaiTi', 'Microsoft-YaHei', 'serif', 'Arial', 'monospace'];
        //加入到白名单
        Quill.import('formats/font').whitelist = fonts;

        //字体大小
        let sizes = [false, '14px', '16px', '18px', '20px', '22px', '24px', '26px'];
        //加入到白名单
        Quill.import('formats/size').whitelist = sizes;

        //标题大小
        let headers = [false, 6, 5, 4, 3, 2, 1];

        //图片设置
        let imageResizes = {
            modules: ['Resize', 'DisplaySize', 'Toolbar']
        }

        //工具栏设置
        let toolbarOptions = [
            [{'font': fonts}, {'size': sizes}, {'header': headers}],
            ['bold', 'italic', 'underline', 'strike',],
            [{'color': []}, {'background': []}, {'script': 'sub'}, {'script': 'super'}, 'blockquote', 'code-block',],
            [{'list': 'ordered'}, {'list': 'bullet'}, {'direction': 'rtl'}, {'align': []}],
            ['link', 'image','upload', {'table': 'TD'}],
            ['clean'],
        ];

        //加载表格
        let QuillBetterTable = Quill.import('modules/better-table')
        //加载监听器
        let ImageQuillWatch = Quill.import('modules/ImageQuillWatch');
        //加载监听器
        let FileQuillWatch = Quill.import('modules/FileQuillWatch');

        that.quill = new Quill('#'+that.eleID,
            {
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            'table': (val)=> {
                                console.log('table====', this.quill.getModule('better-table'))
                                this.quill.getModule('better-table').insertTable(2, 3)
                            },
                            'image': (val)=> {
                                ImageQuillWatch.emit(this.quill.imageId)
                            },
                            'upload': (val)=> {
                                FileQuillWatch.emit(this.quill.fileId)
                            }
                        }
                    },
                    'better-table': {
                        operationMenu: {
                            items: {
                                insertColumnRight: {
                                    text: '右边插入一列单元格'
                                }, insertColumnLeft: {
                                    text: '左边插入一列单元格'
                                }, insertRowUp: {
                                    text: '上方插入一行单元格'
                                }, insertRowDown: {
                                    text: '下方插入一行单元格'
                                }, mergeCells: {
                                    text: '合并单元格'
                                }, unmergeCells: {
                                    text: '拆分单元格'
                                }, deleteColumn: {
                                    text: '删除整列单元格'
                                }, deleteRow: {
                                    text: '删除整行单元格'
                                }, deleteTable: {
                                    text: '删除表格'
                                },
                            },
                            background: {
                                color: '#333'
                            },
                            color: {
                                colors: ['green', 'red', 'yellow', 'blue', 'white'],
                                text: '背景颜色:'
                            }
                        }
                    },
                    keyboard: {
                        bindings: QuillBetterTable.keyboardBindings
                    },
                    imageResize: imageResizes,
                    ImageExtend: {
                        loading: true,
                        name: 'uploadFile',  // 图片参数名
                        size: 3,  // 可选参数 图片大小，单位为M，1M = 1024kb
                        action: config.getConfigJson().baseURL+config.getConfigJson().upFileUrl,  // 服务器地址, 如果action为空，则采用base64插入图片
                        response: (response) => {
                            console.log(response)
                            if (response.status == 'ok') {
                                let fileInfo=response.data.fileInfo
                                if(fileInfo.source=='service'){
                                    return config.getConfigJson().downFileUrl+'?realFileName=' + fileInfo.realFileName + '&fileDiskName=' + fileInfo.diskFileName + '&suffix=' + fileInfo.suffix;
                                }else{
                                    return config.getMinioUrl()+'/'+fileInfo.diskFileName
                                }
                            } else {
                                console.log(response.message)
                                return res
                            }
                        },
                        headers: (xhr) => {
                            xhr.setRequestHeader('Authorization', "Bearer " + config.getToken())
                        },  // 可选参数 设置请求头部
                        sizeError: () => {
                        },  // 图片超过大小的回调
                        start: () => {
                        },  // 可选参数 自定义开始上传触发事件
                        end: () => {
                        },  // 可选参数 自定义上传结束触发的事件，无论成功或者失败
                        error: () => {
                        },  // 可选参数 上传失败触发的事件
                        success: () => {
                        },  // 可选参数  上传成功触发的事件
                        change: (xhr, formData) => {
                            // xhr.setRequestHeader('myHeader','myValue')
                            // formData.append('token', 'myToken')
                        } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
                    },
                    FileExtend: {
                        loading: true,
                        name: 'uploadFile',  // 图片参数名
                        size: 10,  // 可选参数 图片大小，单位为M，1M = 1024kb
                        action: config.getConfigJson().baseURL+config.getConfigJson().upFileUrl,  // 服务器地址, 如果action为空，则采用base64插入图片
                        response: (response) => {
                            console.log(response)
                            if (response.status == 'ok') {
                                let fileInfo=response.data.fileInfo
                                return config.getMinioUrl()+'/'+fileInfo.diskFileName
                            } else {
                                console.log(response.message)
                                return res
                            }
                        },
                        headers: (xhr) => {
                            xhr.setRequestHeader('Authorization', "Bearer " + config.getToken())
                        },  // 可选参数 设置请求头部
                        sizeError: () => {
                        },  // 图片超过大小的回调
                        start: () => {
                        },  // 可选参数 自定义开始上传触发事件
                        end: () => {
                        },  // 可选参数 自定义上传结束触发的事件，无论成功或者失败
                        error: () => {
                        },  // 可选参数 上传失败触发的事件
                        success: () => {
                        },  // 可选参数  上传成功触发的事件
                        change: (xhr, formData) => {
                            // xhr.setRequestHeader('myHeader','myValue')
                            // formData.append('token', 'myToken')
                        } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
                    }
                },
                theme: 'snow'
            }
        );
    }

    renderCustom(parentObjID){
        let data=this.data
        let obj=document.getElementById(parentObjID).querySelector('input[name="' + data.name + '"]');
        //console.log('show my layout name：'+data.name+"   value："+obj.value+"    eleID："+this.eleID)
        obj.setAttribute("id", this.eleID);
    }

}
export {inputEditor}