<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增线路配置')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-gateways-add">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.gwName}" ></label>
                    <div class="col-sm-8">
                        <input name="gwName" id="gwName" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.purpose}"></label>
                    <div class="col-sm-8">
                        <select name="purpose" class="form-control m-b">
                            <option value="0" th:text="#{gateways.form.purpose.abandoned}"></option>
                            <option value="1" th:text="#{gateways.form.purpose.toolbar}"></option>
                            <option value="2" th:text="#{gateways.form.purpose.outgoing}"></option>
                            <option value="3" th:text="#{gateways.form.purpose.unlimited}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.profileName}"></label>
                    <div class="col-sm-8">
                        <select name="profileName" class="form-control m-b" >
                            <option th:each="profileData:${profileList}" th:value="${profileData.profileName}" th:text="${profileData.profileName}" ></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.register}"></label>
                    <div class="col-sm-8">
                        <select id="register" name="register" class="form-control m-b">
                            <option value="0" th:text="#{gateways.form.label.register0}"></option>
                            <option value="1" th:text="#{gateways.form.label.register1}"></option>
                            <option value="2" th:text="#{gateways.form.label.register2}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 register-param">
                <div class="form-group">
                    <label class="col-sm-3 control-label" th:text="#{gateways.form.authUsername}"></label>
                    <div class="col-sm-8">
                        <input name="authUsername" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12 register2-param">
                <div class="form-group">
                    <label class="col-sm-3 control-label" th:text="#{gateways.form.authUsername2}"></label>
                    <div class="col-sm-8">
                        <select name="authUsername2" id="authUsername2" class="form-control" >
                            <option value="" th:text="#{gateways.form.authUsername2.empty}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 register-param">
                <div class="form-group">
                    <label class="col-sm-3 control-label" th:text="#{gateways.form.authPassword}"></label>
                    <div class="col-sm-8">
                        <input name="authPassword" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12" id="gwAddrDiv">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.gwAddr}"></label>
                    <div class="col-sm-8">
                        <input name="gwAddr" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label" th:text="#{gateways.form.calleePrefix}"></label>
                    <div class="col-sm-8">
                        <input name="calleePrefix" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.codec}"></label>
                    <div class="col-sm-8">
                        <input name="codec" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.gwDesc}"></label>
                    <div class="col-sm-8">
                        <input name="gwDesc" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.maxConcurrency}"></label>
                    <div class="col-sm-8">
                        <input name="maxConcurrency" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.priority}"></label>
                    <div class="col-sm-8">
                        <input name="priority" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">
                        <span th:text="#{gateways.form.caller}"></span>
                        <i class="fa fa-question-circle" data-toggle="tooltip" data-placement="top" th:title="#{gateways.form.tips.caller}"></i>
                    </label>
                    <div class="col-sm-8">
                        <textarea name="caller" class="form-control" rows="3" th:placeholder="#{gateways.form.caller.placeholder}" required></textarea>
                    </div>
                </div>
            </div>

        </form>

        <div class="row" ></div>
        <div class="row" >
            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="addRows()">
                    <i class="fa fa-plus"></i> <span th:text="#{gateways.form.addRows}"></span>
                </a>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "cc/gateways"
        var paramSize = 0;
        $(function() {

            $(".register-param").hide();
            $(".register2-param").hide();

            // 初始化表单验证
            $("#form-gateways-add").validate({
                focusCleanup: true,
                rules: {
                    gwName: {
                        required: true,
                        customPattern: true
                    }
                },
                messages: {
                    gwName: {
                        required: "请输入网关名称",
                        customPattern: "网关名称必须以字母开头，且只能包含字母和数字"
                    }
                }
            });

            // 自定义验证规则
            $.validator.addMethod("customPattern", function(value, element) {
                return this.optional(element) || /^[A-Za-z][A-Za-z0-9]*$/.test(value);
            });

            // 加载分机号数据
            loadExtensionNumbers();

            // 初始化 tooltip
            $('[data-toggle="tooltip"]').tooltip();

        });

        function submitHandler() {
            if ($.validate.form()) {

                var formData = $('#form-gateways-add').serializeArray();
                // 添加的配置
                var configs = {}
                $('input.new-config-name').each(function() {
                    var newConfigId = $(this).attr('id');
                    var configKey = $(this).val().trim();
                    var configValue = $("#" + newConfigId + "_value").val().trim();
                    configs[configKey] = configValue;
                });
                formData.push({"name": "configs", "value": JSON.stringify(configs)})
                $.operate.save(prefix + "/add", formData);
            }
        }


        $("#register").change(function(event){
            var register = $(event.target).val();
            $(".register-param").hide();
            $(".register2-param").hide();
            $("#gwAddrDiv").show();
            if (register == 1) {
                $(".register-param").show();
            } else if (register == 2) {
                $(".register2-param").show();
                $("#gwAddrDiv").hide();
            }
        });


        // 追加一行配置
        function addRows(){
            paramSize ++;
            var addConfigs = '';
            addConfigs += '<div className="row">';
            addConfigs += '<div class="col-sm-12">';
            addConfigs += '<div class="col-sm-3"><input class="new-config-name form-control" type="text" value="" id="newConfig_' + paramSize + '" placeholder="' + i18n('gateways.form.placeholder.name') + '"/></div><div class="col-sm-8"><input class="new-config-value form-control" type="text" id="newConfig_' + paramSize + '_value" value="" placeholder="' + i18n('gateways.form.placeholder.value') + '"/></div>';
            addConfigs += '</div>';
            addConfigs += '</div>';
            $('#form-gateways-add').append(addConfigs);
        }

        // 加载分机号数据
        function loadExtensionNumbers() {
            $.ajax({
                url: ctx + 'cc/extnum/all',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response && response.code === 0) {
                        var extNumSelect = $('#authUsername2');
                        extNumSelect.empty();
                        extNumSelect.append('<option value="" th:text="#{gateways.form.authUsername2.empty}"></option>');
                        var extList = response.data || [];
                        $.each(extList, function(index, item) {
                            var extNum = item.extNum || item;
                            var extName = item.extNum || extNum;
                            extNumSelect.append('<option value="' + extNum + '">' + extName + '</option>');
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('加载分机号数据失败:', error);
                }
            });
        }

    </script>
</body>
</html>