{extend name="base" /}
{block name="title"}多语言翻译设置{/block}
{block name="main"} 
<div class="layui-body">   
    {include file="public/menu" /}
    <div class="royal-flex-content"> 
        <div class="royal-content">
            <div class="royal-content-main">
                <div class="layui-card">
                    <div class="layui-card-header">百度翻译配置</div>
                    <div class="layui-card-body">
                        <form class="layui-form" lay-filter="translate-form">
                            <!-- 基础配置 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">启用翻译</label>
                                <div class="layui-input-block"> 
                                    <input type="checkbox" name="enable" value="1" lay-skin="switch" {if $config.enable}checked{/if}>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">App ID</label>
                                <div class="layui-input-block">
                                    <input type="text" name="app_id" value="{$config.app_id|default=''}" placeholder="请输入百度翻译App ID" class="layui-input">
                                    <div class="layui-form-mid layui-word-aux">
                                        需在<a href="https://api.fanyi.baidu.com" target="_blank" class="layui-text-blue">百度翻译开放平台</a>申请
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">Secret Key</label>
                                <div class="layui-input-block">
                                    <input type="password" name="secret_key" value="{$config.secret_key|default=''}" placeholder="请输入百度翻译密钥" class="layui-input">
                                    <div class="layui-form-mid layui-word-aux">
                                        <i class="layui-icon layui-icon-tips"></i> 请妥善保管密钥，防止泄露
                                    </div>
                                </div>
                            </div>

                            <!-- 多语言域名配置 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">语言域名配置</label>
                                <div class="layui-input-block">
                                    <table class="layui-table">
                                        <colgroup>
                                            <col width="80">
                                            <col width="150">
                                            <col>
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th>启用</th>
                                                <th>语言</th>
                                                <th>域名</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {foreach $langs as $code=>$name}
                                            {if $code != 'zh'}
                                            <tr>
                                                <td>
                                                    <input type="hidden" name="domain_enable_{$code}" value="0">
                                                    <input type="checkbox" name="domain_enable_{$code}" value="1" 
                                                           lay-skin="switch" 
                                                           {if isset($config.domains[$code]) && $config.domains[$code] != ''}checked{/if}>
                                                </td>
                                                <td>{$name}</td>
                                                <td>
                                                    <input type="text" name="domain_{$code}" 
                                                           value="{$config.domains[$code]|default=''}" 
                                                           placeholder="如：{$code}.example.com" 
                                                           class="layui-input"
                                                           {if !isset($config.domains[$code]) || $config.domains[$code] == ''}disabled{/if}>
                                                </td>
                                            </tr>
                                            {/if}
                                            {/foreach}
                                        </tbody>
                                    </table>
                                    <div class="layui-form-mid layui-word-aux">
                                        <i class="layui-icon layui-icon-tips"></i> 配置后可通过对应域名访问不同语言版本
                                    </div>
                                </div>
                            </div>

                             <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="translate-form">保存配置</button>
                                </div>
                            </div>
                            <!-- API容量说明 -->
                            <div class="layui-form-item">
                                <label class="layui-form-label">百度翻译API容量说明</label>
                                <div class="layui-input-block">
                                    <div class="layui-notice">
                                        <div class="layui-notice-title">标准版服务说明：</div>
                                        <ul class="layui-notice-list">
                                            <li><i class="layui-icon layui-icon-ok"></i> 免费版每月可翻译5万字符</li>
                                            <li><i class="layui-icon layui-icon-ok"></i> QPS限制：1次/秒</li>
                                            <li><i class="layui-icon layui-icon-ok"></i> 支持28种语言互译</li>
                                        </ul>
                                        <div class="layui-notice-more">
                                            <a href="https://api.fanyi.baidu.com/doc/21" target="_blank" class="layui-text-blue">查看详细服务说明</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                           
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="javascript"}
<script>
layui.use(['form', 'jquery'], function() {
    var form = layui.form;
    var $ = layui.$;
    
    // 初始化表单
    form.render();
    
    // 域名启用开关事件
    form.on('switch', function(data) {
        var inputName = data.elem.name;
        var code = inputName.replace('domain_enable_', '');
        var domainInput = $('input[name="domain_' + code + '"]');
        
        if (data.elem.checked) {
            domainInput.removeAttr('disabled');
        } else {
            domainInput.attr('disabled', true).val('');
        }
    });
    
    // 表单提交
    form.on('submit(translate-form)', function(data) {
        // 验证域名格式
        var valid = true;
        $('input[name^="domain_"]').not(':disabled').each(function() {
            var domain = $(this).val().trim();
            if (domain && !/^[a-z0-9.-]+$/i.test(domain)) {
                layer.msg('域名格式错误: ' + $(this).attr('placeholder'), {icon: 2});
                $(this).focus();
                valid = false;
                return false;
            }
        });
        
        if (!valid) return false;
        
        // 提交表单
        var loading = layer.load(2);
        $.post('{:url("translate/save")}', data.field, function(res) {
            layer.close(loading);
            if (res.code === 0) {
                layer.msg('配置保存成功', {icon: 1});
                setTimeout(function() {
                    location.reload();
                }, 1500);
            } else {
                layer.msg(res.msg || '保存失败', {icon: 2});
            }
        }).fail(function() {
            layer.close(loading);
            layer.msg('请求失败，请检查网络', {icon: 2});
        });
        return false;
    });
    
    // 初始化禁用状态
    $('input[name^="domain_enable_"]').each(function() {
        if (!this.checked) {
            var code = this.name.replace('domain_enable_', '');
            $('input[name="domain_' + code + '"]').attr('disabled', true);
        }
    });
});
</script>
{/block}

{block name="css"}
<style>
.layui-notice {
    border-left: 3px solid #1E9FFF;
    padding: 10px 15px;
    background-color: #f8f8f8;
    margin-bottom: 15px;
}
.layui-notice-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}
.layui-notice-list {
    padding-left: 20px;
    margin-bottom: 10px;
}
.layui-notice-list li {
    list-style-type: none;
    position: relative;
    padding-left: 25px;
    margin-bottom: 5px;
}
.layui-notice-list .layui-icon {
    position: absolute;
    left: 0;
    top: 2px;
    color: #5FB878;
}
.layui-notice-more {
    text-align: right;
    font-size: 12px;
}
</style>
{/block}