"use strict";
import {base} from './base.js'
import { util } from '../../util/util.js'
class inputMarkdown extends base{
    constructor(data) {
        super(data);
        this.type='markdown';
    }
    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', '');//展示
    }
    renderDefault(parentObjID){
        let that=this;
        let data=that.data
        let labelName=data.label_name;
        let canNull=data.can_null;
        let rows=data.rows;
        that.initFormCol(that);
        let markdownHtmlTemplate=`
        <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:30px;vertical-align: middle;">
        <font id="${that.objID}CanNull" style="font-size: 22px;vertical-align: middle;${canNull!='Y'?'display:none;':''}" color="red">*</font>
        ${labelName}
        ${data.is_question_circle=='Y'?`<i class="far fa-question-circle" style="font-size: 15px;cursor:pointer;" data-toggle="tooltip" data-placement="top" title="" data-original-title="${data.question_circle_text}"></i>`:''}
        </label>
        <div class="col-sm-${that.inputCol}">
        <div class="card mb-4"><textarea id="${that.eleID}" class="form-control" rows="${(rows+10)}"></textarea></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",markdownHtmlTemplate);
        that.markdown =$('#'+that.eleID).markdown({
            iconlibrary: 'fa',
            /*footer: '<div id="md-character-footer"></div><small id="md-character-counter" class="text-muted">还可输入350个字符</small>',
            onChange: function(e) {
                let contentLength = e.getContent().length;
                if (contentLength > 500) {
                    $('#md-character-counter')
                        .removeClass('text-muted')
                        .addClass('text-danger')
                        .html('超过字符上限'+(contentLength - 500) + ' 个');
                } else {
                    $('#md-character-counter')
                        .removeClass('text-danger')
                        .addClass('text-muted')
                        .html('还剩'+(500 - contentLength) + ' 个字符');
                }
            },*/
        });
        // 更新字符计数器(暂时注释)
        /*$('#'+that.eleID).trigger('change');*/

        // 修复图标
        $('.md-editor .fa-header').removeClass('fa fa-header').addClass('fas fa-heading');
        $('.md-editor .fa-picture-o').removeClass('fa fa-picture-o').addClass('far fa-image');
        setTimeout( ()=> {
            console.log()
            console.log(that.markdown[0].innerHTML)
        },4000)
    }

    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 {inputMarkdown}