"use strict";
import { fullMap } from '../../../fullMap.js';
import { khcAlert } from '../../../component/alert/khcAlert.js'
import {util} from "../../../util/util.js";
import {config} from "../../../config.js";
import {httpUtil} from "../../../util/httpUtil.js";
import {khcToastr} from "../../../component/alert/khcToastr.js";
import {componentList} from "./form_build/componentList.js";
import {componentFieldList} from "./form_build/componentFieldList.js";
import {componentForm} from "./form_build/componentForm.js";
import {formBuild} from "./form_build/formBuild.js";
import {formHeaderButtonList} from "./form_build/formHeaderButtonList.js";

let functionMap=new Map();// 使用 Map 来存储多个函数。每个函数都通过 set 方法添加到 Map 中，键是函数名，值是对应的函数。
export function main(jsonConfig) {
    try {
        functionMap.get(jsonConfig.button_method).apply(jsonConfig);
    } catch (error) {
        khcAlert.showSystemError(error.message);
        console.log(error);
    }
}

function formBuildRenderAfter(){
    fullMap.getObj('ws').khcWSFuncMap.set("test",function (data){
        console.log('test2024.......'+JSON.stringify(data))
        khcToastr.showSuccessMessage(data.message)
    })
    let jsonConfig=this;
    let homeComponent=fullMap.getObj(jsonConfig.objID)
    let renderQueryPageFunc=()=>{
        window.scrollTo(0, 0);
        document.getElementById(homeComponent.getParentPageDivId()).style.display=''
        let queryHtmlTemplate=`<!-- Content -->
            <div class="bg-white" style="display: flex; width: 100%;">
                <!-- 左侧固定宽度 -->
                <div style="width: 260px; padding: 10px;">
                    <aaa id="${homeComponent.getParentPageDivId()}_componentListDiv"></aaa>
                </div>

                <!-- 中间自适应 -->
                <div style="flex: 1; padding: 15px;">
                    <div class="media flex-wrap align-items-center py-1 px-1 px-lg-4">
                        <div id="${homeComponent.getParentPageDivId()}_buildFormHeaderButtonLeft" class="media-body d-flex flex-wrap flex-basis-100 flex-basis-sm-auto">
                        </div>
                        <div id="${homeComponent.getParentPageDivId()}_buildFormHeaderButtonRight" class="d-flex flex-wrap">
                        </div>
                    </div>
                    <div class="card mb-4" style="min-height: 800px;max-height:800px;margin: 0 auto;" id="${homeComponent.getParentPageDivId()}_buildFormStartDiv">
                        <div class="col-9 align-self-center text-center mt-3">
                            <h3 id="${homeComponent.getParentPageDivId()}_buildFormTitle"></h3>
                        </div>
                        <div class="row m-1" style="padding-left: 1.5rem;padding-top: 0rem;padding-right: 1.5rem;" id="${homeComponent.getParentPageDivId()}_buildFormStart">
                        </div>
                    </div>
                </div>

                <!-- 右侧固定宽度 -->
                <div style="width: 280px; padding: 10px;">
                    <div class="sidenav sidenav-vertical bg-white mb-4 sidenav-no-animation" style="height: 800px">
                        <ul class="nav nav-sm nav-tabs tabs-alt nav-justified mt-3">
                            <li class="nav-item">
                                <a class="nav-link active show" data-toggle="tab" href="#${homeComponent.getParentPageDivId()}_build_field_info">组件属性</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#${homeComponent.getParentPageDivId()}_build_form">表单属性</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade active show" id="${homeComponent.getParentPageDivId()}_build_field_info"></div>
                            <div class="tab-pane fade" id="${homeComponent.getParentPageDivId()}_build_form"></div>
                        </div>

                        <div class="ps__rail-x" style="left: 0px; bottom: 0px;">
                            <div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
                        </div>
                        <div class="ps__rail-y" style="top: 0px; right: 0px;">
                            <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- / Content -->`
        document.getElementById(`${homeComponent.getParentPageDivId()}`).insertAdjacentHTML("beforeEnd",queryHtmlTemplate);
        let componentListData = {
            title: '组件库',
            objectName: 'componentList',
            domID:`${homeComponent.getParentPageDivId()}_componentListDiv`,
            dataList: [
                {clickEvent: 'addText', icon: 'oi oi-text d-block display-5', label: '单行文本'},
                {clickEvent: 'addTextarea', icon: 'oi oi-menu d-block display-5', label: '多行文本'},
                {clickEvent: 'addRadio', icon: 'oi oi-target d-block display-5', label: '单选框'},
                {clickEvent: 'addCheckbox', icon: 'oi oi-circle-check d-block display-5', label: '复选框'},
                {clickEvent: 'addSelect', icon: 'fas fa-chevron-down d-block display-5', label: '下拉框'},
                {clickEvent: 'addDualList', icon: 'ion ion-md-swap d-block display-5', label: '穿梭框'},
                {clickEvent: 'addDate', icon: 'far fa-calendar-alt d-block display-5', label: '日期控件'},
                {clickEvent: 'addSwitch', icon: 'ion ion-md-switch d-block display-5', label: '开关控件'},
                {clickEvent: 'addTag', icon: 'fas fa-tag d-block display-5', label: '标签控件'},
                {clickEvent: 'addColor', icon: 'ion ion-ios-color-palette d-block display-5', label: '颜色选择器'},
                {clickEvent: 'addFile', icon: 'far fa-file-alt d-block display-5', label: '文件（待开发）'},
                {clickEvent: 'addImage', icon: 'far fa-images d-block display-5', label: '图片（待开发）'},
                /*{clickEvent: 'addMarkScore', icon: 'oi oi-star d-block display-5', label: '评分（待开发）'},*/
            ]
        }

        let formHeaderButtonListData = {
            title: '顶部按钮',
            objectName: 'headerButtonList',
            buildFormHeaderButtonLeftID:`${homeComponent.getParentPageDivId()}_buildFormHeaderButtonLeft`,
            buildFormHeaderButtonRightID:`${homeComponent.getParentPageDivId()}_buildFormHeaderButtonRight`,
            buildFormStartDivID:`${homeComponent.getParentPageDivId()}_buildFormStartDiv`,
            dataLeftButtonList: [
                {clickEvent: 'leftViewPc', icon: 'ion ion-ios-desktop', label: 'Pc', class: 'btn-outline-info'},
                {clickEvent: 'leftViewPad', icon: 'ion ion-md-phone-landscape', label: 'Pad', class: 'btn-outline-info'},
                {clickEvent: 'leftViewPhone', icon: 'ion ion-md-phone-portrait', label: 'Phone', class: 'btn-outline-info'},
            ],
            dataRightButtonList: [
                {clickEvent: 'rightImportJSON', icon: 'fas fa-upload', label: '导入', class: 'btn-outline-info'},
                {clickEvent: 'rightExport', icon: 'fas fa-download', label: '导出', class: 'btn-outline-info'},
                {clickEvent: 'rightPreview', icon: 'ion ion-md-search', label: '预览', class: 'btn-outline-info'},
                {clickEvent: 'rightClean', icon: 'ion ion-md-trash', label: '清空', class: 'btn-outline-danger'},
            ]
        }

        let dict_code_field_layout_type={
            "code": "field_layout_type",
            "data": [
                {
                    "key": "horizontal",
                    "value": "水平-左右"
                },
                {
                    "key": "form_row",
                    "value": "垂直-上下"
                }
            ],
            "type": "default"
        }

        let dict_code_show_type={
            "code": "show_type",
            "data": [
                {
                    "key": "text",
                    "value": "文本框"
                },
                {
                    "key": "textarea",
                    "value": "多行文本"
                },
                {
                    "key": "radio",
                    "value": "单选框"
                },
                {
                    "key": "checkbox",
                    "value": "复选框"
                },
                {
                    "key": "select",
                    "value": "下拉框"
                },
                {
                    "key": "dualList",
                    "value": "穿梭框"
                },
                {
                    "key": "date",
                    "value": "日期控件"
                },
                {
                    "key": "switch",
                    "value": "开关控件"
                },
                {
                    "key": "tag",
                    "value": "标签控件"
                },
                {
                    "key": "color",
                    "value": "颜色选择器"
                }
            ],
            "type": "default"
        }

        let componentFieldListData = {
            title: '组件属性',
            objectName: 'componentFieldList',
            domID:`${homeComponent.getParentPageDivId()}_build_field_info`,
            dataList: [
                {name: 'show_type', show_type: 'select', label_name: '组件类型',placeholder:'',dict_code:dict_code_show_type},
                {name: 'name', show_type: 'text', label_name: '字段名',placeholder:'请输入字段名'},
                {name: 'label_name', show_type: 'text', label_name: '标题',placeholder:'请输入标题'},
                {name: 'placeholder', show_type: 'text', label_name: '占位提示',placeholder:'请输入占位提示'},
                {name: 'default_value', show_type: 'text', label_name: '默认值',placeholder:'请输入默认值'},
                {name: 'rows', show_type: 'text', label_name: '行数',placeholder:'请输入行数'},
                {name: 'col', show_type: 'slider', label_name: 'col占比',placeholder:'',sliderInfo:{'data-slider-min':1,'data-slider-max':12,'data-slider-step':1,'data-slider-value':12}},
                {name: 'field_layout_type', show_type: 'select', label_name: '布局类型',placeholder:'',dict_code:dict_code_field_layout_type},
                {name: 'is_read_only', show_type: 'switch', label_name: '是否只读',placeholder:''},
                {name: 'can_null', show_type: 'switch', label_name: '是否必填',placeholder:''},
                {name: 'switch_yes_key', show_type: 'text', label_name: '开启值',placeholder:'请输入开启值'},
                {name: 'switch_no_key', show_type: 'text', label_name: '关闭值',placeholder:'请输入关闭值'},
                {name: 'dict_code_json', show_type: 'kv', label_name: '选项字典',placeholder:'字典JSON2',dict_code_json:[{key:1,value:'选项1'},{key:2,value:'选项2'}]},
            ]
        }

        let componentFormData = {
            title: '表单属性',
            form_name: '测试构建表单',
            objectName: 'componentForm',
            domID:`${homeComponent.getParentPageDivId()}_build_form`,
            buildFormTitleID:`${homeComponent.getParentPageDivId()}_buildFormTitle`,
            dataList: [
                {name: 'form_name', show_type: 'text', label_name: '表单名',placeholder:'请输入字段名',default_value: '测试构建表单'},
            ]
        }

        let componentListObj=new componentList(componentListData)
        componentListObj.render(componentListData.domID)

        let formHeaderButtonListObj=new formHeaderButtonList(formHeaderButtonListData)
        formHeaderButtonListObj.render()

        let componentFieldListObj=new componentFieldList(componentFieldListData)
        componentFieldListObj.render(componentFieldListData.domID)

        let componentFormObj=new componentForm(componentFormData)
        componentFormObj.render(componentFormData.domID)

        let formBuildData = {
            componentFieldListObj:componentFieldListObj,
            componentFormObj:componentFormObj,
            buildFormStartDivID:`${homeComponent.getParentPageDivId()}_buildFormStartDiv`,
            buildFormStartID:`${homeComponent.getParentPageDivId()}_buildFormStart`,
            buildFormTitleID:`${homeComponent.getParentPageDivId()}_buildFormTitle`,
        }

        let formBuildObj=new formBuild(formBuildData)
        formBuildObj.setTitle(componentFormData.form_name);
        $(`#${componentFormData.buildFormTitleID}`).html(formBuildObj.getTitle());
        formBuildObj.initEventFormBuild()
        componentListObj.addClickEvent(formBuildObj)
        formHeaderButtonListObj.formBuildObj=formBuildObj;
        formBuildObj.formHeaderButtonListObj=formHeaderButtonListObj;
        formHeaderButtonListObj.componentFormObj=componentFormObj;

        new PerfectScrollbar(document.getElementById(`${homeComponent.getParentPageDivId()}_buildFormStartDiv`));
        Sortable.create(document.getElementById(`${homeComponent.getParentPageDivId()}_buildFormStart`), {
            filter: '.noDrop', // 'filtered' class is not draggable
            animation: 150,
            onEnd: function (evt) {
                let sortValue = 0;
                let exportInputDataArr=[];
                $(`#${homeComponent.getParentPageDivId()}_buildFormStart`).children().each(function () {
                    exportInputDataArr.push(formBuildObj.formDataMap.get($(this).attr('id')).getData().inputData)
                    sortValue++;
                    formBuildObj.formDataMap.get($(this).attr('id')).getData().sort = sortValue * 10;
                });

            },
        });

    }
    loadScript(renderQueryPageFunc)
}
functionMap.set('formBuildRenderAfter', formBuildRenderAfter);// 将函数添加到 Map 中

function loadScript(callback){
    let isLoadMessagesCSS=fullMap.getObj('isLoadMessagesCSS');
    if(util.isNull(isLoadMessagesCSS)||isLoadMessagesCSS=='N'){
        util.loadCss('../css/vendor/css/pages/messages.css')
        util.loadCss('../css/vendor/libs/dragula/dragula.css')
        util.loadCss('../css/vendor/libs/bootstrap-slider/bootstrap-slider.css')
        util.loadScript('../css/vendor/libs/dragula/dragula.js','text/javaScript',function (){
            util.loadScript('../css/vendor/libs/sortablejs/sortable.js','text/javaScript',function (){
                util.loadScript('../css/vendor/libs/bootstrap-slider/bootstrap-slider.js','text/javaScript',function (){
                    loadScript(callback)
                })
            })
        })
        fullMap.push('isLoadMessagesCSS','Y');
        return ;
    }
    callback()
}