<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('腾讯云TTS参数配置')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
    <style>
    </style>
</head>

<body>
<div class="main-content">
    <div class="h4 form-header" th:text="#{switchconf.tts.tx1.header}"></div>
    <div class="alert alert-info" th:text="#{switchconf.tts.tx1.notice}"></div>
    <div id="baseConfigs"></div>

    <div class="row"></div>
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button id="saveConfig" type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i><span th:text="#{switchconf.btn.save}"></span></button>&nbsp;
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<script>
    var prefix = ctx + "cc/fsconf";

    function escapeHtml(value) {
        return $('<div/>').text(value || '').html();
    }

    function renderInput(config) {
        var name = config.name;
        var value = config.value || '';
        var safeValue = escapeHtml(value);

        if (name === 'sound-effect' || name === 'soundEffect') {
            return '' +
                '<select class="config-value form-control" id="' + name + '">' +
                '<option value=""' + (value === '' ? ' selected' : '') + '>' + i18n('switchconf.tts.tx1.effect.none') + '</option>' +
                '<option value="spacious_echo"' + (value === 'spacious_echo' ? ' selected' : '') + '>' + i18n('switchconf.tts.tx1.effect.spaciousEcho') + '</option>' +
                '<option value="auditorium_echo"' + (value === 'auditorium_echo' ? ' selected' : '') + '>' + i18n('switchconf.tts.tx1.effect.auditoriumEcho') + '</option>' +
                '<option value="lofi_telephone"' + (value === 'lofi_telephone' ? ' selected' : '') + '>' + i18n('switchconf.tts.tx1.effect.lofiTelephone') + '</option>' +
                '<option value="robotic"' + (value === 'robotic' ? ' selected' : '') + '>' + i18n('switchconf.tts.tx1.effect.robotic') + '</option>' +
                '</select>' +
                '<span class="help-block m-b-none">' + i18n('switchconf.tts.tx1.help.soundEffect') + '</span>';
        }

        if (name === 'pitch' || name === 'intensity' || name === 'timbre') {
            return '' +
                '<input class="config-value form-control" type="number" id="' + name + '" min="-100" max="100" step="1" value="' + safeValue + '" />' +
                '<span class="help-block m-b-none">' + i18n('switchconf.tts.tx1.help.effectRange') + '</span>';
        }

        if (name === 'format') {
            return '' +
                '<select class="config-value form-control" id="' + name + '">' +
                '<option value="ulaw"' + (value === 'ulaw' ? ' selected' : '') + '>ulaw</option>' +
                '<option value="alaw"' + (value === 'alaw' ? ' selected' : '') + '>alaw</option>' +
                '<option value="pcm"' + (value === 'pcm' ? ' selected' : '') + '>pcm</option>' +
                '<option value="wav"' + (value === 'wav' ? ' selected' : '') + '>wav</option>' +
                '<option value="mp3"' + (value === 'mp3' ? ' selected' : '') + '>mp3</option>' +
                '<option value="flac"' + (value === 'flac' ? ' selected' : '') + '>flac</option>' +
                '<option value="opus"' + (value === 'opus' ? ' selected' : '') + '>opus</option>' +
                '</select>' +
                '<span class="help-block m-b-none">' + i18n('switchconf.tts.tx1.help.format') + '</span>';
        }

        if (name === 'sample-rate') {
            return '' +
                '<select class="config-value form-control" id="' + name + '">' +
                '<option value="8000"' + (value === '8000' ? ' selected' : '') + '>8000</option>' +
                '<option value="16000"' + (value === '16000' ? ' selected' : '') + '>16000</option>' +
                '<option value="22050"' + (value === '22050' ? ' selected' : '') + '>22050</option>' +
                '<option value="24000"' + (value === '24000' ? ' selected' : '') + '>24000</option>' +
                '<option value="32000"' + (value === '32000' ? ' selected' : '') + '>32000</option>' +
                '<option value="44100"' + (value === '44100' ? ' selected' : '') + '>44100</option>' +
                '<option value="48000"' + (value === '48000' ? ' selected' : '') + '>48000</option>' +
                '</select>';
        }

        if (name === 'verify-peer') {
            return '' +
                '<select class="config-value form-control" id="' + name + '">' +
                '<option value="false"' + (value === 'false' ? ' selected' : '') + '>false</option>' +
                '<option value="true"' + (value === 'true' ? ' selected' : '') + '>true</option>' +
                '</select>';
        }

        var inputType = (name === 'secret-key') ? 'password' : 'text';
        return '<input class="config-value form-control" type="' + inputType + '" id="' + name + '" value="' + safeValue + '" />';
    }

    function validateConfigs(configs) {
        var configMap = {};
        $.each(configs, function(index, item) {
            configMap[item.name] = item.value;
        });

        if (!configMap['appid']) {
            $.modal.alertError('`appid` 不能为空');
            return false;
        }
        if (!configMap['secret-id']) {
            $.modal.alertError('`secret-id` 不能为空');
            return false;
        }
        if (!configMap['secret-key']) {
            $.modal.alertError('`secret-key` 不能为空');
            return false;
        }
        if (!configMap['voice-id']) {
            $.modal.alertError('`voice-id` 不能为空');
            return false;
        }
        if (configMap['timeout-sec']) {
            var timeoutSec = parseInt(configMap['timeout-sec'], 10);
            if (isNaN(timeoutSec) || timeoutSec <= 0 || timeoutSec > 120) {
                $.modal.alertError('`timeout-sec` 必须是 1 到 120 之间的整数');
                return false;
            }
        }
        var effectKeys = ['pitch', 'intensity', 'timbre'];
        for (var i = 0; i < effectKeys.length; i++) {
            var key = effectKeys[i];
            if (configMap[key] === undefined || configMap[key] === '') {
                continue;
            }
            var num = parseInt(configMap[key], 10);
            if (isNaN(num) || num < -100 || num > 100) {
                $.modal.alertError('`' + key + '` ' + i18n('switchconf.tts.tx1.validate.effectRange'));
                return false;
            }
        }
        return true;
    }

    $(function() {
        $.ajax({
            url: prefix + '/getTxTts1Conf',
            type: 'GET',
            success: function(_data) {
                var baseConfigsHtml = '';
                var data = _data.data;

                $.each(data, function(index, config) {
                    baseConfigsHtml += '<div className="row">';
                    baseConfigsHtml += '<div class="col-sm-12">';
                    baseConfigsHtml += '<label class="col-sm-2 control-label">' + config.aliasName + '</label><div class="col-sm-10">' + renderInput(config) + '</div>';
                    baseConfigsHtml += '</div>';
                    baseConfigsHtml += '</div>';
                });
                $('#baseConfigs').html(baseConfigsHtml);
            },
            error: function(error) {
                console.error('Error fetching configuration:', error);
            }
        });
    });

    $('#saveConfig').click(function() {
        var configs = [];
        $('input.config-value').each(function() {
            var config = {
                name: $(this).attr('id'),
                value: $(this).val().trim()
            };
            configs.push(config);
        });
        $('select.config-value').each(function() {
            var exists = false;
            for (var i = 0; i < configs.length; i++) {
                if (configs[i].name === $(this).attr('id')) {
                    exists = true;
                    break;
                }
            }
            if (!exists) {
                configs.push({
                    name: $(this).attr('id'),
                    value: ($(this).val() || '').trim()
                });
            }
        });

        if (!validateConfigs(configs)) {
            return;
        }

        $.ajax({
            url: prefix + '/setTxTts1Conf',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(configs),
            beforeSend: function () {
                $.modal.loading(i18n("common.tip.loading"));
                $.modal.disable();
            },
            success: function(response) {
                processAjaxReponseJson(response);
            },
            error: function(error) {
            }
        });
    });

</script>

</body>
</html>
