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

class inputDualList extends base {
    constructor(data) {
        super(data);
        this.type='dualList';
    }
    render(parentObjID) {
        let that=this;
        let data = that.data
        let dictDataArray=that.data.dict_code.data;
        if(util.isNull(dictDataArray)){
            dictDataArray=[];
        }
        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;
        that.initFormCol(that);
        let dualHtmlTemplate=``;
        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++){
            dualHtmlTemplate += `<option value="${dictDataArray[i].key}" >${dictDataArray[i].value}</option>`;
        }
        let layoutType=util.isNull(data.field_layout_type)?'horizontal':data.field_layout_type
        let questionCircleHtml=that.getQuestionCircleIconHtml();
        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: 22px;vertical-align: middle;${canNull!='Y'?'display:none;':''}" color="red">*</font>
        ${labelName}
        ${questionCircleHtml}
        </label>
        <div class="${layoutType=='horizontal'?`col-sm-${that.inputCol}`:''}">
        <select multiple="multiple" size="10" id="${that.eleID}" name="${eleName}" style="height:${Number(data.rows)*40}px">${dualHtmlTemplate}</select>
        <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=defaultValue;
        }
        that.selectors=$('#'+that.eleID).bootstrapDualListbox({
            nonSelectedListLabel: '未选中',
            selectedListLabel: '已选中',
            preserveSelectionOnMove: 'moved',
            moveOnSelect: false
        });
    }
    refresh(){
        let selectors=this.selectors;
        selectors.bootstrapDualListbox('refresh');
    }
    refreshHtml() {
        let html="";
        let that=this;
        let dict=that.data.dict_code.data;
        document.getElementById(that.getEleID()).innerHTML='';
        for(let i=0;i<dict.length;i++){
            html += ' <option value="'+dict[i].key+'" >'+dict[i].value+'</option>';
        }
        document.getElementById(that.getEleID()).innerHTML=html;
    }
    getValue() {
        let selectors=this.selectors;
        let value='';
        let selectVal=selectors.val();
        for (let i = 0; i < selectVal.length; i++) {
            value+=selectVal[i]+",";
        }
        if(selectVal.length>0){
            value=','+value;//前后都保留逗号，可做模糊查询
        }
        return value;

    }
    setValue(value) {
        let that=this;
        let selectors=that.selectors;
        value=','+value+','
        let eleObj = document.getElementById(that.getEleID());
        for (let i = 0; i < eleObj.length; i++) {
            if (value.indexOf(','+eleObj[i].value+',')>=0) {
                eleObj[i].selected=true;
            }else{
                eleObj[i].selected=false;
            }
        }
        selectors.bootstrapDualListbox('refresh');
    }
    //value自定义value转换showValue，可以为空
    getShowValue(value='') {//获取展示的值，主要是将用到字典的值转换
        let that=this;
        if(util.isNull(value)){
            value=that.getValue();
        }
        let showValueStr='';
        if(util.isNull(value)){
            return showValueStr;
        }
        let valueArray = value.split(',')
        for (let i = 0; i < valueArray.length; i++) {
            if(!util.isNull(valueArray[i])){
                showValueStr+=that.dictMap.get(valueArray[i])+'，';
            }
        }
        showValueStr=showValueStr.substring(0,showValueStr.length-1);
        return showValueStr;
    }
    hide(){
        document.getElementById(this.objID).setAttribute('style', 'display:none');//隐藏
    }
    show(){
        document.getElementById(this.objID).setAttribute('style', '');//展示
    }
}
export { inputDualList }
