import {util} from "../../../../util/util.js";
import {tree} from "../tree.js";
import {config} from "../../../../config.js";
import {khcAlert} from "../../../alert/khcAlert.js";
import {khcToastr} from "../../../alert/khcToastr.js";

class tableUtil{
    constructor(data) {
        this.tableObj=data;
    }
    /**
     * 由于组件越来越多，持续的写 if else 导致分支太多 不易于后续开发运维
     * 优化方案，使用映射的方式来优化
     * 数组里面有两项，第一项是条件，第二项是满足后要执行的内容。
     */
    _createTdHtml(tdData){
        let that=this;
        const map=
            [[
                ()=>tdData.show_type=='text',()=>{
                    return that._getTextHtml(tdData)
                }],[
                ()=>tdData.show_type=='textarea',()=>{
                    return that._getTextareaHtml(tdData)
                }],[
                ()=>tdData.show_type=='select',()=>{
                    return that._getSelectHtml(tdData)
                }],[
                ()=>tdData.show_type=='selectCheckbox',()=>{
                    return that._getSelectCheckboxHtml(tdData)
                }],[
                ()=>tdData.show_type=='selectSearch',()=>{
                    return that._getSelectSearchHtml(tdData)
                }],[
                ()=>tdData.show_type=='checkbox',()=>{
                    return that._getCheckboxHtml(tdData)
                }],[
                ()=>tdData.show_type=='radio',()=>{
                    return that._getRadioHtml(tdData)
                }],[
                ()=>tdData.show_type=='switch',()=>{
                    return that._getSwitchHtml(tdData)
                }],[
                ()=>tdData.show_type=='date',()=>{
                    return that._getDateHtml(tdData)
                }],[
                ()=>tdData.show_type=='autocomplete',()=>{
                    return that._getAutocompleteHtml(tdData)
                }],[
                ()=>tdData.show_type=='tag',()=>{
                    return that._getTagHtml(tdData)
                }],[
                ()=>tdData.show_type=='tree',()=>{
                    return that._getTreeHtml(tdData)
                }],[
                ()=>tdData.show_type=='treeCheckBox',()=>{
                    return that._getTreeCheckBoxHtml(tdData)
                }],[
                ()=>tdData.show_type=='hidden',()=>{
                    return that._getHiddenHtml(tdData)
                }],[
                ()=>tdData.show_type=='file',()=>{
                    return that._getFileHtml(tdData)
                }],[
                ()=>tdData.show_type=='image',()=>{
                    return that._getImageHtml(tdData)
                }]
            ]
        let target=map.find((m)=>m[0]());//find()是es6新加的方法，具体可以看ES6文档
        if(target){
            return target[1]()
        }else{
            return that._getDefaultHtml(tdData);
        }
    }
    /**
     * 获取table编辑的数据
     * 数组里面有两项，第一项是条件，第二项是满足后要执行的内容。
     */
    _getTdValue(tdData,pkCode,td){
        let that=this;
        const map=
            [[
                ()=>tdData.show_type=='text',()=>{
                    return that._getTextValue(tdData,pkCode,td)
                }],[
                ()=>tdData.show_type=='textarea',()=>{
                    return that._getTextAreaValue(tdData,pkCode,td)
                }],[
                ()=>tdData.show_type=='select',()=>{
                    return that._getSelectValue(tdData,pkCode,td)
                }],[
                ()=>tdData.show_type=='selectCheckbox',()=>{
                    return that._getSelectCheckboxValue(tdData,pkCode,td)
                }],[
                ()=>tdData.show_type=='selectSearch',()=>{
                    return that._getSelectSearchValue(tdData,pkCode,td)
                }],[
                ()=>tdData.show_type=='checkbox',()=>{
                    return that._getCheckboxValue(tdData,pkCode,td)
                }],[
                ()=>tdData.show_type=='radio',()=>{
                    return that._getRadioValue(tdData,pkCode,td)
                }],[
                ()=>tdData.show_type=='switch',()=>{
                    return that._getSwitchValue(tdData,pkCode,td)
                }],[
                ()=>tdData.show_type=='date',()=>{
                    return that._getDateValue(tdData,pkCode,td)
                }],[
                ()=>tdData.show_type=='file',()=>{
                    return that._getFileValue(tdData,pkCode,td)
                }]
            ]
        let target=map.find((m)=>m[0]());//find()是es6新加的方法，具体可以看ES6文档
        if(target){
            return target[1]()
        }
    }
    getTableBodyHtml(){
        let that=this;
        return new Promise((resolve, reject) => {
            let tableBodyHtml = ``;
            let contents = that.tableObj.contents;
            that.tableObj.dataMap = new Map();
            let tdColorClass;
            if(contents.length>0){
                that.pkFieldName=that.tableObj.pkFieldName
                for (let i = 0; i < contents.length; i++) {
                    if (i % 2 === 0) {//偶数行
                        tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutEvenBackgroundColor;
                    } else {//奇数行
                        tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutOddBackgroundColor;
                    }
                    that.thisIndex=i;
                    let content = contents[i];
                    if(util.isNull(content[that.pkFieldName])){
                        khcToastr.showErrorMessage('error：未找到设置的主键，请核实该配置，如果使用的是mongo则可以改为uuid做为主键')
                        return ;
                    }
                    that.tableObj.dataMap.set(content[that.pkFieldName].toString(), content);
                    let rowColorJson=that._getRowColorJson(content,tdColorClass)
                    let tdColor=rowColorJson['tdColor'];
                    tdColorClass=rowColorJson['tdColorClass'];
                    tableBodyHtml += `
                    <tr showdatatr pkCode="${content[that.pkFieldName]}" class="gradeA odd ${tdColorClass}" role="row" style="background-color: ${tdColor}">
                    ${that._getFirstCheckBoxHtml(content)}
                    ${that._getManagerFirstShowHtml(content)}
                    ${that._getNumberShowHtml(i+1)}
                    ${that._getDataTemplate(content)}
                    ${that._getManagerLastShowHtml(content)}
                    </tr>`;
                }
            }else{
                let theadObj=document.getElementById(that.tableObj.eleID).querySelector('thead').querySelectorAll('th')
                tableBodyHtml+=`
            <tr><td class="dataTables_empty ${tdColorClass}" colspan="${theadObj.length}">
            <div><i style="font-size: 30px" class="far fa-file d-block"></i>暂无数据</div>
            </td></tr>
            `;
            }
            resolve(tableBodyHtml);
        })
    }
    getSelectTableBodyHtml(){
        let that=this;
        return new Promise((resolve, reject) => {
            let tableBodyHtml = ``;
            let contents = that.tableObj.selectContents;
            that.tableObj.selectDataMap = new Map();
            let tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutEvenBackgroundColor;//默认颜色
            if(contents!=undefined&&contents.length>0){
                that.pkFieldName=that.tableObj.pkFieldName
                for (let i = 0; i < contents.length; i++) {
                    if (i % 2 === 0) {//偶数行
                        tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutEvenBackgroundColor;
                    } else {//奇数行
                        tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutOddBackgroundColor;
                    }
                    that.thisIndex=i;
                    let content = contents[i];
                    if(util.isNull(content[that.pkFieldName])){
                    }
                    that.tableObj.selectDataMap.set(content[that.pkFieldName].toString(), content);
                    let rowColorJson=that._getRowColorJson(content,tdColorClass)
                    let tdColor=rowColorJson['tdColor'];
                    tdColorClass=rowColorJson['tdColorClass'];
                    tableBodyHtml += `
                    <tr showdatatr pkCode="${content[that.pkFieldName]}" class="gradeA odd ${tdColorClass}" role="row" style="background-color: ${tdColor}">
                    ${that._getFirstCheckBoxHtml(content)}
                    ${that._getSelectManagerFirstShowHtml(content)}
                    ${that._getSelectDataTemplate(content)}
                    ${that._getSelectManagerLastShowHtml(content)}
                    </tr>`;
                }
            }else{
                let theadObj=document.getElementById(that.tableObj.eleID+'_select').querySelector('thead').querySelectorAll('th')
                tableBodyHtml+=`
            <tr><td class="dataTables_empty ${tdColorClass}" colspan="${theadObj.length}">
            <div><i style="font-size: 30px" class="far fa-file d-block"></i>暂无数据</div>
            </td></tr>
            `;
            }
            resolve(tableBodyHtml);
        })
    }
    getTableEditData(){
        let that=this;
        let tableDataMap=that.tableObj.getContentMap();
        let updateData = [];
        tableDataMap.forEach( (value, key, map)=> {
            let tr = document.getElementById(that.tableObj.getEleID()).querySelector('tbody').querySelector('tr[pkCode="' + key + '"]');
            let pkCode = tr.getAttribute('pkCode');
            let oldContent = tableDataMap.get(pkCode)
            let newContent = util.clone(oldContent);
            let tdArray = tr.querySelectorAll('td');
            for (let td of tdArray) {
                if (!util.isNull(td.getAttribute('showType'))) {
                    let eleName = td.getAttribute('eleName');
                    let tdData=that.tableObj.tdDataMap.get(eleName);
                    let newValue=that._getTdValue(tdData,pkCode,td);
                    if (newValue != oldContent[eleName]) {
                        newContent[eleName] = newValue;
                    }
                }
            }
            if (JSON.stringify(newContent) != JSON.stringify(oldContent)) {
                updateData.push(newContent);
            }
        });
        return updateData;
    }
    _getFirstCheckBoxHtml(content){
        let that=this;
        let htmlTemplate =``;
        let isCheckbox=that.tableObj.queryInfo.is_checkbox;
        if ((!util.isNull(isCheckbox) && isCheckbox == 'Y')&&that.tableObj.pageComponent.isReadOnly!='Y') {
            let tdColorClass;
            if (that.thisIndex % 2 === 0) {//偶数行
                tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutEvenBackgroundColor;
            } else {//奇数行
                tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutOddBackgroundColor;
            }
            let rowColorJson=that._getRowColorJson(content,tdColorClass)
            let tdColor=rowColorJson['tdColor'];
            tdColorClass=rowColorJson['tdColorClass'];
            htmlTemplate= `
                <td showType="" to="checkbox" class="${tdColorClass}" 
                style="position: sticky;left: 0;top:-1px;z-index: 1000;text-align:center;vertical-align: middle;background-color: ${tdColor};">
                <input  type="checkbox" name="${that.pkFieldName}check" value="${content[that.pkFieldName]}" ></td>`;
        }
        return htmlTemplate;
    }
    //首列展示管理按钮
    _getManagerFirstShowHtml(content){
        let that=this;
        let htmlTemplate=``;
        if (!util.isNull(that.tableObj.queryInfo.is_managing)
            && that.tableObj.queryInfo.is_managing == 'Y'
            &&(util.isNull(that.tableObj.queryInfo.managing_show_type)||that.tableObj.queryInfo.managing_show_type=='first_show')
            &&that.tableObj.pageComponent.isReadOnly!='Y') {
            let tdColorClass;
            if (that.thisIndex % 2 === 0) {//偶数行
                tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutEvenBackgroundColor;
            } else {//奇数行
                tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutOddBackgroundColor;
            }
            let rowColorJson=that._getRowColorJson(content,tdColorClass)
            let tdColor=rowColorJson['tdColor'];
            tdColorClass=rowColorJson['tdColorClass'];
            htmlTemplate += `<td showType="" to="buttons" zIndex="${that.tableObj.contents.length-that.thisIndex}" class="${tdColorClass}"
                style="vertical-align: middle;position: sticky;left: ${that.tableObj.queryInfo.is_checkbox=='Y'?'55px':'0'};z-index: ${that.tableObj.contents.length-that.thisIndex};background-color: ${tdColor}" 
                id="${content[that.pkFieldName]}${that.tableObj.eleID}"></td>`;
        }
        return htmlTemplate;
    }
    //展示序号列
    _getNumberShowHtml(number){
        let that=this;
        let htmlTemplate =``;
        let isCheckbox=that.tableObj.queryInfo.is_checkbox;
        if (!util.isNull(that.tableObj.queryInfo['is_show_table_number']) && that.tableObj.queryInfo['is_show_table_number'] == 'Y') {
            htmlTemplate= `
                <td showType="" style="text-align:center;vertical-align: middle;">${number}</td>`;
        }
        return htmlTemplate;
    }
    //尾列展示管理按钮
    _getManagerLastShowHtml(content){
        let that=this;
        let htmlTemplate=``;
        if (!util.isNull(that.tableObj.queryInfo.is_managing)
            && that.tableObj.queryInfo.is_managing == 'Y'
            &&that.tableObj.queryInfo.managing_show_type=='last_show'
            &&that.tableObj.pageComponent.isReadOnly!='Y') {
            let tdColorClass;
            if (that.thisIndex % 2 === 0) {//偶数行
                tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutEvenBackgroundColor;
            } else {//奇数行
                tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutOddBackgroundColor;
            }
            let rowColorJson=that._getRowColorJson(content,tdColorClass)
            let tdColor=rowColorJson['tdColor'];
            tdColorClass=rowColorJson['tdColorClass'];
            htmlTemplate += `<td showType="" to="buttons" zIndex="${that.tableObj.contents.length-that.thisIndex}" class="${tdColorClass}"
                style="background-color: ${tdColor};text-align:center;vertical-align: middle;${true?`position: sticky;right: 0;z-index: 10;`:''}"
                id="${content[that.pkFieldName]}${that.tableObj.eleID}"></td>`;
        }
        return htmlTemplate;
    }
    //首列展示管理按钮
    _getSelectManagerFirstShowHtml(content){
        let that=this;
        let htmlTemplate=``;
        if (!util.isNull(that.tableObj.queryInfo.is_managing)
            && that.tableObj.queryInfo.is_managing == 'Y'
            &&(util.isNull(that.tableObj.queryInfo.managing_show_type)||that.tableObj.queryInfo.managing_show_type=='first_show')
            &&that.tableObj.pageComponent.isReadOnly!='Y') {
            let tdColorClass;
            if (that.thisIndex % 2 === 0) {//偶数行
                tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutEvenBackgroundColor;
            } else {//奇数行
                tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutOddBackgroundColor;
            }
            let rowColorJson=that._getRowColorJson(content,tdColorClass)
            let tdColor=rowColorJson['tdColor'];
            tdColorClass=rowColorJson['tdColorClass'];
            htmlTemplate += `<td showType="" to="buttons" zIndex="${that.tableObj.contents.length-that.thisIndex}" class="${tdColorClass}"
                style="background-color: ${tdColor};vertical-align: middle;${true?`position: sticky;left: 0;z-index: ${that.tableObj.contents.length-that.thisIndex};`:''}" 
                id="${content[that.pkFieldName]}_select${that.tableObj.eleID}"></td>`;
        }
        return htmlTemplate;
    }
    //尾列展示管理按钮
    _getSelectManagerLastShowHtml(content){
        let that=this;
        let htmlTemplate=``;
        if (!util.isNull(that.tableObj.queryInfo.is_managing)
            && that.tableObj.queryInfo.is_managing == 'Y'
            &&that.tableObj.queryInfo.managing_show_type=='last_show'
            &&that.tableObj.pageComponent.isReadOnly!='Y') {
            let tdColorClass;
            if (that.thisIndex % 2 === 0) {//偶数行
                tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutEvenBackgroundColor;
            } else {//奇数行
                tdColorClass=config.getConfigJson().defaultTableColorClassJson.tableTDMouseoutOddBackgroundColor;
            }
            let rowColorJson=that._getRowColorJson(content,tdColorClass)
            let tdColor=rowColorJson['tdColor'];
            tdColorClass=rowColorJson['tdColorClass'];
            htmlTemplate += `<td showType="" to="buttons" zIndex="${that.tableObj.contents.length-that.thisIndex}" class="${tdColorClass}"
                style="background-color: ${tdColor};vertical-align: middle;${true?`position: sticky;right: 0;z-index: 10;`:''}"
                id="${content[that.pkFieldName]}_select${that.tableObj.eleID}"></td>`;
        }
        return htmlTemplate;
    }
    _getDataTemplate(content){
        let that=this;
        let htmlTemplate=``;
        that.content=content;//将当前数据存起来，调用方法时用到就无需通过传参方式
        let tableStructureData = that.tableObj.tableStructureData;
        that.tableObj.tdDataMap=new Map();
        for (let j = 0; j < tableStructureData.length; j++) {
            let tdData = tableStructureData[j].data;
            if (tdData.is_list == 'Y'&&tdData.list_load_is_render=='Y') {
                htmlTemplate+=that._createTdHtml(tdData);
                that.tableObj.tdDataMap.set(tdData.name,tdData);
            }
        }
        return htmlTemplate;
    }
    _getSelectDataTemplate(content){
        let that=this;
        let htmlTemplate=``;
        that.content=content;//将当前数据存起来，调用方法时用到就无需通过传参方式
        let tableStructureData = that.tableObj.tableStructureData;
        for (let j = 0; j < tableStructureData.length; j++) {
            let tdData = tableStructureData[j].data;
            if (tdData.is_show_select_table == 'Y'&&tdData.list_load_is_render=='Y') {
                htmlTemplate+=that._createTdHtml(tdData);
            }
        }
        return htmlTemplate;
    }
    _getTextHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        let value=util.isNull(content[tdData.name])?'':content[tdData.name];
        if (that.tableObj.queryInfo.is_edit_table == 'Y'
            &&that.tableObj.pageComponent.isReadOnly!='Y'
            &&(util.isNull(tdData.is_edit_table)||tdData.is_edit_table=='Y')) {
            /*htmlTemplate += `<td showType="text" eleName="${tdData.name}"  style="text-align:center;vertical-align: middle;">
            <input type="text"  name="${tdData.name}" value="${value}" class="form-control" placeholder="">
            </td>`;*/
            htmlTemplate += `<td showType="text" eleName="${tdData.name}"  style="text-align:center;vertical-align: middle;">
                <div class="input-group-append">
                    <input type="text" name="${tdData.name}" value="${value}" class="form-control" placeholder="">
                    <span class="input-group-append" title="保存">
                        <button class="btn btn-sm btn-default" type="button" name="${tdData.name}SaveButton"><i class="far fa-save" style="font-size: 15px;"></i></button>
                    </span>
                </div>
            </td>`;
        } else {//文本和多行文本支持设置最大字符展示，超过则用省略号代替
            let showValue=util.isNull(content[tdData.name])?'':content[tdData.name];
            if(!util.isNull(tdData['font_color'])){
                showValue=that._getFontColorHtml(tdData,showValue)
                htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;">${showValue}</td>`;
                return htmlTemplate;
            }
            let showLength=tdData['show_length'];
            if(!util.isNull(showLength)&&parseInt(showLength)>0){
                if(showValue.length>showLength){
                    showValue=showValue.substring(0,showLength)+'...';
                    htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;word-break: break-all;"
                                data-toggle="popover" data-placement="bottom" data-content="${value}"
                                title="" data-original-title="${tdData.label_name}">
                                ${showValue}
                </td>`;
                }
            }
            if(htmlTemplate==''){
                htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;word-break: break-all;" title="${value}">${showValue}${!util.isNull(showValue)?tdData.field_unit:''}</td>`;
            }
        }
        return htmlTemplate;
    }
    _getTextValue(tdData,pkCode,td){
        let newValue = td.querySelector('input[name="' + tdData.name + '"]').value;
        return newValue
    }

    _getTextareaHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        if (that.tableObj.queryInfo.is_edit_table == 'Y'
            &&that.tableObj.pageComponent.isReadOnly!='Y'
            &&(util.isNull(tdData.is_edit_table)||tdData.is_edit_table=='Y')) {
            htmlTemplate += `<td showType="textarea" eleName="${tdData.name}"  style="text-align:center;vertical-align: middle;">
            <textarea type="textarea" rows="3" name="${tdData.name}" class="form-control" placeholder="">${content[tdData.name]}</textarea>
            </td>`;
        } else {//文本和多行文本支持设置最大字符展示，超过则用省略号代替
            let showValue=content[tdData.name];
            let showLength=tdData['show_length'];
            if(!util.isNull(showLength)&&parseInt(showLength)>0){
                if(showValue.length>showLength){
                    showValue=showValue.substring(0,showLength)+'...';
                    htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;word-break: break-all;"
                                data-toggle="popover" data-placement="bottom" data-content="${content[tdData.name]}"
                                title="" data-original-title="${tdData.label_name}">
                                ${showValue}
                </td>`;
                }
            }
            if(htmlTemplate==''){
                htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;word-break: break-all;" title="${content[tdData.name]}">${showValue}${showValue.length>0?tdData.field_unit:''}</td>`;
            }
        }
        return htmlTemplate;
    }

    _getTextAreaValue(tdData,pkCode,td){
        let newValue = td.querySelector('textarea[name="' + tdData.name + '"]').value;
        return newValue
    }

    _getSelectHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        if (that.tableObj.queryInfo.is_edit_table == 'Y'
            &&that.tableObj.pageComponent.isReadOnly!='Y'
            &&(util.isNull(tdData.is_edit_table)||tdData.is_edit_table=='Y')) {
            let optionHtmlTemplate=``;
            if(tdData.dict_code!=''){
                optionHtmlTemplate += `<option value="">请选择</option>`
                for (let indexSelectDictArray = 0; indexSelectDictArray < tdData.dict_code.data.length; indexSelectDictArray++) {
                    if (tdData.dict_code.data[indexSelectDictArray].key == content[tdData.name]) {
                        optionHtmlTemplate += `<option selected value="${tdData.dict_code.data[indexSelectDictArray].key}">`
                    } else {
                        optionHtmlTemplate += `<option value="${tdData.dict_code.data[indexSelectDictArray].key}">`
                    }
                    optionHtmlTemplate += tdData.dict_code.data[indexSelectDictArray].value
                    optionHtmlTemplate += `</option>`;
                }
            }
            htmlTemplate = `
            <td showType="select" eleName="${tdData.name}" style="text-align:center;vertical-align: middle;">
            <select class="custom-select" name="${tdData.name}">
            ${optionHtmlTemplate}
            </select></td>`;
        } else {
            let value=content[tdData.name].toString().replace(new RegExp(/(,)/g), "");
            if(util.isNull(that.tableObj.dictMap.get(tdData.name))){
                console.log('查询组件设计异常，原因是：'+tdData.label_name+'  缺少字典编码配置（如使用renderAfter处理可无视此信息）')
                htmlTemplate= `<td eleName="${tdData.name}" style="vertical-align: middle;">${value}</td>`;
                return htmlTemplate;
            }
            let showValue = that.tableObj.dictMap.get(tdData.name).get(value);
            if (util.isNull(showValue)) {
                showValue = ' ';
            }else{
                if(!util.isNull(tdData['font_color'])){
                    showValue=that._getFontColorHtml(tdData,showValue)
                }
            }
            htmlTemplate= `<td eleName="${tdData.name}" style="vertical-align: middle;">${showValue}</td>`;
        }
        return htmlTemplate;
    }
    _getSelectValue(tdData,pkCode,td){
        let newValue = td.querySelector('select[name="' + tdData.name + '"]').value;
        return newValue
    }

    _getSelectCheckboxHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        if (that.tableObj.queryInfo.is_edit_table == 'Y'
            &&that.tableObj.pageComponent.isReadOnly!='Y'
            &&(util.isNull(tdData.is_edit_table)||tdData.is_edit_table=='Y')) {
            console.log('列表编辑')
            let optionHtmlTemplate=``;
            if(tdData.dict_code!=''){
                for (let indexSelectDictArray = 0; indexSelectDictArray < tdData.dict_code.data.length; indexSelectDictArray++) {
                    if (content[tdData.name].indexOf(','+tdData.dict_code.data[indexSelectDictArray].key+',')!=-1) {
                        optionHtmlTemplate += `<option selected value="${tdData.dict_code.data[indexSelectDictArray].key}">`
                    } else {
                        optionHtmlTemplate += `<option value="${tdData.dict_code.data[indexSelectDictArray].key}">`
                    }
                    optionHtmlTemplate += tdData.dict_code.data[indexSelectDictArray].value
                    optionHtmlTemplate += `</option>`;
                }
            }
            htmlTemplate = `
            <td showType="select" eleName="${tdData.name}" style="text-align:center;vertical-align: middle;">
            <div id="${tdData.name}${content.id}_select_div" style="width: 100%">
              <select class="selectpicker" multiple="" data-icon-base="ion" data-tick-icon="ion-md-checkmark" id="${tdData.name}${content.id}" name="${tdData.name}" ${false?'disabled':''} >
                ${optionHtmlTemplate}
              </select>
            </div>
            </td>`;
            console.log(content[tdData.name])
            setTimeout(function (){//暂时通过setTimeout绑定完成渲染，后续改成渲染图片后解决渲染
                $('#'+tdData.name+content.id).selectpicker({
                    noneSelectedText: '请选择',
                    /*liveSearch: true,*/
                });
            },1000)
        } else {
            if (!util.isNull(content[tdData.name]) && content[tdData.name].length > 0) {
                let viewValue = ``;
                let value=content[tdData.name].toString().replace(new RegExp(/(,)/g), "");
                if(util.isNull(that.tableObj.dictMap.get(tdData.name))){
                    console.log('查询组件设计异常，原因是：'+tdData.label_name+'  缺少字典编码配置（如使用renderAfter处理可无视此信息）')
                    htmlTemplate= `<td eleName="${tdData.name}" style="vertical-align: middle;">${value}</td>`;
                    return htmlTemplate;
                }
                let valueSplit=tdData['dict_value_split']
                if(util.isNull(valueSplit)){
                    valueSplit=',';
                }
                let checkValues = content[tdData.name].split(',')
                for (let value in checkValues) {
                    let showView = that.tableObj.dictMap.get(tdData.name).get(checkValues[value]);
                    if (!util.isNull(showView)) {
                        viewValue += showView +' '+ valueSplit+' '
                    }
                }
                if (!util.isNull(viewValue)) {
                    viewValue = viewValue.substring(0, viewValue.length - 3)
                    htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;">${viewValue}</td>`;
                }
            } else {
                htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;"></td>`;
            }
        }
        return htmlTemplate;
    }

    _getSelectCheckboxValue(tdData,pkCode,td){
        let selectArray=document.getElementById(tdData.name+pkCode+'_select_div').querySelector('ul').querySelectorAll('.selected');
        if(selectArray.length>0){
            let value = ",";
            let texts = $("#"+tdData.name+pkCode+" option:selected");
            for (let i = 0; i < texts.length; i++) {
                value += texts[i].value + ",";
            }
            return value;
        }else{
            return '';
        }
    }

    _getSelectSearchHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        if (that.tableObj.queryInfo.is_edit_table == 'Y'
            &&that.tableObj.pageComponent.isReadOnly!='Y'
            &&(util.isNull(tdData.is_edit_table)||tdData.is_edit_table=='Y')) {
            console.log('列表编辑')
            let optionHtmlTemplate=``;
            if(tdData.dict_code!=''){
                for (let indexSelectDictArray = 0; indexSelectDictArray < tdData.dict_code.data.length; indexSelectDictArray++) {
                    if (content[tdData.name]==tdData.dict_code.data[indexSelectDictArray].key) {
                        optionHtmlTemplate += `<option selected value="${tdData.dict_code.data[indexSelectDictArray].key}">`
                    } else {
                        optionHtmlTemplate += `<option value="${tdData.dict_code.data[indexSelectDictArray].key}">`
                    }
                    optionHtmlTemplate += tdData.dict_code.data[indexSelectDictArray].value
                    optionHtmlTemplate += `</option>`;
                }
            }
            htmlTemplate = `
            <td showType="select" eleName="${tdData.name}" style="text-align:center;vertical-align: middle;">
            <div id="${tdData.name}${content.id}_select_div" style="color:#665720;width: 100%">
              <select class="select2-demo form-control" id="${tdData.name}${content.id}" name="${tdData.name}" ${false?'disabled':''} >
                ${optionHtmlTemplate}
              </select>
            </div>
            </td>`;
            console.log(content[tdData.name])
            setTimeout(function (){//暂时通过setTimeout绑定完成渲染，后续改成渲染图片后解决渲染
                $('#'+tdData.name+content.id).each(function() {
                    $(this)
                        .wrap('<div class="position-relative"></div>')
                        .select2({
                            placeholder: '请选择',
                            dropdownParent: $(this).parent()
                        });
                })
            },1000)
        } else {
            if (!util.isNull(content[tdData.name]) && content[tdData.name].length > 0) {
                let viewValue = ``;
                let value=content[tdData.name].toString().replace(new RegExp(/(,)/g), "");
                if(util.isNull(that.tableObj.dictMap.get(tdData.name))){
                    console.log('查询组件设计异常，原因是：'+tdData.label_name+'  缺少字典编码配置（如使用renderAfter处理可无视此信息）')
                    htmlTemplate= `<td eleName="${tdData.name}" style="vertical-align: middle;">${value}</td>`;
                    return htmlTemplate;
                }
                let valueSplit=tdData['dict_value_split']
                if(util.isNull(valueSplit)){
                    valueSplit=',';
                }
                let checkValues = content[tdData.name].split(',')
                for (let value in checkValues) {
                    let showView = that.tableObj.dictMap.get(tdData.name).get(checkValues[value]);
                    if (!util.isNull(showView)) {
                        viewValue += showView +' '+ valueSplit+' '
                    }
                }
                if (!util.isNull(viewValue)) {
                    viewValue = viewValue.substring(0, viewValue.length - 3)
                    htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;">${viewValue}</td>`;
                }
            } else {
                htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;"></td>`;
            }
        }
        return htmlTemplate;
    }

    _getSelectSearchValue(tdData,pkCode,td){
        let value = td.querySelector('select[name="' + tdData.name + '"]').value;
        return value;
    }

    _getCheckboxHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        if (that.tableObj.queryInfo.is_edit_table == 'Y'
            &&that.tableObj.pageComponent.isReadOnly!='Y'
            &&(util.isNull(tdData.is_edit_table)||tdData.is_edit_table=='Y')) {
            htmlTemplate += `<td showType="checkbox" eleName="${tdData.name}" style="vertical-align: middle;">`
            for (let indexSelectDictArray = 0; indexSelectDictArray < tdData.dict_code.data.length; indexSelectDictArray++) {
                htmlTemplate += `<label class="form-check form-check-inline">`;
                htmlTemplate += `<input class="form-check-input" type="checkbox" name="${tdData.name}" value="${tdData.dict_code.data[indexSelectDictArray].key}"
                ${(',' + content[tdData.name] + ',').indexOf(',' + tdData.dict_code.data[indexSelectDictArray].key + ',') >= 0?'checked="true"':''}>
                <span class="form-check-label">${tdData.dict_code.data[indexSelectDictArray].value}</span>
                </label><br>
                `
            }
            htmlTemplate += `</td>`
        } else {
            if (!util.isNull(content[tdData.name]) && content[tdData.name].length > 0) {
                let viewValue = ``;
                let value=content[tdData.name].toString().replace(new RegExp(/(,)/g), "");
                if(util.isNull(that.tableObj.dictMap.get(tdData.name))){
                    console.log('查询组件设计异常，原因是：'+tdData.label_name+'  缺少字典编码配置（如使用renderAfter处理可无视此信息）')
                    htmlTemplate= `<td eleName="${tdData.name}" style="vertical-align: middle;">${value}</td>`;
                    return htmlTemplate;
                }
                let valueSplit=tdData['dict_value_split']
                if(util.isNull(valueSplit)){
                    valueSplit=',';
                }
                let checkValues = content[tdData.name].split(',')
                for (let value in checkValues) {
                    let showView = that.tableObj.dictMap.get(tdData.name).get(checkValues[value]);
                    if (!util.isNull(showView)) {
                        viewValue += showView +' '+ valueSplit+' '
                    }
                }
                if (!util.isNull(viewValue)) {
                    viewValue = viewValue.substring(0, viewValue.length - 3)
                    htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;">${viewValue}</td>`;
                }
            } else {
                htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;"></td>`;
            }
        }
        return htmlTemplate;
    }

    _getCheckboxValue(tdData,pkCode,td){
        let newValue = '';
        let eleObj = td.querySelectorAll('input[name="' + tdData.name + '"]');
        for (let i = 0; i < eleObj.length; i++) {
            if (eleObj[i].checked == true) {
                newValue += eleObj[i].value + ",";
            }
        }
        if (newValue.length > 0) {
            newValue = newValue.substring(0, newValue.length - 1)
        }
        return newValue
    }

    _getRadioHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        if (that.tableObj.queryInfo.is_edit_table == 'Y'
            &&that.tableObj.pageComponent.isReadOnly!='Y'
            &&(util.isNull(tdData.is_edit_table)||tdData.is_edit_table=='Y')) {
            htmlTemplate += `<td showType="radio" eleName="${tdData.name}" style="text-align:center;vertical-align: middle;">`
            for (let indexSelectDictArray = 0; indexSelectDictArray < tdData.dict_code.data.length; indexSelectDictArray++) {
                htmlTemplate += `<label class="form-check form-check-inline">`
                htmlTemplate += `<input class="form-check-input" type="radio"  
                name="${tdData.name + content[that.pkFieldName]}" 
                value="${tdData.dict_code.data[indexSelectDictArray].key}"
                ${tdData.dict_code.data[indexSelectDictArray].key == content[tdData.name]?'checked="true"':''}>
                <span class="form-check-label">${tdData.dict_code.data[indexSelectDictArray].value}</span></label><br>
                `
            }
            htmlTemplate += `</td>`;
        } else {
            let value=content[tdData.name].toString().replace(new RegExp(/(,)/g), "");
            if(util.isNull(that.tableObj.dictMap.get(tdData.name))){
                console.log('查询组件设计异常，原因是：'+tdData.label_name+'  缺少字典编码配置（如使用renderAfter处理可无视此信息）')
                htmlTemplate= `<td eleName="${tdData.name}" style="vertical-align: middle;">${value}</td>`;
                return htmlTemplate;
            }
            let showValue = that.tableObj.dictMap.get(tdData.name).get(content[tdData.name].toString());
            if (util.isNull(showValue)) {
                showValue = ' ';
            }else{
                showValue=that._getFontColorHtml(tdData,showValue)
            }
            htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;">${showValue}</td>`;
        }
        return htmlTemplate;
    }
    _getRadioValue(tdData,pkCode,td){
        let newValue = '';
        let eleObj = td.querySelectorAll('input[name="' + tdData.name + pkCode + '"]');
        for (let i = 0; i < eleObj.length; i++) {
            if (eleObj[i].checked == true) {
                newValue = eleObj[i].value;
                break;
            }
        }
        return newValue
    }
    _getSwitchHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        if (that.tableObj.queryInfo.is_edit_table == 'Y'
            &&that.tableObj.pageComponent.isReadOnly!='Y'
            &&(util.isNull(tdData.is_edit_table)||tdData.is_edit_table=='Y')) {
            if(util.isNull(tdData.switch_yes_key)||util.isNull(tdData.switch_no_key))khcAlert.showSystemError(tdData.name+' 表单类型为：Switch开关控件 未设置选中和未选中的key')
            let dict=tdData.dict_code.data;
            tdData.dictMap=new Map();
            if(util.isNull(dict)){
                dict=[];
            }
            for (let i = 0; i < dict.length; i++) {
                tdData.dictMap.set(dict[i].key.toString(),dict[i].value);
            }
            htmlTemplate += `<td showType="switch" eleName="${tdData.name}" style="text-align:center;vertical-align: middle;">
                                 <label class="switcher" title="${tdData.label_name}">
                                     <input type="checkbox" class="switcher-input" name="${tdData.name + content[that.pkFieldName]}" ${tdData.is_read_only=='Y'?'disabled':''}
                                     ${tdData.switch_yes_key == content[tdData.name]?'checked="true"':''}>
                                     <span class="switcher-indicator">
                                       <span class="switcher-yes">${tdData.dictMap.get(tdData.switch_yes_key)}</span>
                                       <span class="switcher-no">${tdData.dictMap.get(tdData.switch_no_key)}</span>
                                     </span>
                                 </label>
                             </td>`
        } else {
            let value=content[tdData.name].toString().replace(new RegExp(/(,)/g), "");
            if(util.isNull(that.tableObj.dictMap.get(tdData.name))){
                console.log('查询组件设计异常，原因是：'+tdData.label_name+'  缺少字典编码配置（如使用renderAfter处理可无视此信息）')
                htmlTemplate= `<td eleName="${tdData.name}" style="vertical-align: middle;">${value}</td>`;
                return htmlTemplate;
            }
            let showValue = that.tableObj.dictMap.get(tdData.name).get(content[tdData.name].toString());
            if (util.isNull(showValue)) {
                showValue = ' ';
            }
            htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;" title="${showValue}">${showValue}</td>`;
        }
        return htmlTemplate;
    }
    _getSwitchValue(tdData,pkCode,td){
        let newValue = '';
        let eleObj = td.querySelectorAll('input[name="' + tdData.name + pkCode + '"]');
        for (let i = 0; i < eleObj.length; i++) {
            if (eleObj[i].checked == true) {
                newValue+=eleObj[i].value+",";
            }
        }
        if (newValue.length>0) {
            newValue = tdData.switch_yes_key;
        }else{
            newValue = tdData.switch_no_key;
        }
        return newValue
    }
    _getDateHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        if (that.tableObj.queryInfo.is_edit_table == 'Y'
            &&that.tableObj.pageComponent.isReadOnly!='Y'
            &&(util.isNull(tdData.is_edit_table)||tdData.is_edit_table=='Y')) {
            htmlTemplate += `<td showType="text" eleName="${tdData.name}"  to="date" style="text-align:center;vertical-align: middle;">
            <input type="text" to="date" readonly  name="${tdData.name}" value="${content[tdData.name]}" class="form-control" placeholder=""></td>`;
        } else {
            htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;">${content[tdData.name]}</td>`;
        }
        return htmlTemplate;
    }
    _getDateValue(tdData,pkCode,td){
        let newValue = td.querySelector('input[name="' + tdData.name + '"]').value;
        return newValue
    }
    _getAutocompleteHtml(tdData){
        let that=this;
        return that._getDefaultHtml(tdData);
    }
    _getTagHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        let tagValues = content[tdData.name].split(',');
        let tagHtml=``;
        for (let i = 0; i < tagValues.length; i++) {
            if(!util.isNull(tagValues[i])){
                tagHtml+=`<span class="tag label label-info">${tagValues[i]}</span>`;
            }
        }
        htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;">
                    <div class="bootstrap-tagsinput" style="border: 0px solid rgba(24, 28, 33, 0.1);background-color: transparent ;">
                    ${tagHtml}
                    </div></td>`;
        return htmlTemplate;
    }
    _getTreeHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        let showValue =``;
        if(tdData.tree_show_value_type=='full'){
            let treeSplit=!util.isNull(tdData.tree_show_full_split)?tdData.tree_show_full_split:'';
            if(util.isNull(tdData.getFullShowValue)){
                tdData.getFullShowValue=(id,showValue)=>{
                    if(util.isNull(tdData.dictMap)){
                        let dictDataArray=tdData.dict_code.data;
                        tdData.dictMap=new Map();
                        if(util.isNull(dictDataArray)){
                            dictDataArray=[];
                        }
                        for(let i=0;i<dictDataArray.length;i++){
                            tdData.dictMap.set(dictDataArray[i].id.toString(),dictDataArray[i]);
                        }
                    }
                    let thisDict=tdData.dictMap.get(id.toString())
                    if(!util.isNull(thisDict)&&parseInt(thisDict.level)!=0){
                        if(!util.isNull(showValue))showValue=treeSplit+showValue
                        return tdData.getFullShowValue(thisDict.pId,thisDict.name+showValue);
                    }else{
                        return showValue;
                    }
                }
            }
            showValue = tdData.getFullShowValue(content[tdData.name],'');
        }else{
            showValue = that.tableObj.dictMap.get(tdData.name).get(content[tdData.name]+'');
        }
        if (showValue == undefined) {
            showValue = '';
        }
        htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;">${showValue}</td>`;
        return htmlTemplate;
    }
    _getTreeCheckBoxHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        let showValue =``;
        if(tdData.tree_show_value_type=='full'){
            let treeSplit=!util.isNull(tdData.tree_show_full_split)?tdData.tree_show_full_split:'';
            if(util.isNull(tdData.getFullShowValue)){
                tdData.getFullShowValue=(id,showValue)=>{
                    if(util.isNull(tdData.dictMap)){
                        let dictDataArray=tdData.dict_code.data;
                        tdData.dictMap=new Map();
                        if(util.isNull(dictDataArray)){
                            dictDataArray=[];
                        }
                        for(let i=0;i<dictDataArray.length;i++){
                            tdData.dictMap.set(dictDataArray[i].id.toString(),dictDataArray[i]);
                        }
                    }
                    let thisDict=tdData.dictMap.get(id.toString())
                    if(!util.isNull(thisDict)&&parseInt(thisDict.level)!=0){
                        if(!util.isNull(showValue))showValue=treeSplit+showValue
                        return tdData.getFullShowValue(thisDict.pId,thisDict.name+showValue);
                    }else{
                        return showValue;
                    }
                }
            }
            let checkedNodeArray = content[tdData.name].split(',');
            let tagHtml='';
            for (let i = 0; i < checkedNodeArray.length; i++) {
                if(util.isNull(checkedNodeArray[i]))continue;
                let checkValue = tdData.getFullShowValue(checkedNodeArray[i]+'','');
                tagHtml+=`<span class="tag label label-info">${checkValue}</span>`;
            }
            showValue += `
                    <div class="bootstrap-tagsinput" style="border: 0px solid rgba(24, 28, 33, 0.1);background-color: transparent ;">
                    ${tagHtml}
                    </div>`;
        }else{
            let checkedNodeArray = content[tdData.name].split(',');
            for (let i = 0; i < checkedNodeArray.length; i++) {
                if(util.isNull(checkedNodeArray[i]))continue;
                showValue += that.tableObj.dictMap.get(tdData.name).get(checkedNodeArray[i]+'')+',';
            }
        }
        if (showValue == undefined) {
            showValue = '';
        }
        htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;">${showValue}</td>`;
        return htmlTemplate;
    }
    _getHiddenHtml(tdData){
        let that=this;
        return that._getDefaultHtml(tdData);
    }
    _getFileHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        let fileData = content[tdData.name];
        let fileHtml = ``;
        if (!util.isNull(fileData)) {
            let fileArray = JSON.parse(fileData);
            for (let key in fileArray) {
                let fileUrl =util.getFileUrl(fileArray[key]);
                let showLength=tdData['show_length'];
                let realFileName=fileArray[key].realFileName;
                if(!util.isNull(showLength)&&parseInt(showLength)>0){
                    if(realFileName.length>showLength){
                        realFileName=realFileName.substring(0,showLength)+'...';
                    }
                }
                let openUrl='';
                //这里由于minio和service存储的suffix有区别需要判断两个一个带点一个不带
                let suffix=fileArray[key]['suffix'];
                let paramsFileUrl=encodeURIComponent(fileUrl);
                // 使用btoa进行Base64编码
                paramsFileUrl = btoa(paramsFileUrl);
                //let paramsFileUrl=encodeURIComponent(fileUrl);
                if(suffix=='docx'||suffix=='.docx'){
                    openUrl='../preview/docxjs/index.html?file='+paramsFileUrl;
                }
                if((suffix=='xls'||suffix=='xlsx')||(suffix=='.xls'||suffix=='.xlsx')){
                    openUrl='../preview/sheetjs/index.html?file='+paramsFileUrl;
                }
                if(suffix=='pdf'||suffix=='.pdf'){
                    openUrl='../preview/pdfjs/web/viewer.html?file='+paramsFileUrl;
                }
                if((suffix=='jpg'||suffix=='jpeg'||suffix=='png')||(suffix=='.jpg'||suffix=='.jpeg'||suffix=='.png')){
                    openUrl='../preview/photoswipe/index.html?file='+paramsFileUrl;
                }
                let previewHtml='';
                if(openUrl!=''){
                    if((suffix=='xls'||suffix=='xlsx')||(suffix=='.xls'||suffix=='.xlsx')){
                        previewHtml=`<a class="dropdown-item" href='javascript:window.open("${openUrl}");'>预览</a>`;
                    }else{
                        previewHtml=`<a class="dropdown-item" href='javascript:window.open("${openUrl}","title","menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");'>预览</a>`;
                    }
                }
                fileHtml += `<div class="col-sm-12 row divRow"><div class="col-sm-9" style="bottom: 3px;">
                            <a download="${fileArray[key].source=='minio'||fileArray[key].source=='seaweedfs'?`${fileArray[key].realFileName}`:''}" href="javascript:void(0)" title="${fileArray[key].realFileName}" data-toggle="dropdown" aria-expanded="false">
                                ${realFileName}
                             </a>
                             <div class="dropdown-menu" x-placement="top-start" style="position: absolute; top: -177px; left: 0px; will-change: top, left;">
                                ${previewHtml}
                                 <a download="${fileArray[key].source=='minio'||fileArray[key].source=='seaweedfs'?`${fileArray[key].realFileName}`:''}" class="dropdown-item"
                                 href="${fileUrl}" title="${fileArray[key].realFileName}">下载</a>
                            </div>
                            </div>
                            <div class="col-sm-3" id="${fileArray[key].diskFileName}" style="text-align: right;">`;

                fileHtml += '</div></div>'
            }
            if (!util.isNull(fileHtml)) {
                fileHtml = fileHtml.substring(0, fileHtml.length - 4)
            }
        }
        if (that.tableObj.queryInfo.is_edit_table == 'Y'
            &&that.tableObj.pageComponent.isReadOnly!='Y'
            &&(util.isNull(tdData.is_edit_table)||tdData.is_edit_table=='Y')) {
            that.tableObj.isListAndIsFileFiled=true;//标识该有字段用到列表编辑并且为file类型了，特殊处理单独渲染和绑定事件
            htmlTemplate += `<td showType="text" eleName="${tdData.name}"  style="text-align:center;vertical-align: middle;">
            <div class="col-sm-${that.inputCol} demo-vertical-spacing-sm">
            <label class="custom-file" name="${tdData.name}label">
            <input type="hidden"  name="${tdData.name}">
            <input type="file"  id="${tdData.name}-${content[that.pkFieldName]}" class="custom-file-input" placeholder="" accept="${tdData.accept}">
            <span class="custom-file-label"></span>
            </label>
            <div class="row col-sm-12" name="${tdData.name}list"></div>
            </div>
            </td>`;
        }else{
            htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;">${fileHtml}</td>`;
        }
        return htmlTemplate;
    }
    _getFileValue(tdData,pkCode,td){
        let newValue = td.querySelector('input[name="' + tdData.name + '"]').value;
        return newValue
    }
    _getImageHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate=``;
        that.tableObj.isImageFiled=true;//标识该有字段用到image类型了，特殊处理（添加查看原图事件）
        let fileData = content[tdData.name];
        let imageHtml = ``;
        if (!util.isNull(fileData)) {
            let fileArray = JSON.parse(fileData);
            imageHtml += `<div class="col-sm-12 demo-vertical-spacing-sm">`
            imageHtml += `   <div id="${tdData.name}-${content[that.pkFieldName]}photoswipe-example-query" class="row pswp-gallery pswp-gallery--single-column">`
            for (let i = 0; i < fileArray.length; i++) {
                let fileInfo=fileArray[i];
                let imageUrl=``;
                let imageAwsUrl=``;
                if(fileArray[i].source=='minio'){
                    imageUrl=config.getMinioUrl()+'/'+fileInfo.diskFileName;
                    imageAwsUrl=config.getAwsUrl()+'/120x100/'+fileInfo.diskFileName
                }
                if(fileArray[i].source=='seaweedfs'){
                    imageUrl=config.getSeaweedfsUrl()+'/'+fileInfo.diskFileName;
                    imageAwsUrl=config.getSeaweedfsAwsUrlUrl()+'/120x100/'+fileInfo.diskFileName
                }
                imageHtml +=`
                <div class="" id="${fileInfo.diskFileName}mouseout">
                <a id="${fileInfo.diskFileName}mouseover" class="img-thumbnail img-thumbnail-zoom-in" href="${imageUrl}" data-pswp-width="${fileInfo.width}" data-pswp-height="${fileInfo.height}" target="_blank">
                <span class="img-thumbnail-overlay bg-white opacity-75" title="点击查看原图"></span>
                <span class="img-thumbnail-content display-4 text-secondary" title="点击查看原图"><i class="ion ion-ios-search"></i></span>
                <img src="${imageAwsUrl}" alt="">
                </a>
                <button id="${fileInfo.diskFileName}" type="button" name="deleteImage" class="btn btn-xs btn-danger mr-2" style="display: none">
                <span class="far fa-trash-alt"></span>&nbsp;删除</button>
                </div>&nbsp;
                `;
            }
            imageHtml += `   </div>`
            imageHtml += `</div>`
            if (!util.isNull(imageHtml)) {
                imageHtml = imageHtml.substring(0, imageHtml.length - 4)
                htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;">${imageHtml}</td>`;
            }
        } else {
            htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;"></td>`;
        }
        return htmlTemplate;
    }
    //渲染默认的html
    _getDefaultHtml(tdData){
        let that=this;
        let content=that.content;
        let htmlTemplate='';
        let showValue=util.isNull(content[tdData.name])?'':content[tdData.name];
        let showLength=tdData['show_length'];
        if(!util.isNull(tdData['font_color'])){
            showValue=that._getFontColorHtml(tdData,showValue)
            htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;">${showValue}</td>`;
            return htmlTemplate;
        }
        if(!util.isNull(showLength)&&parseInt(showLength)>0){
            if(showValue.length>showLength){
                let tdTitleHtml=``
                if(util.isNull(tdData['is_show_td_title'])||tdData['is_show_td_title']=='Y'){
                    tdTitleHtml=`data-toggle="popover" data-placement="bottom" data-content="${content[tdData.name]}"
                                title="" data-original-title="${tdData.label_name}"`
                }
                showValue=showValue.substring(0,showLength)+'...';
                htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;word-break: break-all;" ${tdTitleHtml}>
                                ${showValue}
                </td>`;
            }
        }
        if(htmlTemplate==''){
            let tdTitle=''
            if(util.isNull(tdData['is_show_td_title'])||tdData['is_show_td_title']=='Y')tdTitle=content[tdData.name]
            let rewriteTdValueTemplate=tdData['rewrite_td_value_template'];
            if(tdData['is_rewrite_td_value']=='Y'){
                rewriteTdValueTemplate=util.toOldChar(rewriteTdValueTemplate);
                let replaceContent=util.clone(content);
                replaceContent.tdValue=content[tdData.name];
                for (let key in replaceContent) {
                    let value=replaceContent[key];
                    // 判断 value 是否是一个有效的数组字符串
                    if (typeof value === 'string') {
                        // 去掉多余空格并检查是否是数组格式
                        const trimmedValue = value.trim();

                        if (trimmedValue.startsWith('[') && trimmedValue.endsWith(']')) {
                            let decodedValue;
                            try {
                                decodedValue=util.toOldChar(trimmedValue);
                                // 手动替换换行符和制表符
                                decodedValue = decodedValue.replace(/\n/g, '\\n').replace(/\t/g, '\\t');

                                // 尝试将字符串解析为数组对象
                                const parsedValue = JSON.parse(decodedValue);

                                // 如果解析成功，将其赋值给 content[key]
                                replaceContent[key] = parsedValue;
                            } catch (e) {
                                // 错误信息更具体
                                console.error(`无法解析为有效数组`);
                            }
                        }
                    }
                }
                // 替换占位符为实际值
                rewriteTdValueTemplate = util.replaceTemplate(rewriteTdValueTemplate, replaceContent);
            }else{
                if(tdData['td_render_type']=='str'){
                    showValue=showValue.replace(/</g, '&lt;').replace(/>/g, '&gt;')
                }
                if (typeof showValue === 'object' && showValue !== null) {
                    // 如果是对象，转换为 JSON 字符串
                    showValue = JSON.stringify(showValue);
                }
                rewriteTdValueTemplate=showValue;
            }
            htmlTemplate += `<td eleName="${tdData.name}" style="vertical-align: middle;word-break: break-all;" title="${tdTitle}">${rewriteTdValueTemplate}${!util.isNull(showValue)?tdData.field_unit:''}</td>`;
        }
        return htmlTemplate;
    }
    //渲染带状态色的html
    _getFontColorHtml(tdData,showValue){
        if(util.isNull(tdData['font_color'])){
            return showValue;
        }
        let fontColorJson;
        let color='';
        let colorClassName='';
        try {
            fontColorJson = JSON.parse(tdData['font_color']);
            if(!fontColorJson[showValue]){
                return showValue;
            }
            colorClassName=config.getConfigJson().defaultColorClassJson[fontColorJson[showValue]];
            if(!colorClassName){
                color=util.getColorByName(fontColorJson[showValue]);
            }
        } catch (e) {
            fontColorJson = tdData['font_color'];//str
            colorClassName=config.getConfigJson().defaultColorClassJson[fontColorJson[showValue]];
            if(!colorClassName){
                colorClassName=''
                color=util.getColorByName(fontColorJson);
            }
        }
        if(tdData['render_font_color_type']=='1'){
            return `<span title="${showValue}"><span class="badge badge- badge-dot mr-1 mb-1 ${colorClassName?colorClassName['bfColor']:''}" style="${color?'background-color:'+color:''};"></span>${showValue}</span>`
        }else{
            return `<span class="badge badge-outline ${colorClassName?colorClassName['color']:''}" style="box-shadow: 0 0 0 1px inset;${color?'color:'+color:''}" title="${showValue}">${showValue}</span>`
        }
    }
    _getRowColorJson(content,tdColorClass){
        let that=this;
        let rowColorStr=that.tableObj.queryInfo['row_color_config']
        let rowColorJson;
        let defaultTemplate={tdColor:'',tdColorClass:tdColorClass}
        try {
            rowColorJson = JSON.parse(rowColorStr)
        } catch (e) {
            rowColorJson=[];
        }
        if(rowColorStr==null||rowColorJson.length==0)return defaultTemplate;
        for (let i = 0; i < rowColorJson.length; i++) {
            let rowColorConfig=rowColorJson[i];
            let fieldValue=content[rowColorConfig['fieldName']];
            const map=
                [[
                    ()=>util.isNull(rowColorConfig['operator'])||rowColorConfig['operator']=='==',()=>{
                        return content[rowColorConfig['fieldName']] == rowColorConfig['fieldValue'];//未设置${operator}默认为==
                    }],[
                    ()=>rowColorConfig['operator']=='>=',()=>{
                        return !util.isNull(fieldValue)&&parseFloat(content[rowColorConfig['fieldName']]) >= parseFloat(rowColorConfig['fieldValue']);
                    }],[
                    ()=>rowColorConfig['operator']=='<=',()=>{
                        return !util.isNull(fieldValue)&&parseFloat(content[rowColorConfig['fieldName']]) <= parseFloat(rowColorConfig['fieldValue']);
                    }],[
                    ()=>rowColorConfig['operator']=='>',()=>{
                        return !util.isNull(fieldValue)&&parseFloat(content[rowColorConfig['fieldName']]) > parseFloat(rowColorConfig['fieldValue']);
                    }],[
                    ()=>rowColorConfig['operator']=='<',()=>{
                        return !util.isNull(fieldValue)&&parseFloat(content[rowColorConfig['fieldName']]) < parseFloat(rowColorConfig['fieldValue']);
                    }]
                ]
            let target=map.find((m)=>m[0]());//find()是es6新加的方法，具体可以看ES6文档
            if(target){
                let isMatch =target[1]()
                if(isMatch){
                    return {tdColor:rowColorConfig['color'],tdColorClass:''};//第一个条件符合就退出
                }
            }else{
                return defaultTemplate;
            }
        }
        return defaultTemplate;
    }
}
export {tableUtil}