"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";

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 usageDataSourceStepsRenderAfter(){
    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=()=>{
        document.getElementById(homeComponent.getParentPageDivId()).style.display=''
        let queryHtmlTemplate=`<div class="layout-example-block layout-example-block-navbar mb-1 mt-1 col-12" style="background: #fff;">
    <div class="col-12" style="color: #666;font-size: 18px;font-family: 'MiSans Bold', 'MiSans Normal', 'MiSans', sans-serif;font-weight: 700;font-style: normal;font-size: 18px;">
        <div class="card-body">
            <h6 class="text-muted small font-weight-bold py-2 my-2">
              数据源
            </h6>
                <form id="smartwizard-6" action="javascript:void(0)">
              <ul class="card px-4 pt-3 mb-3">
                <li>
                  <a href="#smartwizard-6-step-1" class="mb-3">
                    <span class="sw-done-icon ion ion-md-checkmark"></span>
                    <span class="sw-number">1</span>
                    <div class="text-muted small">第一步</div>
                    概述
                  </a>
                </li>
                <li>
                  <a href="#smartwizard-6-step-2" class="mb-3">
                    <span class="sw-done-icon ion ion-md-checkmark"></span>
                    <span class="sw-number">2</span>
                    <div class="text-muted small">第二步</div>
                    配置数据源
                  </a>
                </li>
                <li>
                  <a href="#smartwizard-6-step-3" class="mb-3">
                    <span class="sw-done-icon ion ion-md-checkmark"></span>
                    <span class="sw-number">3</span>
                    <div class="text-muted small">第三步</div>
                    配置查询&表单组件
                  </a>
                </li>
                <li>
                  <a href="#smartwizard-6-step-4" class="mb-3">
                    <span class="sw-done-icon ion ion-md-checkmark"></span>
                    <span class="sw-number">4</span>
                    <div class="text-muted small">第四步</div>
                    配置页面
                  </a>
                </li>
                <li>
                  <a href="#smartwizard-6-step-5" class="mb-3">
                    <span class="sw-done-icon ion ion-md-checkmark"></span>
                    <span class="sw-number">5</span>
                    <div class="text-muted small">第五步</div>
                    配置菜单
                  </a>
                </li>
              </ul>

              <div class="mb-3" style="min-height: 400px;">
                <div id="smartwizard-6-step-1" class="card animated fadeIn">
                  <table class="table_khc2_show_detail" id="tableDetail" border="0" cellpadding="0" cellspacing="0" width="3900" style="margin: 0px auto;max-width: 100%">
                      <tbody>
                      <tr>
                          <th style="width: 30%">----</th>
                          <td style="padding: 8px 1em;">
                          下面简单用房子比喻说明系统配置数据源的构建过程
                          </td>
                      </tr>
                      <tr>
                          <th style="width: 30%">1，配置数据源</th>
                          <td style="padding: 8px 1em;">
                          就像盖房子需要一个坚固的基础一样，创建数据源（建表）是整个系统的基础。</br>
                          这个步骤定义了数据的结构和存储方式，确保系统能够正确处理和存储数据。
                          </td>
                      </tr>
                      <tr>
                          <th style="width: 30%">2，配查询和表单</th>
                          <td style="padding: 8px 1em;">
                          配查询和表单就像是在基础上装修房间。你需要设计表单的布局和内容，以便用户能够方便地输入和查看数据。</br>
                          这个阶段包括字段的配置、验证规则的设定等，就像选择家具和装修风格一样，让房间变得舒适和实用。
                          </td>
                      </tr>
                      <tr>
                          <th style="width: 30%">3，配置页面</th>
                          <td style="padding: 8px 1em;">
                          一个页面可以配置多个组件（数据源），需要注意每个组件（数据源）只能绑定一个特定的查询和表单。
                          </td>
                      </tr>
                      <tr>
                          <th style="width: 30%">4，菜单关联页面</th>
                          <td style="padding: 8px 1em;">
                          最后，菜单关联页面就像是规划房子的布局和通道。你需要设置菜单和导航，以便用户能够轻松地在不同的页面和功能之间切换。</br>
                          这确保了整个系统的结构是逻辑清晰，就像合理规划房子的各个房间和走廊一样。
                          </td>
                      </tr>
                      </tbody>
                  </table>
                </div>
                <div id="smartwizard-6-step-2" class="card animated fadeIn">
                  <table class="table_khc2_show_detail" id="tableDetail" border="0" cellpadding="0" cellspacing="0" width="3900" style="margin: 0px auto;max-width: 100%">
                      <tbody>
                      <tr>
                          <th style="width: 30%">1，定义数据源</th>
                          <td style="padding: 8px 1em;">
                          数据源管理-新增数据源</br>
                          定义：数据源名称，数据源编码，表名等信息
                          </td>
                      </tr>
                      <tr>
                          <th style="width: 30%">2，定义业务字段</th>
                          <td style="padding: 8px 1em;">
                          数据源管理-表结构管理-新增业务字段</br>
                          系统会根据表名在数据库创建一张表，会在初始化时加默认系统字段</br>
                          在此基础上添加自己的业务字段即可</br>
                          定义：字段名，字段类型，字段长度等信息
                          </td>
                      </tr>
                      </tbody>
                  </table>
                </div>
                <div id="smartwizard-6-step-3" class="card animated fadeIn">
                  <table class="table_khc2_show_detail" id="tableDetail" border="0" cellpadding="0" cellspacing="0" width="3900" style="margin: 0px auto;max-width: 100%">
                      <tbody>
                      <tr>
                          <th style="width: 30%">1，定义查询组件</th>
                          <td style="padding: 8px 1em;">
                          数据源管理-新增查询组件</br>
                          定义：查询组件名称，查询组件编码</br>
                          控制查询策略，管理列等信息
                          </td>
                      </tr>
                      <tr>
                          <th style="width: 30%">2，查询组件-字段维护</th>
                          <td style="padding: 8px 1em;">
                          数据源管理-查询组件-字段维护</br>
                          控制查询模块，列表数据展示模块，如控制某个字段查询，控制列表显示哪些字段
                          </td>
                      </tr>
                      <tr>
                          <th style="width: 30%">3，定义表单组件</th>
                          <td style="padding: 8px 1em;">
                          数据源管理-新增表单组件</br>
                          定义：表单组件名称，表单组件编码</br>
                          控制表单按钮显示等信息
                          </td>
                      </tr>
                      <tr>
                          <th style="width: 30%">4，表单组件-字段维护</th>
                          <td style="padding: 8px 1em;">
                          数据源管理-表单组件-字段维护</br>
                          控制表单显示，如普通文本，下拉框，单选框等
                          </td>
                      </tr>
                      </tbody>
                  </table>
                </div>
                <div id="smartwizard-6-step-4" class="card animated fadeIn">
                  <table class="table_khc2_show_detail" id="tableDetail" border="0" cellpadding="0" cellspacing="0" width="3900" style="margin: 0px auto;max-width: 100%">
                      <tbody>
                      <tr>
                          <th style="width: 30%">描述</th>
                          <td style="padding: 8px 1em;">
                          当添加了一个数据源，也添加了查询和表单组件怎么组合搭配渲染就需要页面管理控制了</br>
                          由于一个数据源是可以新增很多个查询组件和表单组件</br>
                          配置时，一个数据源只能绑定一个查询组件和表单组件
                          </td>
                      </tr>
                      <tr>
                          <th style="width: 30%">1，定义页面</th>
                          <td style="padding: 8px 1em;">
                          页面管理</br>
                          定义：页面名称，页面编码
                          </td>
                      </tr>
                      <tr>
                          <th style="width: 30%">2，定义页面组件</th>
                          <td style="padding: 8px 1em;">
                          页面管理-组件管理</br>
                          绑定数据源，查询组件和表单组件</br>
                          然后就可以通过页面编码访问自己配置的页面了
                          </td>
                      </tr>
                      </tbody>
                  </table>
                </div>
                <div id="smartwizard-6-step-5" class="card animated fadeIn">
                  <table class="table_khc2_show_detail" id="tableDetail" border="0" cellpadding="0" cellspacing="0" width="3900" style="margin: 0px auto;max-width: 100%">
                      <tbody>
                      <tr>
                          <th style="width: 30%">描述</th>
                          <td style="padding: 8px 1em;">
                          当添加了一个页面后，只能通过页面编码访问，如果需要配置点击某个菜单时渲染的是自己配置的页面需要在菜单管理来配置
                          </td>
                      </tr>
                      <tr>
                          <th style="width: 30%">1，定义菜单</th>
                          <td style="padding: 8px 1em;">
                          菜单管理</br>
                          定义：菜单名称，绑定页面编码
                          </td>
                      </tr>
                      <tr>
                          <th style="width: 30%">2，设置角色</th>
                          <td style="padding: 8px 1em;">
                          菜单管理-绑定角色</br>
                          绑定成功后刷新页面就可以看到菜单，通过点击菜单就可以访问自己的页面
                          </td>
                      </tr>
                      </tbody>
                  </table>
                </div>
              </div>
            </form>
              </div></div></div>`
        document.getElementById(`${homeComponent.getParentPageDivId()}`).innerHTML=queryHtmlTemplate
        let $form = $('#smartwizard-6');

        // Initialize wizard
        $form
            .smartWizard({
                autoAdjustHeight: false,
                backButtonSupport: false,
                useURLhash: false,
                showStepURLhash: false,
                toolbarSettings: {
                    toolbarExtraButtons: []
                }
            })
            .on('leaveStep', function(e, anchorObject, stepNumber, stepDirection) {
                // stepDirection === 'forward' :- this condition allows to do the form validation
                // only on forward navigation, that makes easy navigation on backwards still do the validation when going next
                return true;
            })
            .on('showStep', function(e, anchorObject, stepNumber, stepDirection) {
                let $btn = $form.find('.btn-finish');

                // Enable finish button only on last step
                if (stepNumber === 3) {
                    $btn.removeClass('hidden');
                } else {
                    $btn.addClass('hidden');
                }
            });

        // Click on finish button
        $form.find('.btn-finish').on('click', function(){
            if (!$form.valid()){ return; }

            // Submit form
            alert("Great! We're ready to submit form.");
            return false;
        });

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

function loadScript(callback){
    let isLoadFormScriptMiniColor=fullMap.getObj('isLoadFormScript-cccc');
    if(util.isNull(isLoadFormScriptMiniColor)||isLoadFormScriptMiniColor=='N'){//是否启用取色器组件-minicolor
        util.loadCss('../css/vendor/libs/smartwizard/smartwizard.css')
        util.loadScript('../css/vendor/libs/smartwizard/smartwizard.js','text/javaScript',function (){
            loadScript(callback)
        })
        fullMap.push('isLoadFormScript-cccc','Y');
        return
    }
    callback()
}