"use strict";
import { base } from './base.js'
import { util } from '../../util/util.js'
class inputColor extends base {
    constructor(data) {
        super(data);
        this.type='color';
    }
    render(parentObjID) {
        let that=this;
        that.initFunc();
        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 isReadOnly=data.is_read_only;
        let placeholder=data.placeholder;
        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}">
        <input type="text" id="${that.eleID}" value="${!util.isNull(defaultValue)?defaultValue:''}" name="${eleName}" 
        class="form-control khc-theme-input-color" ${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;
        }
        let isRtl = $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl';
        $('#'+that.eleID).minicolors({
            control:  'hue',
            position: 'bottom ' + (isRtl ? 'right' : 'left'),
            change:function (){
                that.bindChangeCallback();
            }
        });
    }
    hide(){
        document.getElementById(this.objID).setAttribute('style', 'display:none');//隐藏
    }
    show(){
        document.getElementById(this.objID).setAttribute('style', '');//展示
    }
    initFunc(){
        let that=this;
        that.bindChangeCallback= ()=>{//选中颜色后会调用此方法，如需选中颜色后需要触发一些操作就可以重写此方法
        }
    }
}
export { inputColor }