"use strict";
import {util} from "../../util/util.js";
import {config} from "../../config.js";
import {fullMap} from "../../fullMap.js";

class menuSettingsConfig{

    static getMenuSettingsConfigJson(){
        if(!util.isNull(this.menuSettingsConfigJson)){
            return this.menuSettingsConfigJson;
        }
        this.menuSettingsConfigJson={}
        this.menuSettingsConfigJson.navbarFixed=util.getLocalStorageItem('themeSettingsFixedNavbar')
        this.menuSettingsConfigJson.sidenavFixed=util.getLocalStorageItem('themeSettingsFixedSidenav')
        this.menuSettingsConfigJson.navbarTheme=util.getLocalStorageItem('themeSettingsNavbarBg')
        this.menuSettingsConfigJson.sidenavTheme=util.getLocalStorageItem('themeSettingsSidenavBg')
        if(util.isNull(this.menuSettingsConfigJson.navbarFixed)||this.menuSettingsConfigJson.navbarFixed=='undefined'){
            this.menuSettingsConfigJson.navbarFixed=config.getConfigJson().navbarFixed;
        }
        if(util.isNull(this.menuSettingsConfigJson.sidenavFixed)||this.menuSettingsConfigJson.sidenavFixed=='undefined'){
            this.menuSettingsConfigJson.sidenavFixed=config.getConfigJson().sidenavFixed;
        }
        if(util.isNull(this.menuSettingsConfigJson.navbarTheme)||this.menuSettingsConfigJson.navbarTheme=='undefined'){
            this.menuSettingsConfigJson.navbarTheme=config.getConfigJson().navbarTheme;
        }
        if(util.isNull(this.menuSettingsConfigJson.sidenavTheme)||this.menuSettingsConfigJson.sidenavTheme=='undefined'){
            this.menuSettingsConfigJson.sidenavTheme=config.getConfigJson().sidenavTheme;
        }
        this.menuSettingsConfigJson.settingsTemplate=`<div id="theme-settings">
  <a href="javascript:void(0)" class="theme-settings-open-btn" tabindex="-1" id="theme-settings-open-btn"></a>
  <h5 style="font-size: 20px" class="p-3 m-0 line-height-1 font-weight-bolder bg-light theme-settings-header"> 设置 
  <a href="javascript:void(0)" class="theme-settings-close-btn font-weight-light px-4 py-2 text-dark" tabindex="-1" id="theme-settings-close-btn">×</a>
  </h5>
  <div class="theme-settings-inner" style="overflow: auto;">
    <div class="theme-settings-layout">
      <hr class="m-0 border-light">
      <h5 class="m-0 px-4 py-3 line-height-1 text-light d-block"> 布局 </h5>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body">固定菜单栏</div>
        <div class="switcher switcher-sm d-block m-0">
          <input class="switcher-input" type="checkbox" id="themeSettingsFixedSidenav" checked="checked">
          <span class="switcher-indicator">
            <span class="switcher-yes"></span>
            <span class="switcher-no"></span>
          </span>
        </div>
      </label>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutNavbarFixed">
        <div class="media-body">固定导航栏</div>
        <div class="switcher switcher-sm d-block m-0">
          <input class="switcher-input" type="checkbox" id="themeSettingsFixedNavbar" checked="checked">
          <span class="switcher-indicator">
            <span class="switcher-yes"></span>
            <span class="switcher-no"></span>
          </span>
        </div>
      </label>
    </div>
    <div class="theme-settings-navbarBg">
      <hr class="m-0 border-light">
      <h5 class="m-0 px-4 py-3 line-height-1 text-light d-block"> 导航栏背景 </h5>
      <fieldset class="m-0 px-4 pb-3 d-block clearfix theme-settings-navbarBg-inner">
        <label class="theme-settings-bg-item bg-navbar-theme">
          <input type="radio" name="theme-settings-navbarBg-input" value="navbar-theme">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-primary">
          <input type="radio" name="theme-settings-navbarBg-input" value="primary">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-primary-dark">
          <input type="radio" name="theme-settings-navbarBg-input" value="primary-dark navbar-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-primary-darker">
          <input type="radio" name="theme-settings-navbarBg-input" value="primary-darker navbar-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-secondary">
          <input type="radio" name="theme-settings-navbarBg-input" value="secondary">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-secondary-dark">
          <input type="radio" name="theme-settings-navbarBg-input" value="secondary-dark navbar-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-secondary-darker">
          <input type="radio" name="theme-settings-navbarBg-input" value="secondary-darker navbar-dark" checked="checked">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-success">
          <input type="radio" name="theme-settings-navbarBg-input" value="success">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-success-dark">
          <input type="radio" name="theme-settings-navbarBg-input" value="success-dark navbar-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-success-darker">
          <input type="radio" name="theme-settings-navbarBg-input" value="success-darker navbar-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-info">
          <input type="radio" name="theme-settings-navbarBg-input" value="info">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-info-dark">
          <input type="radio" name="theme-settings-navbarBg-input" value="info-dark navbar-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-info-darker">
          <input type="radio" name="theme-settings-navbarBg-input" value="info-darker navbar-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-warning">
          <input type="radio" name="theme-settings-navbarBg-input" value="warning">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-warning-dark">
          <input type="radio" name="theme-settings-navbarBg-input" value="warning-dark navbar-light">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-warning-darker">
          <input type="radio" name="theme-settings-navbarBg-input" value="warning-darker navbar-light">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-danger">
          <input type="radio" name="theme-settings-navbarBg-input" value="danger">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-danger-dark">
          <input type="radio" name="theme-settings-navbarBg-input" value="danger-dark navbar-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-danger-darker">
          <input type="radio" name="theme-settings-navbarBg-input" value="danger-darker navbar-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-dark">
          <input type="radio" name="theme-settings-navbarBg-input" value="dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-white">
          <input type="radio" name="theme-settings-navbarBg-input" value="white">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-light">
          <input type="radio" name="theme-settings-navbarBg-input" value="light">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-lighter">
          <input type="radio" name="theme-settings-navbarBg-input" value="lighter">
          <span class="theme-settings-bg-name"></span>
        </label>
      </fieldset>
    </div>
    <div class="theme-settings-sidenavBg">
      <hr class="m-0 border-light">
      <h5 class="m-0 px-4 py-3 line-height-1 text-light d-block"> 菜单栏背景 </h5>
      <fieldset class="m-0 px-4 pb-3 d-block clearfix theme-settings-sidenavBg-inner">
        <label class="theme-settings-bg-item bg-sidenav-theme">
          <input type="radio" name="theme-settings-sidenavBg-input" value="sidenav-theme">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-primary">
          <input type="radio" name="theme-settings-sidenavBg-input" value="primary">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-primary-dark">
          <input type="radio" name="theme-settings-sidenavBg-input" value="primary-dark sidenav-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-primary-darker">
          <input type="radio" name="theme-settings-sidenavBg-input" value="primary-darker sidenav-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-secondary">
          <input type="radio" name="theme-settings-sidenavBg-input" value="secondary">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-secondary-dark">
          <input type="radio" name="theme-settings-sidenavBg-input" value="secondary-dark sidenav-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-secondary-darker">
          <input type="radio" name="theme-settings-sidenavBg-input" value="secondary-darker sidenav-dark" checked="checked">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-success">
          <input type="radio" name="theme-settings-sidenavBg-input" value="success">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-success-dark">
          <input type="radio" name="theme-settings-sidenavBg-input" value="success-dark sidenav-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-success-darker">
          <input type="radio" name="theme-settings-sidenavBg-input" value="success-darker sidenav-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-info">
          <input type="radio" name="theme-settings-sidenavBg-input" value="info">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-info-dark">
          <input type="radio" name="theme-settings-sidenavBg-input" value="info-dark sidenav-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-info-darker">
          <input type="radio" name="theme-settings-sidenavBg-input" value="info-darker sidenav-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-warning">
          <input type="radio" name="theme-settings-sidenavBg-input" value="warning">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-warning-dark">
          <input type="radio" name="theme-settings-sidenavBg-input" value="warning-dark sidenav-light">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-warning-darker">
          <input type="radio" name="theme-settings-sidenavBg-input" value="warning-darker sidenav-light">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-danger">
          <input type="radio" name="theme-settings-sidenavBg-input" value="danger">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-danger-dark">
          <input type="radio" name="theme-settings-sidenavBg-input" value="danger-dark sidenav-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-danger-darker">
          <input type="radio" name="theme-settings-sidenavBg-input" value="danger-darker sidenav-dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-dark">
          <input type="radio" name="theme-settings-sidenavBg-input" value="dark">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-white">
          <input type="radio" name="theme-settings-sidenavBg-input" value="white">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-light">
          <input type="radio" name="theme-settings-sidenavBg-input" value="light">
          <span class="theme-settings-bg-name"></span>
        </label>
        <label class="theme-settings-bg-item bg-lighter">
          <input type="radio" name="theme-settings-sidenavBg-input" value="lighter">
          <span class="theme-settings-bg-name"></span>
        </label>
      </fieldset>
    </div>
    <!--<div class="theme-settings-themes">
      <hr class="m-0 border-light">
      <h5 class="m-0 px-4 py-3 line-height-1 text-light d-block"> 主题 </h5>
      <div class="theme-settings-themes-inner">
        <label class="theme-settings-theme-item custom-controls-stacked">
          <input type="radio" name="theme-settings-current-theme" value="theme-air">
          <span class="d-block mr-auto">
            <span class="theme-settings-theme-checkmark"></span> &nbsp;&nbsp; <span class="theme-settings-theme-name">Air</span>
          </span>
          <span class="theme-settings-theme-colors d-flex">
            <span style="background: #3c97fe"></span>
            <span style="background: #f8f8f8"></span>
            <span style="background: #f8f8f8"></span>
          </span>
        </label>
        <label class="theme-settings-theme-item custom-controls-stacked">
          <input type="radio" name="theme-settings-current-theme" value="theme-corporate" checked="checked">
          <span class="d-block mr-auto">
            <span class="theme-settings-theme-checkmark"></span> &nbsp;&nbsp; <span class="theme-settings-theme-name">Corporate</span>
          </span>
          <span class="theme-settings-theme-colors d-flex">
            <span style="background: #26B4FF"></span>
            <span style="background: #fff"></span>
            <span style="background: #2e323a"></span>
          </span>
        </label>
        <label class="theme-settings-theme-item custom-controls-stacked">
          <input type="radio" name="theme-settings-current-theme" value="theme-cotton">
          <span class="d-block mr-auto">
            <span class="theme-settings-theme-checkmark"></span> &nbsp;&nbsp; <span class="theme-settings-theme-name">Сotton</span>
          </span>
          <span class="theme-settings-theme-colors d-flex">
            <span style="background: #e84c64"></span>
            <span style="background: #ffffff"></span>
            <span style="background: #ffffff"></span>
          </span>
        </label>
        <label class="theme-settings-theme-item custom-controls-stacked">
          <input type="radio" name="theme-settings-current-theme" value="theme-gradient">
          <span class="d-block mr-auto">
            <span class="theme-settings-theme-checkmark"></span> &nbsp;&nbsp; <span class="theme-settings-theme-name">Gradient</span>
          </span>
          <span class="theme-settings-theme-colors d-flex">
            <span style="background: #775cdc"></span>
            <span style="background: #ffffff"></span>
            <span style="background: linear-gradient(to top, #4e54c8, #8c55e4)"></span>
          </span>
        </label>
        <label class="theme-settings-theme-item custom-controls-stacked">
          <input type="radio" name="theme-settings-current-theme" value="theme-paper">
          <span class="d-block mr-auto">
            <span class="theme-settings-theme-checkmark"></span> &nbsp;&nbsp; <span class="theme-settings-theme-name">Paper</span>
          </span>
          <span class="theme-settings-theme-colors d-flex">
            <span style="background: #17b3a3"></span>
            <span style="background: #ffffff"></span>
            <span style="background: #ffffff"></span>
          </span>
        </label>
        <label class="theme-settings-theme-item custom-controls-stacked">
          <input type="radio" name="theme-settings-current-theme" value="theme-shadow">
          <span class="d-block mr-auto">
            <span class="theme-settings-theme-checkmark"></span> &nbsp;&nbsp; <span class="theme-settings-theme-name">Shadow</span>
          </span>
          <span class="theme-settings-theme-colors d-flex">
            <span style="background: #7b83ff"></span>
            <span style="background: #f8f8f8"></span>
            <span style="background: #ececf9"></span>
          </span>
        </label>
        <label class="theme-settings-theme-item custom-controls-stacked">
          <input type="radio" name="theme-settings-current-theme" value="theme-soft">
          <span class="d-block mr-auto">
            <span class="theme-settings-theme-checkmark"></span> &nbsp;&nbsp; <span class="theme-settings-theme-name">Soft</span>
          </span>
          <span class="theme-settings-theme-colors d-flex">
            <span style="background: #1cbb84"></span>
            <span style="background: #39517b"></span>
            <span style="background: #ffffff"></span>
          </span>
        </label>
        <label class="theme-settings-theme-item custom-controls-stacked">
          <input type="radio" name="theme-settings-current-theme" value="theme-sunrise">
          <span class="d-block mr-auto">
            <span class="theme-settings-theme-checkmark"></span> &nbsp;&nbsp; <span class="theme-settings-theme-name">Sunrise</span>
          </span>
          <span class="theme-settings-theme-colors d-flex">
            <span style="background: #fc5a5c"></span>
            <span style="background: #222222"></span>
            <span style="background: #ffffff"></span>
          </span>
        </label>
        <label class="theme-settings-theme-item custom-controls-stacked">
          <input type="radio" name="theme-settings-current-theme" value="theme-twitlight">
          <span class="d-block mr-auto">
            <span class="theme-settings-theme-checkmark"></span> &nbsp;&nbsp; <span class="theme-settings-theme-name">Twitlight</span>
          </span>
          <span class="theme-settings-theme-colors d-flex">
            <span style="background: #4c84ff"></span>
            <span style="background: #343c44"></span>
            <span style="background: #3f4853"></span>
          </span>
        </label>
        <label class="theme-settings-theme-item custom-controls-stacked">
          <input type="radio" name="theme-settings-current-theme" value="theme-vibrant">
          <span class="d-block mr-auto">
            <span class="theme-settings-theme-checkmark"></span> &nbsp;&nbsp; <span class="theme-settings-theme-name">Vibrant</span>
          </span>
          <span class="theme-settings-theme-colors d-flex">
            <span style="background: #fc5a5c"></span>
            <span style="background: #f8f8f8"></span>
            <span style="background: #222222"></span>
          </span>
        </label>
      </div>
    </div>-->
    <div class="theme-settings-status">
      <hr class="m-0 border-light">
      <h5 class="m-0 px-4 py-3 line-height-1 text-light d-block"> 状态主题色 </h5>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body" style="line-height: 25px;">主要</div>
        <div><input type="text" id="themSettingsStatusPrimary"style="width: 160px" class="form-control form-control-sm minicolors-input" value="#4c84ff" size="7"></div>
      </label>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body" style="line-height: 25px;">次要</div>
        <div><input type="text" id="themSettingsStatusSecondary"style="width: 160px" class="form-control form-control-sm minicolors-input" value="#8897AA" size="7"></div>
      </label>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body" style="line-height: 25px;">成功</div>
        <div><input type="text" id="themSettingsStatusSuccess"style="width: 160px" class="form-control form-control-sm minicolors-input" value="#02BC77" size="7"></div>
      </label>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body" style="line-height: 25px;">警告</div>
        <div><input type="text" id="themSettingsStatusWarning"style="width: 160px" class="form-control form-control-sm minicolors-input" value="#F59A23" size="7"></div>
      </label>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body" style="line-height: 25px;">信息</div>
        <div><input type="text" id="themSettingsStatusInfo"style="width: 160px" class="form-control form-control-sm minicolors-input" value="#28c3d7" size="7"></div>
      </label>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body" style="line-height: 25px;">危险</div>
        <div><input type="text" id="themSettingsStatusDanger"style="width: 160px" class="form-control form-control-sm minicolors-input" value="#d9534f" size="7"></div>
      </label>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body" style="line-height: 25px;">黑暗</div>
        <div><input type="text" id="themSettingsStatusDark"style="width: 160px" class="form-control form-control-sm minicolors-input" value="#2f3237" size="7"></div>
      </label>
    </div>
    <div class="theme-settings-table">
      <hr class="m-0 border-light">
      <h5 class="m-0 px-4 py-3 line-height-1 text-light d-block"> 表格主题色 </h5>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body" style="line-height: 25px;">表头颜色</div>
        <div><input type="text" id="themSettingsTableTh"style="width: 160px" class="form-control form-control-sm minicolors-input" value="#cccccc" size="7"></div>
      </label>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body" style="line-height: 25px;">偶数移出</div>
        <div><input type="text" id="tableTDMouseoutEvenBackgroundColor"style="width: 160px" class="form-control form-control-sm minicolors-input" value="#eaeaea" size="7"></div>
      </label>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body" style="line-height: 25px;">奇数移出</div>
        <div><input type="text" id="tableTDMouseoutOddBackgroundColor"style="width: 160px" class="form-control form-control-sm minicolors-input" value="#fafafa" size="7"></div>
      </label>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body" style="line-height: 25px;">鼠标移入</div>
        <div><input type="text" id="themSettingsTableTdMouseover"style="width: 160px" class="form-control form-control-sm minicolors-input" value="#a0c5e8" size="7"></div>
      </label>
    </div>
    <div class="theme-settings-table">
      <hr class="m-0 border-light">
      <h5 class="m-0 px-4 py-3 line-height-1 text-light d-block"> 系统配置 </h5>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body" style="line-height: 25px;">系统全称</div>
        <div><input type="text" id="systemFullName" style="width: 160px" class="form-control form-control-sm" value="${config.getConfigJson().systemFullName}" size="7"></div>
      </label>
      <label class="m-0 px-4 pb-3 d-flex media align-items-middle theme-settings-layoutPosition">
        <div class="media-body" style="line-height: 25px;">系统简称</div>
        <div><input type="text" id="systemShortName" style="width: 160px" class="form-control form-control-sm" value="${config.getConfigJson().systemShortName}" size="7"></div>
      </label>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
  </div>
</div>`
        //用到minicolors组件，需要提前加载
        /*util.loadCss('../css/vendor/libs/minicolors/minicolors.css')
        util.loadScript('../css/vendor/libs/minicolors/minicolors.js','text/javaScript',function (){})
        fullMap.push('isLoadFormScript-minicolor','Y');*/
        return this.menuSettingsConfigJson;
    }
    static initFunc(){
        let that=this;
        that.initThemeMiniColorFunc();
        let isEditComponent=util.getSessionStorageItem('isEditComponent');
        let pageCode=config.getPageCode();
        if(!(pageCode=='page_component')&&(isEditComponent=='S'||isEditComponent=='P'||config.getConfigJson().defaultMenuSettings=='true')){
            document.getElementById('theme-settings-open-btn').addEventListener('click',function (){
                document.getElementById('theme-settings').classList.add("theme-settings-open");
            })
            document.getElementById('theme-settings-close-btn').addEventListener('click',function (){
                document.getElementById('theme-settings').classList.remove("theme-settings-open");
            })
            let navbarEleObj=document.getElementsByName('theme-settings-navbarBg-input');
            let themeSettingsNavbarBg=that.menuSettingsConfigJson.navbarTheme
            for (let i = 0; i < navbarEleObj.length; i++) {
                if (navbarEleObj[i].value === themeSettingsNavbarBg) {
                    navbarEleObj[i].closest('label').classList.add('active');
                }
                util.addEventListener(navbarEleObj[i],'click',function (){
                    let thisValue=this.value;
                    let removeClassStr='bg-'+that.menuSettingsConfigJson.navbarTheme
                    const element = document.getElementById('layout-navbar');
                    let elementClass = element.getAttribute('class');
                    const removeClasses = removeClassStr.split(' ');
                    let classArray = elementClass.split(' ');
                    classArray = classArray.filter(cls => !removeClasses.includes(cls));
                    elementClass = classArray.join(' ');
                    elementClass+=' bg-'+thisValue
                    element.setAttribute('class', elementClass);
                    util.setLocalStorageItem('themeSettingsNavbarBg',thisValue)
                    that.menuSettingsConfigJson.navbarTheme=thisValue;
                    const inputs = document.querySelectorAll('input[type=radio][name=theme-settings-navbarBg-input]');
                    // 遍历每个 <input> 元素
                    inputs.forEach(input => {
                        // 获取 <input> 的父元素 <label>
                        const parentLabel = input.closest('label');

                        // 如果 <label> 元素有 active 类，移除它
                        if (parentLabel && parentLabel.classList.contains('active')) {
                            parentLabel.classList.remove('active');
                        }
                        if (input.value === thisValue) {
                            parentLabel.classList.add('active');
                        }
                    });
                })
            }
            let sidenavEleObj=document.getElementsByName('theme-settings-sidenavBg-input');
            let themeSettingsSidenavBg=that.menuSettingsConfigJson.sidenavTheme
            for (let i = 0; i < sidenavEleObj.length; i++) {
                if (sidenavEleObj[i].value === themeSettingsSidenavBg) {
                    sidenavEleObj[i].closest('label').classList.add('active');
                }
                util.addEventListener(sidenavEleObj[i],'click',function (){
                    let thisValue=this.value;
                    let removeClassStr='bg-'+that.menuSettingsConfigJson.sidenavTheme
                    const element = document.getElementById('showMenuLayout');
                    let elementClass = element.getAttribute('class');
                    const removeClasses = removeClassStr.split(' ');
                    let classArray = elementClass.split(' ');
                    classArray = classArray.filter(cls => !removeClasses.includes(cls));
                    elementClass = classArray.join(' ');
                    elementClass+=' bg-'+thisValue
                    element.setAttribute('class', elementClass);
                    util.setLocalStorageItem('themeSettingsSidenavBg',thisValue)
                    that.menuSettingsConfigJson.sidenavTheme=thisValue;
                    const inputs = document.querySelectorAll('input[type=radio][name=theme-settings-sidenavBg-input]');
                    // 遍历每个 <input> 元素
                    inputs.forEach(input => {
                        // 获取 <input> 的父元素 <label>
                        const parentLabel = input.closest('label');

                        // 如果 <label> 元素有 active 类，移除它
                        if (parentLabel && parentLabel.classList.contains('active')) {
                            parentLabel.classList.remove('active');
                        }
                        if (input.value === thisValue) {
                            parentLabel.classList.add('active');
                        }
                    });
                })
            }
            if(this.menuSettingsConfigJson.sidenavFixed=='true'){
                document.getElementById('themeSettingsFixedSidenav').checked=true
            }else{
                document.getElementById('themeSettingsFixedSidenav').checked=false
            }
            document.getElementById('themeSettingsFixedSidenav').addEventListener('click',function (){
                if (this.checked == true) {
                    util.setLocalStorageItem('themeSettingsFixedSidenav','true')
                    document.querySelector('html').classList.add('layout-fixed');
                }else{
                    util.setLocalStorageItem('themeSettingsFixedSidenav','false')
                    document.querySelector('html').classList.remove('layout-fixed');
                }
            })
            if(this.menuSettingsConfigJson.navbarFixed=='true'){
                document.getElementById('themeSettingsFixedNavbar').checked=true
            }else{
                document.getElementById('themeSettingsFixedNavbar').checked=false
            }
            document.getElementById('themeSettingsFixedNavbar').addEventListener('click',function (){
                if (this.checked == true) {
                    util.setLocalStorageItem('themeSettingsFixedNavbar','true')
                    document.querySelector('html').classList.add('layout-navbar-fixed');
                }else{
                    util.setLocalStorageItem('themeSettingsFixedNavbar','false')
                    document.querySelector('html').classList.remove('layout-navbar-fixed');
                }
            })

            let isRtl = $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl';
            $('#themSettingsStatusPrimary').minicolors({
                control:  'hue',
                position: 'bottom ' + (isRtl ? 'right' : 'left'),
                change:function (){
                    const root = document.documentElement;
                    let fontColor=util.dynamicColor(this.value);
                    root.style.setProperty('--primary-b-color', this.value);
                    root.style.setProperty('--primary-f-color', fontColor);
                }
            });
            $('#themSettingsStatusSecondary').minicolors({
                control:  'hue',
                position: 'bottom ' + (isRtl ? 'right' : 'left'),
                change:function (){
                    const root = document.documentElement;
                    let fontColor=util.dynamicColor(this.value);
                    root.style.setProperty('--secondary-b-color', this.value);
                    root.style.setProperty('--secondary-f-color', fontColor);
                }
            });
            $('#themSettingsStatusSuccess').minicolors({
                control:  'hue',
                position: 'bottom ' + (isRtl ? 'right' : 'left'),
                change:function (){
                    const root = document.documentElement;
                    let fontColor=util.dynamicColor(this.value);
                    root.style.setProperty('--success-b-color', this.value);
                    root.style.setProperty('--success-f-color', fontColor);
                }
            });
            $('#themSettingsStatusWarning').minicolors({
                control:  'hue',
                position: 'bottom ' + (isRtl ? 'right' : 'left'),
                change:function (){
                    const root = document.documentElement;
                    let fontColor=util.dynamicColor(this.value);
                    root.style.setProperty('--warning-b-color', this.value);
                    root.style.setProperty('--warning-f-color', fontColor);
                }
            });
            $('#themSettingsStatusInfo').minicolors({
                control:  'hue',
                position: 'bottom ' + (isRtl ? 'right' : 'left'),
                change:function (){
                    const root = document.documentElement;
                    let fontColor=util.dynamicColor(this.value);
                    root.style.setProperty('--info-b-color', this.value);
                    root.style.setProperty('--info-f-color', fontColor);
                }
            });
            $('#themSettingsStatusDanger').minicolors({
                control:  'hue',
                position: 'bottom ' + (isRtl ? 'right' : 'left'),
                change:function (){
                    const root = document.documentElement;
                    let fontColor=util.dynamicColor(this.value);
                    root.style.setProperty('--danger-b-color', this.value);
                    root.style.setProperty('--danger-f-color', fontColor);
                }
            });
            $('#themSettingsStatusDark').minicolors({
                control:  'hue',
                position: 'bottom ' + (isRtl ? 'right' : 'left'),
                change:function (){
                    const root = document.documentElement;
                    let fontColor=util.dynamicColor(this.value);
                    root.style.setProperty('--dark-b-color', this.value);
                    root.style.setProperty('--dark-f-color', fontColor);
                }
            });
            $('#themSettingsTableTh').minicolors({
                control:  'hue',
                position: 'bottom ' + (isRtl ? 'right' : 'left'),
                change:function (){
                    const root = document.documentElement;
                    root.style.setProperty('--table-th-b-color', this.value);
                    let fontColor=util.dynamicColor(this.value);
                    root.style.setProperty('--table-th-f-color', fontColor);
                }
            });
            $('#tableTDMouseoutEvenBackgroundColor').minicolors({
                control:  'hue',
                position: 'bottom ' + (isRtl ? 'right' : 'left'),
                change:function (){
                    const root = document.documentElement;
                    root.style.setProperty('--table-td-mouseout-even-b-color', this.value);
                    let fontColor=util.dynamicColor(this.value);
                    root.style.setProperty('--table-td-mouseout-even-f-color', fontColor);
                }
            });
            $('#tableTDMouseoutOddBackgroundColor').minicolors({
                control:  'hue',
                position: 'bottom ' + (isRtl ? 'right' : 'left'),
                change:function (){
                    const root = document.documentElement;
                    root.style.setProperty('--table-td-mouseout-odd-b-color', this.value);
                    let fontColor=util.dynamicColor(this.value);
                    root.style.setProperty('--table-td-mouseout-odd-f-color', fontColor);
                }
            });
            $('#themSettingsTableTdMouseover').minicolors({
                control:  'hue',
                position: 'bottom ' + (isRtl ? 'right' : 'left'),
                change:function (){
                    const root = document.documentElement;
                    root.style.setProperty('--table-td-mouseover-b-color', this.value);
                    let fontColor=util.dynamicColor(this.value);
                    root.style.setProperty('--table-td-mouseover-f-color', fontColor);
                }
            });
            document.getElementById('systemFullName').addEventListener('input',function (){
                document.querySelector('title').innerText=this.value;//set 系统名称
            })
            document.getElementById('systemShortName').addEventListener('input',function (){
                document.getElementById('systemNameA').innerHTML=this.value;//set 系统名称(简称)
                document.getElementById('systemNameSpan').innerHTML=this.value;//set 系统名称(简称)
            })
        }
    }
    static initThemeMiniColorFunc(){
        const root = document.documentElement;
        //状态主题色
        let fontColor=util.dynamicColor(config.getConfigJson().defaultColorJson['蓝色']);
        root.style.setProperty('--primary-b-color', config.getConfigJson().defaultColorJson['蓝色']);
        root.style.setProperty('--primary-f-color', fontColor);
        fontColor=util.dynamicColor(config.getConfigJson().defaultColorJson['灰色']);
        root.style.setProperty('--secondary-b-color', config.getConfigJson().defaultColorJson['灰色']);
        root.style.setProperty('--secondary-f-color', fontColor);
        fontColor=util.dynamicColor(config.getConfigJson().defaultColorJson['绿色']);
        root.style.setProperty('--success-b-color', config.getConfigJson().defaultColorJson['绿色']);
        root.style.setProperty('--success-f-color', fontColor);
        fontColor=util.dynamicColor(config.getConfigJson().defaultColorJson['黄色']);
        root.style.setProperty('--warning-b-color', config.getConfigJson().defaultColorJson['黄色']);
        root.style.setProperty('--warning-f-color', fontColor);
        fontColor=util.dynamicColor(config.getConfigJson().defaultColorJson['浅蓝']);
        root.style.setProperty('--info-b-color', config.getConfigJson().defaultColorJson['浅蓝']);
        root.style.setProperty('--info-f-color', fontColor);
        fontColor=util.dynamicColor(config.getConfigJson().defaultColorJson['红色']);
        root.style.setProperty('--danger-b-color', config.getConfigJson().defaultColorJson['红色']);
        root.style.setProperty('--danger-f-color', fontColor);
        fontColor=util.dynamicColor(config.getConfigJson().defaultColorJson['黑色']);
        root.style.setProperty('--dark-b-color', config.getConfigJson().defaultColorJson['黑色']);
        root.style.setProperty('--dark-f-color', fontColor);

        //表格主题色
        fontColor=util.dynamicColor(config.getConfigJson().defaultTableColorJson.tableThBackgroundColor);
        root.style.setProperty('--table-th-b-color', config.getConfigJson().defaultTableColorJson.tableThBackgroundColor);
        root.style.setProperty('--table-th-f-color', fontColor);
        fontColor=util.dynamicColor(config.getConfigJson().defaultTableColorJson.tableTdMouseoverBackgroundColor);
        root.style.setProperty('--table-td-mouseover-b-color', config.getConfigJson().defaultTableColorJson.tableTdMouseoverBackgroundColor);
        root.style.setProperty('--table-td-mouseover-f-color', fontColor);
        fontColor=util.dynamicColor(config.getConfigJson().defaultTableColorJson.tableTDMouseoutEvenBackgroundColor);
        root.style.setProperty('--table-td-mouseout-even-b-color', config.getConfigJson().defaultTableColorJson.tableTDMouseoutEvenBackgroundColor);
        root.style.setProperty('--table-td-mouseout-even-f-color', fontColor);
        fontColor=util.dynamicColor(config.getConfigJson().defaultTableColorJson.tableTDMouseoutOddBackgroundColor);
        root.style.setProperty('--table-td-mouseout-odd-b-color', config.getConfigJson().defaultTableColorJson.tableTDMouseoutOddBackgroundColor);
        root.style.setProperty('--table-td-mouseout-odd-f-color', fontColor);
    }

}
export {menuSettingsConfig};