"use strict";
import {base} from './base.js'
import { util } from '../../util/util.js'
class inputTextArea extends base{
    constructor(data) {
        super(data);
        this.type='textarea';
    }
    render(renderParentID){
        let that=this;
        let data=that.data
        if(data.kind==undefined||data.kind=='default'){
            that.renderDefault(renderParentID);
        }
        /*if(data.kind=='custom'){
            that.renderCustom(renderParentID);
        }*/
        if(data.kind=='text_detail'){
            that.renderTextDetail(renderParentID);
        }
    }
    renderDefault(parentObjID){
        let that=this;
        that.initFunc();
        let data=that.data
        let labelName=data.label_name;
        let placeholder=data.placeholder;
        let defaultValue=data.default_value;
        let isReadOnly=data.is_read_only;
        let rows=data.rows;
        let canNull=data.can_null;
        that.initFormCol(that);
        let questionCircleHtml=that.getQuestionCircleIconHtml();
        let layoutType=util.isNull(data.field_layout_type)?'horizontal':data.field_layout_type
        let htmlTemplate=`
        <div class="form-group ${layoutType=='horizontal'?'row':''} col-sm-${data.col}" id="${that.objID}" style="display: none">
        <label class="col-form-label ${layoutType=='horizontal'?`col-sm-${that.labelCol}`:''} text-sm-right" 
        style="${layoutType=='horizontal'?`line-height:25px;`:'line-height:16px;padding-top: 0px;'} vertical-align: middle;">
        <font id="${that.objID}CanNull" style="font-size: ${layoutType=='horizontal'?'22px;vertical-align: middle;':'15px;'}${canNull!='Y'?'display:none;':''}" color="red">*</font>
        ${labelName}
        ${questionCircleHtml}
        </label>
        <div class="${layoutType=='horizontal'?`col-sm-${that.inputCol}`:''}">
        <textarea id="${that.eleID}" rows="${rows}" ${isReadOnly=='Y'?'readonly=readonly':''}  name="${data.name}" class="form-control khc-theme-input-color" placeholder="${placeholder}">
        ${!util.isNull(defaultValue)?defaultValue:''}
        </textarea>
        <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);
        if(!util.isNull(defaultValue)){
            document.getElementById(that.getEleID()).value=util.toOldChar(defaultValue);
        }
        that.bindFunc();
    }
    hide(){
        document.getElementById(this.objID).setAttribute('style', 'display:none');//隐藏
    }
    show(){
        if(this.data.kind=='text_detail')return
        document.getElementById(this.objID).setAttribute('style', '');//展示
    }
    initFunc(){
        let that=this;
        that.bindValueValidate= ()=>{
            that.validateFunc= ()=>{
                that.validate();
            }
            util.addEventListener(that.eleID,'input',that.validateFunc)//实时校验
            util.addEventListener(that.eleID,'blur',that.validateFunc)//失去焦点校验（用户可能点击了输入框不填写内容就不会触发上面的事件）
        }
    }
    bindFunc(){
        let that=this;
        that.bindValueValidate();
    }
    renderTextDetail(renderParentID){
        let that=this;
        let data=that.data
        let html=`<tr>
                                <th>${data.label_name}</th>
                                <td name="${data.name}" id="${that.eleID}"></td>
                            </tr>`
        document.getElementById(renderParentID).insertAdjacentHTML("beforeend",html);
    }
}
export {inputTextArea}