<!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-edit" th:object="${ccGateways}">
            <input name="id" th:field="*{id}" type="hidden">

            <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" th:field="*{gwName}" class="form-control" type="text" required readonly>
                    </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" th:field="*{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" th:field="*{profileName}">
                            <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:field="*{register}" th:text="#{gateways.form.label.register0}"></option>
                            <option value="1" th:field="*{register}" th:text="#{gateways.form.label.register1}"></option>
                            <option value="2" th:field="*{register}" 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" th:field="*{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" th:field="*{authUsername2}">
                            <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" th:field="*{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" th:field="*{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" th:field="*{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" th:field="*{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" th:field="*{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" th:field="*{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" th:field="*{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:field="*{caller}" 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 defaultRegister = [[${ccGateways.register}]];
        var custConfigs = [[${ccGateways.configs}]];
        var paramSize = 0;
        var prefix = ctx + "cc/gateways";
        $(function() {
            $(".register-param").hide();
            $(".register2-param").hide();
            if (defaultRegister == 1) {
                $(".register-param").show();
            } else if (defaultRegister == 2) {
                $(".register2-param").show();
                $("#gwAddrDiv").hide();
            }

            // 使用JSON.parse()方法解析JSON字符串
            if (custConfigs) {
                console.log(custConfigs)
                var baseConfigsHtml = '';
                const configs = JSON.parse(custConfigs);
                // 遍历custConfigs对象，打印每个键和值
                for (const key in configs) {
                    if (configs.hasOwnProperty(key)) {
                        const value = configs[key];
                        baseConfigsHtml += '<div className="col-xs-12">';
                        baseConfigsHtml += '<div class="form-group">';
                        baseConfigsHtml += '<label class="col-sm-3 control-label">' + key + '</label>'
                        baseConfigsHtml += '<div class="col-sm-8">'
                        baseConfigsHtml += '<input class="config-value form-control" type="text" id="' + key + '" value="' + value + '" />'
                        baseConfigsHtml += '</div>';
                        baseConfigsHtml += '</div>';
                        baseConfigsHtml += '</div>';
                        paramSize ++;
                    }
                }
                $('#form-gateways-edit').append(baseConfigsHtml);
            }

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

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

        $("#form-gateways-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var configs = {}
                var formData = $('#form-gateways-edit').serializeArray();
                // 已存在的配置
                $('input.config-value').each(function() {
                    var configKey = $(this).attr('id');
                    var configValue = $(this).val().trim();
                    configs[configKey] = configValue;
                });
                // 添加的配置
                $('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 + "/edit", 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-edit').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>');
                        });

                        var defaultValue = [[${ccGateways.authUsername2}]];
                        if (defaultValue) {
                            extNumSelect.val(defaultValue);
                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error('加载分机号数据失败:', error);
                }
            });
        }
    </script>
</body>
</html>