"use strict";
import { base } from './base.js'
import { util } from '../../util/util.js'
class inputAutocomplete extends base {
    constructor(data) {
        super(data);
        this.type='autocomplete';
    }
    render(parentObjID) {
        let that=this;
        let data = that.data
        let eleName=that.data.name;
        let defaultValue=data.default_value;
        let canNull=data.can_null;
        let labelName=data.label_name;
        let dict=data.dict_code.data;
        if(util.isNull(dict)){
            dict=[];
        }
        let isReadOnly=data.is_read_only;
        let placeholder=data.placeholder;
        that.initFormCol(that);
        let layoutType=util.isNull(data.field_layout_type)?'horizontal':data.field_layout_type
        let questionCircleHtml=that.getQuestionCircleIconHtml();
        let htmlTemplate=``;
        if(that.data.query_type!=undefined) {//是query组件
            htmlTemplate=`
        <div  id="${that.objID}" style="display: none">
        <div class="form-control-plaintext mr-sm-2 mb-2 mt-2 mb-sm-0 ml-3">
        ${labelName}
        ${questionCircleHtml}
        </div>
        <input type="text" id="${that.eleID}" value="${!util.isNull(defaultValue)?defaultValue:''}" name="${eleName}" 
        class="form-control mr-sm-2 mb-2 mb-sm-0" ${isReadOnly=='Y'?'disabled':''} placeholder="${placeholder}">
        </div>
        `
        }else{
            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="line-height:25px;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}`:''}">
        <input type="text" id="${that.eleID}" value="${!util.isNull(defaultValue)?defaultValue:''}" name="${eleName}" 
        class="form-control" ${isReadOnly=='Y'?'disabled':''} placeholder="${placeholder}">
        <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);
        document.getElementById(that.getEleID()).setAttribute("autocomplete","off");
        if(!util.isNull(defaultValue)){
            document.getElementById(that.getEleID()).value=defaultValue;
        }
        that.callback= (eleID,item)=>{
            document.getElementById(eleID).value=item;
            that.validate();
        }
        util.autocomplete({
            inp:document.getElementById(that.getEleID()),
            lookup:dict,
            onSelect: (item)=>{
                that.onSelect(that.getEleID(),item);
            }
        });
    }
    onSelect(eleID,item){
        this.callback(eleID,item);
    }
    hide(){
        document.getElementById(this.objID).setAttribute('style', 'display:none');//隐藏
    }
    show(){
        document.getElementById(this.objID).setAttribute('style', '');//展示
    }
}
export { inputAutocomplete }