"use strict";
import {base} from './base.js'
import { util } from '../../util/util.js'

class inputSelectCheckBox extends base {
    constructor(data) {
        super(data);
        this.type='selectCheckbox';
    }
    render(renderParentID) {
        let that=this;
        that.initFunc();
        let data=that.data
        if(data.kind==undefined||data.kind=='default'){
            that.renderDefault(renderParentID);
        }
        if(data.kind=='custom'){
            that.renderCustom(renderParentID);
        }
    }
    hide(){
        document.getElementById(this.objID).setAttribute('style', 'display:none');//隐藏
    }
    show(){
        document.getElementById(this.objID).setAttribute('style', '');//展示
    }
    //value自定义value转换showValue，可以为空
    getShowValue(value='') {//获取展示的值，主要是将用到字典的值转换
        let that=this;
        if(util.isNull(value)){
            value=that.getValue();
        }
        if(util.isNull(value)){
            return '';
        }
        return that.dictMap.get(value);
    }

    renderDefault(renderParentID){
        let that=this;
        let data = that.data
        let dictDataArray=that.data.dict_code.data;
        if(util.isNull(dictDataArray)){
            if(util.isNull(that.data.dict_code_json)){
                dictDataArray=[];
            }else{
                try {
                    if (typeof that.data.dict_code_json == 'string') {
                        dictDataArray=JSON.parse(that.data.dict_code_json)
                        dictDataArray.length;
                    }else{
                        dictDataArray=that.data.dict_code_json
                    }
                } catch (error) {
                }
            }
        }
        for(let i=0;i<dictDataArray.length;i++){
            that.dictMap.set(dictDataArray[i].key.toString(),dictDataArray[i].value);
        }
        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;
        that.initFormCol(that);
        let selectHtmlTemplate=``;
        for(let i=0;i<dictDataArray.length;i++){
            selectHtmlTemplate += ' <option value="'+dictDataArray[i].key+'">'+dictDataArray[i].value+'</option>';
        }
        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="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}`:''}">
        <div class="input-group-append" >
            <div id="${that.eleID}_select_div" style="width: 100%">
              <select class="selectpicker khc-theme-input-color" multiple="" data-icon-base="ion" data-tick-icon="ion-md-checkmark" id="${that.eleID}" name="${eleName}" ${isReadOnly=='Y'?'disabled':''} >
                ${selectHtmlTemplate}
              </select>
            </div>
            ${data.is_show_input_button=='Y'?`<span class="input-group-append">
                <button class="btn btn-secondary" type="button" id="${that.eleID}_input_button">${data.input_button_name}</button></span>`:''}
        </div>
        <small class="form-text text-muted"><font style="display:none;"  validate="validate"  color="red">12412345123</font></small>
        </div>
        </div>
        `;
        document.getElementById(renderParentID).insertAdjacentHTML("beforeEnd", htmlTemplate);
        //liveSearch 是否展示搜索(暂时先注释，后面改成配置或自动判断大于指定数量可以开启)
        $('#'+that.eleID).selectpicker({
            noneSelectedText: '请选择',
            /*liveSearch: true,*/
        });
        if(!util.isNull(defaultValue)){
            that.setValue(defaultValue);
        }
        that.bindFunc();
    }

    getValue() {
        let that=this;
        let selectObj=document.getElementById(that.eleID+'_select_div');
        if(selectObj==null){
            return document.getElementById(that.eleID);;
        }
        let selectArray=selectObj.querySelector('ul').querySelectorAll('.selected');
        if(selectArray.length>0){
            let value = ",";
            let texts = $("#"+that.eleID+" option:selected");
            for (let i = 0; i < texts.length; i++) {
                value += texts[i].value + ",";
            }
            return value;
        }else{
            return '';
        }
    }

    setValue(value) {
        let that=this;
        $('#'+that.eleID).selectpicker('val',value.split(','));
    }
    initFunc(){
        let that=this;
        that.bindValueValidate= ()=>{
            if(that.data.query_type!=undefined){
                return ;//是query组件就不校验，不绑定事件
            }
            that.validateFunc= ()=>{
                that.validate();
            }
            util.addEventListener(that.eleID,'change',that.validateFunc)
        }
        that.bindInputButtonFunc=()=>{
            that.inputButtonFunc();
        }
        that.inputButtonFunc=()=>{//较复杂的代码逻辑请重写此方法
            let myselfFuncStr=util.toOldChar(that.data.input_button_func);
            util.executeDynamicCode(myselfFuncStr,{eleObj:that});
        }
    }
    bindFunc(){
        let that=this;
        that.bindValueValidate();//绑定校验函数
        if(that.data.is_show_input_button=='Y'){
            document.getElementById(that.eleID+'_input_button').addEventListener('click',that.bindInputButtonFunc);
        }
    }
}
export { inputSelectCheckBox }
