<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
    <style>
        .layui-form-item {margin-bottom: 0px;}
        .base-form-item-title {width: 70px; color: #666!important;}
        .photo-show .photo-show-wrap{margin-right:10px;}
        .photo-show .photo-show-wrap .photo-wrap{display:inline-block;background-color:white;padding:5px;margin-bottom:5px;position:relative;box-shadow: 1px 1px 5px #c2c2c2;}
        .photo-show .photo-show-wrap .photo-wrap img{height:100px;}
        .photo-show .photo-show-wrap .photo-wrap a{position:absolute;top:0px;right:0px;border-color:#CCC;}
    </style>
</head>
<body>
<div class="layui-fluid layui-anim layui-anim-fadein">
    <form class="layui-form" lay-filter="dataForm">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                    <a href="javascript:void(0);"><cite>基础属性</cite></a>
                </span>
            </div>
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item" style="margin: 4px 0;">
                    <div class="layui-form-mid layui-word-aux　base-form-item-title">系统主标题</div>
                    <div class="layui-input-inline" style="width: 600px;">
                        <input type="text" name="systemTitle" placeholder="请输入系统主标题" class="layui-input">
                        <div class="layui-form-mid layui-word-aux">登录页面中登录表单上的主标题，如果为空，以配置文件为主</div>
                    </div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="number" name="systemTitleSize" placeholder="字体大小" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="margin: 4px 0;">
                    <div class="layui-form-mid layui-word-aux base-form-item-title">系统副标题</div>
                    <div class="layui-input-inline" style="width: 600px;">
                        <input type="text" name="systemSubTitle" placeholder="请输入系统副标题" class="layui-input">
                        <div class="layui-form-mid layui-word-aux">登录表单上的副标题，在没有设置时，为空时，以配置文件为主，设置过之后，为空时，表单中不显示</div>
                    </div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="number" name="systemSubTitleSize" placeholder="字体大小" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="margin: 4px 0;">
                    <div class="layui-form-mid layui-word-aux base-form-item-title">系统短标题</div>
                    <div class="layui-input-inline" style="width: 600px;">
                        <input type="text" name="systemShortTitle" placeholder="请输入系统短" class="layui-input">
                        <div class="layui-form-mid layui-word-aux">登录后菜单上方显示，如果为空时显示主标题或配置文件中系统标题，当没有设置短LOGO时，最多显示11个汉字或19个大写字母或23个小写字母；当设置短LOGO时，最多显示9个汉字或13个大写字母或17个小写字母</div>
                    </div>
                </div>
                <div class="layui-form-item" style="margin: 4px 0;">
                    <div class="layui-form-mid layui-word-aux base-form-item-title">版权年份</div>
                    <div class="layui-input-inline" style="width: 600px;">
                        <input type="text" name="copyRightYear" placeholder="请输入版权年份，2019-..." class="layui-input">
                        <div class="layui-form-mid layui-word-aux">如果需要，可进行设置，如：2019-2021</div>
                    </div>
                </div>
                <div class="layui-form-item" style="margin: 4px 0;">
                    <div class="layui-form-mid layui-word-aux base-form-item-title">版权所有</div>
                    <div class="layui-input-inline" style="width: 600px;">
                        <input type="text" name="copyleft" placeholder="请输入版权所属" class="layui-input">
                        <div class="layui-form-mid layui-word-aux">如果需要，可进行设置，如：XXXX公司...</div>
                    </div>
                </div>
                <div class="layui-form-item" style="margin: 4px 0;">
                    <div class="layui-form-mid layui-word-aux base-form-item-title">官方地址</div>
                    <div class="layui-input-inline" style="width: 600px;">
                        <input type="text" name="officialUrl" placeholder="请输入官方地址" class="layui-input">
                        <div class="layui-form-mid layui-word-aux">如果需要，可进行设置，如：http://....</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                    <a href="javascript:void(0);"><cite>系统 LOGO（登录界面）</cite></a>
                </span>
            </div>
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                    <div id="logoShow" class="col-lg-12 photo-show"></div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                    <a href="javascript:void(0);"><cite>系统短 LOGO（登录系统后菜单上方）</cite></a>
                </span>
            </div>
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                    <div id="shortLogoShow" class="col-lg-12 photo-show"></div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                    <a href="javascript:void(0);"><cite>登录背景图片</cite></a>
                </span>
            </div>
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                    <div id="photoShow" class="col-lg-12 photo-show"></div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                    <a href="javascript:void(0);"><cite>密码有效期</cite></a>
                </span>
            </div>
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                    <div>
                        <input type="radio" name="passwordValidity" value="none" title="永不过期" checked>
                    </div>
                    <div>
                        <span style="float: left;">
                            <input type="radio" name="passwordValidity" value="custom" title="自定义">
                        </span>
                        <div class="layui-input-inline">
                            <input type="number" name="passwordValidityDays" lay-verify="required" placeholder="天数" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">天</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                    <a href="javascript:void(0);"><cite>用户首次登录修改密码（该功能需设置密码有效期）</cite></a>
                </span>
            </div>
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                    <div>
                        <input type="radio" name="firstLoginChangePassword" value="close" title="关闭" checked>
                    </div>
                    <div>
                        <input type="radio" name="firstLoginChangePassword" value="open" title="开通">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                    <a href="javascript:void(0);"><cite>向用户发出其密码将过期的通知前的天数</cite></a>
                </span>
            </div>
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="number" name="changePasswordNoticeDays" lay-verify="required" placeholder="天数" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux"> 天</div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                    <a href="javascript:void(0);"><cite>用户密码强度</cite></a>
                </span>
            </div>
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                    <div>
                        <input type="radio" name="passwordStrength" value="weak" title="弱　密码6到16位，仅包含数字，字母，特殊字符，其中的一种" checked>
                    </div>
                    <div>
                        <input type="radio" name="passwordStrength" value="middle" title="中　密码6到16位，包含数字、字母、特殊字符，其中的任意两种">
                    </div>
                    <div>
                        <input type="radio" name="passwordStrength" value="strong" title="强　密码6到16位，必须全部包含数字、字母、特殊字符三种">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card" th:if="${appLogin eq 'appLogin'}">
            <div class="layui-card-header">
                <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                    <a href="javascript:void(0);"><cite>APP允许绑定设备数量（0为不限制）</cite></a>
                </span>
            </div>
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="number" name="appDeviceCount" lay-verify="required|positiveNumber" placeholder="APP数量" class="layui-input" value="0">
                    </div>
                    <div class="layui-form-mid layui-word-aux"> 台</div>
                </div>
            </div>
        </div>
        <input type="hidden" name="appDeviceCount" value="0" th:if="${appLogin ne 'appLogin'}">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                    <a href="javascript:void(0);"><cite>其他设置</cite></a>
                </span>
            </div>
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item" style="margin: 4px 0;">
                    <div class="layui-form-mid layui-word-aux">登录框位置</div>
                    <div class="layui-input-inline" style="width: 400px;">
                        <input type="radio" name="loginBoxPosition" value="left" title="局左">
                        <input type="radio" name="loginBoxPosition" value="center" title="居中">
                        <input type="radio" name="loginBoxPosition" value="default" title="默认（居右）" checked>
                    </div>
                </div>
                <div class="layui-form-item" style="margin: 4px 0;">
                    <div class="layui-form-mid layui-word-aux">验证码</div>
                    <div class="layui-input-inline" style="width: 400px;">
                        <input type="radio" name="verificationCode" value="false" title="关闭" checked>
                        <input type="radio" name="verificationCode" value="true" title="开启">
                    </div>
                </div>
                <div class="layui-form-item" style="margin: 4px 0;" th:if="${uKeyLogin eq 'uKeyLogin'}">
                    <div class="layui-form-mid layui-word-aux">UKey登录(仅IE支持)</div>
                    <div class="layui-input-inline" style="width: 400px;">
                        <input type="radio" name="uKeyLogin" value="false" title="关闭" checked>
                        <input type="radio" name="uKeyLogin" value="true" title="开启">
                    </div>
                </div>
                <div class="layui-form-item" style="margin: 4px 0;" th:if="${dingDingScanLogin eq 'dingDingScanLogin'}">
                    <div class="layui-form-mid layui-word-aux">扫码登录</div>
                    <div class="layui-input-inline" style="width: 400px;">
                        <input type="radio" name="scanCodeLogin" value="false" title="关闭" checked>
                        <input type="radio" name="scanCodeLogin" value="dingDingScanCode" title="钉钉(需要设置通讯录权限，访问白名单)" th:if="${dingDingScanLogin eq 'dingDingScanLogin'}">
                    </div>
                </div>
                <div class="layui-form-item" style="margin: 4px 0;">
                    <div class="layui-form-mid layui-word-aux">菜单模式</div>
                    <div class="layui-input-inline" style="width: 400px;">
                        <input type="radio" name="menuMode" value="fixedLeft" title="左固定" checked>
                        <input type="radio" name="menuMode" value="floatLeft" title="左浮动">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                    <a href="javascript:void(0);"><cite>系统参数配置(参数名唯一且只能是字母、数字、下划线与英文横线的组合)</cite></a>
                </span>
                <button id="systemConfigParamsPlusBtn" type="button" class="layui-btn layui-btn-xs" style="float: right; margin-top: 12px;">
                    <i class="fa fa-plus" aria-hidden="true"></i>
                </button>
            </div>
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                    <table class="layui-table">
                        <colgroup>
                            <col width="250">
                            <col>
                            <col width="60">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>参数名</th>
                            <th>参数值</th>
                            <th style="text-align: center;">操作</th>
                        </tr>
                        </thead>
                        <tbody id="systemConfigParamsBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-card" th:if="${appLogin eq 'appLogin'}">
            <div class="layui-card-header">
                <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
                    <a href="javascript:void(0);"><cite>APP参数配置(参数名唯一且只能是字母、数字、下划线与英文横线的组合)</cite></a>
                </span>
                <button id="appConfigParamsPlusBtn" type="button" class="layui-btn layui-btn-xs" style="float: right; margin-top: 12px;">
                    <i class="fa fa-plus" aria-hidden="true"></i>
                </button>
            </div>
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                    <table class="layui-table">
                        <colgroup>
                            <col width="250">
                            <col>
                            <col width="60">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>参数名</th>
                            <th>参数值</th>
                            <th style="text-align: center;">操作</th>
                        </tr>
                        </thead>
                        <tbody id="appConfigParamsBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer" style="left: 0;">
                    <button type="button" class="layui-btn" lay-submit lay-filter="submitForm">提交更新</button>
                </div>
            </div>
        </div>
    </form>
    <script id="logoTemple" type="text/html">
        {{# layui.each(d.logos, function(index, item){ }}
        <span class="photo-show-wrap">
            <span class="photo-wrap">
                <img src="route/file/download/true/{{item}}"/>
                <a href="javascript:void(0)" data-id="{{item}}" class="layui-btn layui-btn-xs layui-btn-danger remove-logo-btn"><i class="fa fa-trash"></i></a>
            </span>
        </span>
        {{#  }); }}
        {{# if(d.logos.length < 1) { }}
        <span>
            <a href="javascript:void(0)" id="selectLogo"><i class="fa fa-plus-square-o fa-5x"></i></a>
        </span>
        {{# } }}
    </script>
    <script id="shortLogoTemple" type="text/html">
        {{# layui.each(d.shortLogos, function(index, item){ }}
        <span class="photo-show-wrap">
            <span class="photo-wrap">
                <img src="route/file/download/true/{{item}}"/>
                <a href="javascript:void(0)" data-id="{{item}}" class="layui-btn layui-btn-xs layui-btn-danger remove-logo-short-btn"><i class="fa fa-trash"></i></a>
            </span>
        </span>
        {{#  }); }}
        {{# if(d.shortLogos.length < 1) { }}
        <span>
            <a href="javascript:void(0)" id="selectShortLogo"><i class="fa fa-plus-square-o fa-5x"></i></a>
        </span>
        {{# } }}
    </script>
    <script id="backgroundTemple" type="text/html">
        {{# layui.each(d.photos, function(index, item){ }}
        <span class="photo-show-wrap">
            <span class="photo-wrap">
                <img src="route/file/download/true/{{item}}"/>
                <a href="javascript:void(0)" data-id="{{item}}" class="layui-btn layui-btn-xs layui-btn-danger remove-photo-btn"><i class="fa fa-trash"></i></a>
            </span>
        </span>
        {{#  }); }}
        {{# if(d.photos.length < 6) { }}
        <span>
            <a href="javascript:void(0)" id="selectPhoto"><i class="fa fa-plus-square-o fa-5x"></i></a>
        </span>
        {{# } }}
    </script>
</div>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: 'assets/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate', 'laytpl'], function(){
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var logos = [];
        var shortLogos = [];
        var photos = [];
        var photoViewer = new Viewer(document.getElementById('photoShow'), {});
        var logoViewer = new Viewer(document.getElementById('logoShow'), {});
        var shortLogoViewer = new Viewer(document.getElementById('shortLogoShow'), {});
        var systemConfigParams;
        var appConfigParams;

        // 设置logo图片
        function setLogoTemple() {
            var logoTemple = document.getElementById('logoTemple').innerHTML;
            var logoShow = document.getElementById('logoShow');
            laytpl(logoTemple).render({
                logos: logos
            }, function(html) {
                logoShow.innerHTML = html;
            });
            logoViewer.update();
        }

        // 设置logo图片
        function setShortLogoTemple() {
            var shortLogoTemple = document.getElementById('shortLogoTemple').innerHTML;
            var shortLogoShow = document.getElementById('shortLogoShow');
            laytpl(shortLogoTemple).render({
                shortLogos: shortLogos
            }, function(html) {
                shortLogoShow.innerHTML = html;
            });
            shortLogoViewer.update();
        }

        // 事件-删除图片
        $(document).on('click', '.remove-logo-btn', function() {
            var fileId = this.dataset.id;
            for(var i = 0; i < logos.length; i++) {
                var item = logos[i]
                if(item == fileId) {
                    logos.splice(i, 1);
                    break;
                }
            }
            setLogoTemple();
        });

        // 事件-删除图片
        $(document).on('click', '.remove-logo-short-btn', function() {
            var fileId = this.dataset.id;
            for(var i = 0; i < shortLogos.length; i++) {
                var item = shortLogos[i]
                if(item == fileId) {
                    shortLogos.splice(i, 1);
                    break;
                }
            }
            setShortLogoTemple();
        });

        // 事件-上传图片
        $(document).on('click', '#selectLogo', function() {
            top.dialog.file({
                type: 'image',
                title: '选择LOGO',
                width: '800px',
                height: '400px',
                maxFileCount: (1 - logos.length),
                onClose: function() {
                    var uploadFileArray = top.dialog.dialogData.uploadFileArray;
                    if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
                        for(var i = 0, item = uploadFileArray[i]; item = uploadFileArray[i++];) {
                            logos.push(item.data);
                        }
                        setLogoTemple();
                    }
                }
            });
        });

        // 事件-上传图片
        $(document).on('click', '#selectShortLogo', function() {
            top.dialog.file({
                type: 'image',
                title: '选择短LOGO',
                width: '800px',
                height: '400px',
                maxFileCount: (1 - shortLogos.length),
                onClose: function() {
                    var uploadFileArray = top.dialog.dialogData.uploadFileArray;
                    if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
                        for(var i = 0, item = uploadFileArray[i]; item = uploadFileArray[i++];) {
                            shortLogos.push(item.data);
                        }
                        setShortLogoTemple();
                    }
                }
            });
        });

        // 设置背景图片
        function setBackgroundTemple() {
            var backgroundTemple = document.getElementById('backgroundTemple').innerHTML;
            var photoShow = document.getElementById('photoShow');
            laytpl(backgroundTemple).render({
                photos: photos
            }, function(html) {
                photoShow.innerHTML = html;
            });
            photoViewer.update();
        }

        // 事件-删除图片
        $(document).on('click', '.remove-photo-btn', function() {
            var fileId = this.dataset.id;
            for(var i = 0; i < photos.length; i++) {
                var item = photos[i]
                if(item == fileId) {
                    photos.splice(i, 1);
                    break;
                }
            }
            setBackgroundTemple();
        });

        // 事件-上传图片
        $(document).on('click', '#selectPhoto', function() {
            top.dialog.file({
                type: 'image',
                title: '选择图片',
                width: '800px',
                height: '400px',
                maxFileCount: (6 - photos.length),
                onClose: function() {
                    var uploadFileArray = top.dialog.dialogData.uploadFileArray;
                    if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
                        for(var i = 0, item = uploadFileArray[i]; item = uploadFileArray[i++];) {
                            photos.push(item.data);
                        }
                        setBackgroundTemple();
                    }
                }
            });
        });

        // 系统参数配置
        function ParamsConfigInit(idPrefix, classPrefix, paramsJsonString) {
            var paramsArray = [];
            var keyupSetTimeout;

            function getTr(index, key, value) {
                return  '<tr>' +
                        '   <td>' +
                        '       <input type="text" id="'+ idPrefix +'Key'+ index +'" placeholder="输入参数名" class="layui-input '+ classPrefix +'-key" value="'+ (key ? key : '') +'" data-index="'+ index +'">' +
                        '   </td>' +
                        '   <td>' +
                        '       <input type="text" id="'+ idPrefix +'Value'+ index +'" placeholder="输入参数值" class="layui-input '+ classPrefix +'-value" value="'+ (value ? value : '') +'" data-index="'+ index +'">' +
                        '   </td>' +
                        '   <td style="text-align: center;">' +
                        '       <button type="button" class="layui-btn layui-btn-xs layui-btn-danger '+ classPrefix +'-remove-btn" data-index="'+ index +'">' +
                        '           <i class="fa fa-times" aria-hidden="true"></i>' +
                        '       </button>' +
                        '   </td>' +
                        '</tr>';
            }

            function refreshTr() {
                var trs = '';
                for(var i = 0; i < paramsArray.length; i++) {
                    var item = paramsArray[i];
                    trs += getTr(i, item.key, item.value);
                }
                $('#'+ idPrefix +'Body').empty();
                $('#'+ idPrefix +'Body').append(trs);
            }

            function isKeyExist(index, key) {
                if(!key) {
                    return false;
                }
                for(var i = 0, item; item = paramsArray[i++];) {
                    if(key == item.key && index != (i - 1)) {
                        return true;
                    }
                }
                return false;
            }

            function isKeyEffective(key) {
                if((/^[a-zA-Z0-9\_\-]+$/g.test(key))) {
                    return true;
                }
                return false;
            }

            $(document).on('keyup', '.'+ classPrefix +'-key', function() {
                var self = this;
                var index = this.dataset.index;
                this.value = this.value.replace(/\s/g, '');
                var value = this.value;
                if(keyupSetTimeout) {
                    clearTimeout(keyupSetTimeout);
                }
                keyupSetTimeout = setTimeout(function() {
                    if(!isKeyEffective(value)) {
                        top.dialog.msg('参数名只能是字母、数字、下划线与英文横线组合');
                        self.focus();
                        self.value = '';
                        return;
                    }
                    if(isKeyExist(index, value)) {
                        top.dialog.msg('参数名重复');
                        self.focus();
                        self.value = '';
                        return;
                    } else {
                        paramsArray[index].key = value;
                    }
                }, 500);
            });

            $(document).on('keyup', '.'+ classPrefix +'-value', function() {
                var index = this.dataset.index;
                paramsArray[index].value = this.value;
            });

            $(document).on('click', '#'+ idPrefix +'PlusBtn', function() {
                paramsArray.push({
                    key: '',
                    value: ''
                });
                refreshTr();
            })

            $(document).on('click', '.'+ classPrefix +'-remove-btn', function() {
                var index = this.dataset.index;
                paramsArray.splice(index, 1);
                refreshTr();
            })

            this.init = function() {
                if(!paramsJsonString) {
                    return;
                }
                var paramsObj = JSON.parse(paramsJsonString);
                console.log(paramsObj);
                for(var k in paramsObj) {
                    paramsArray.push({
                        key: k,
                        value: paramsObj[k]
                    })
                }
                refreshTr();
            }
            this.getConfigParams = function() {
                var obj = {};
                for(var i = 0, item; item = paramsArray[i++];) {
                    if(!item.key) {
                        continue;
                    }
                    obj[item.key] = item.value;
                }
                return JSON.stringify(obj);
            }
        };

        // 初始化
        function initData() {
            var loadLayerIndex;
            top.restAjax.get(top.restAjax.path('api/config/getconfig', []), {}, null, function(code, data) {
                form.val('dataForm', {
                    systemTitle: data.systemTitle,
                    systemTitleSize: data.systemTitleSize,
                    systemSubTitle: data.systemSubTitle,
                    systemSubTitleSize: data.systemSubTitleSize,
                    systemShortTitle: data.systemShortTitle,
                    copyRightYear: data.copyRightYear,
                    copyleft: data.copyleft,
                    officialUrl: data.officialUrl,
                    passwordValidity: data.passwordValidity,
                    passwordValidityDays: data.passwordValidityDays,
                    changePasswordNoticeDays: data.changePasswordNoticeDays,
                    passwordStrength: data.passwordStrength,
                    firstLoginChangePassword: data.firstLoginChangePassword,
                    appDeviceCount: data.appDeviceCount ? data.appDeviceCount : 0,
                    verificationCode: data.verificationCode,
                    uKeyLogin: data.uKeyLogin,
                    scanCodeLogin: data.scanCodeLogin,
                    loginBoxPosition: data.loginBoxPosition,
                    menuMode: data.menuMode,
                });
                form.render(null, 'dataForm');
                if(data.systemLogo) {
                    logos = data.systemLogo.split(',');
                }
                setLogoTemple();
                if(data.systemShortLogo) {
                    shortLogos = data.systemShortLogo.split(',');
                }
                setShortLogoTemple();
                if(data.loginBackgroundImages) {
                    photos = data.loginBackgroundImages.split(',');
                }
                setBackgroundTemple();
                systemConfigParams = new ParamsConfigInit('systemConfigParams', 'system-config-params', data.systemConfigParams);
                systemConfigParams.init();

                appConfigParams = new ParamsConfigInit('appConfigParams', 'app-config-params', data.appConfigParams);
                appConfigParams.init();
            }, function(code, data) {
                top.dialog.msg(data.msg);
            }, function() {
                loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
            }, function() {
                top.dialog.close(loadLayerIndex);
            });
        }
        initData();

        // 提交表单
        form.on('submit(submitForm)', function(formData) {
            top.dialog.confirm(top.dataMessage.commit, function(index) {
                top.dialog.close(index);
                var loadLayerIndex;
                formData.field.loginBackgroundImages = photos.toString();
                formData.field.systemLogo = logos.length > 0 ? logos[0] : '';
                formData.field.systemShortLogo = shortLogos.length > 0 ? shortLogos[0] : '';
                formData.field.systemConfigParams = systemConfigParams.getConfigParams();
                formData.field.appConfigParams = appConfigParams.getConfigParams();
                top.restAjax.put(top.restAjax.path('api/config/updateconfig', []), formData.field, null, function(code, data) {
                    var layerIndex = top.dialog.msg('更新成功', {
                        time: 0,
                        btn: [top.dataMessage.button.yes],
                        shade: 0.3,
                        yes: function(index) {
                            top.dialog.close(index);
                            window.location.reload();
                        }
                    });
                }, function(code, data) {
                    top.dialog.msg(data.msg);
                }, function() {
                    loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
                }, function() {
                    top.dialog.close(loadLayerIndex);
                });
            });
            return false;
        });

        form.verify({
            positiveNumber: function(value, item) {
                if(value < 0) {
                    return '必须是正数';
                }
            }
        });
    });
</script>
</body>
</html>