<!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('IVR配置')" />
    <style>
        /* 强制换行 */
        #bootstrap-tree-table td {
            word-break: break-all;
            white-space: normal;
        }
        /* 交替行背景色  */
        #bootstrap-tree-table tr.row-color-odd {
            background-color: #eff9f9 !important;
        }
        #bootstrap-tree-table tr.row-color-even {
            background-color: #eff9f9 !important;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="menu-form">
                <div class="select-list">
                    <ul>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.treeTable.search()"><i class="fa fa-search"></i>&nbsp;<span th:text="#{btn.search}"></span></a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add(0)" shiro:hasPermission="cc:ivr:add">
                <i class="fa fa-plus"></i> <span th:text="#{ivr.btn.createIVR}"></span>
            </a>
            <!-- 新增：应用配置按钮 -->
            <a class="btn btn-warning" onclick="applyIvrConfig()" shiro:hasPermission="cc:ivr:edit">
                <i class="fa fa-play-circle"></i> <span th:text="#{ivr.btn.apply}">应用</span>
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-tree-table"></table>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var addFlag = [[${@permission.hasPermi('cc:ivr:add')}]];
    var editFlag = [[${@permission.hasPermi('cc:ivr:edit')}]];
    var removeFlag = [[${@permission.hasPermi('cc:ivr:remove')}]];
    var datas = [[${@dict.getType('sys_show_hide')}]];
    var prefix = ctx + "cc/ivr";

    $(function() {
        var options = {
            code: "id",
            parentCode: "parentNodeId",
            uniqueId: "id",
            expandAll: true,
            expandFirst: false,
            expandColumn: 0,
            url: prefix + "/list",
            createUrl: prefix + "/add/{id}",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove/{id}",
            modalName: i18n('ivr.modalName'),
            columns: [
                {
                    title: i18n('ivr.table.ivrNodeName'),
                    field: 'ivrNodeName',
                    width: '25',
                    widthUnit: '%',
                    // 修改：添加 formatter 检查 enabled 状态
                    formatter: function(value, row, index) {
                        if (row.enabled === 0) {
                            return '<span style="color: #e0a800;" data-toggle="tooltip" title="该节点没有启用">' + value + '</span>';
                        }
                        return value;
                    }
                },
                {
                    field: 'digit',
                    title: i18n('ivr.table.digit'),
                    width: '10',
                    widthUnit: '%',
                    align: "left",
                    formatter: function(value, row, index) {
                        if (value < 0) {
                            return '';
                        } else {
                            return value;
                        }
                    }
                },
                {
                    field: 'ttsText',
                    title: i18n('ivr.table.ttsText'),
                    width: '35',
                    widthUnit: '%',
                    align: "left"
                },
                {
                    field: 'action',
                    title: i18n('ivr.table.action'),
                    width: '15',
                    widthUnit: '%',
                    align: "left",
                    formatter: function(value, row, index) {
                        // 根据action值显示对应的国际化文本
                        var actionText = '';
                        switch(value) {
                            case 'play':
                                actionText = i18n('ivr.form.action.play');
                                break;
                            case 'acd':
                                actionText = i18n('ivr.form.action.acd');
                                break;
                            case 'extension':
                                actionText = i18n('ivr.form.action.extension');
                                break;
                            case 'gateway':
                                actionText = i18n('ivr.form.action.gateway');
                                break;
                            case 'hangup':
                                actionText = i18n('ivr.form.action.hangup');
                                break;
                            case 'playAndGetDigits':
                                actionText = i18n('ivr.form.action.playAndGetDigits');
                                break;
                            default:
                                actionText = value || '';
                        }
                        return actionText;
                    }
                },
                {
                    title: i18n('ivr.table.opra'),
                    width: '15',
                    widthUnit: '%',
                    align: "left",
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>' + i18n('btn.edit') + '</a> ');
                        if (row.action === 'play') {
                            actions.push('<a class="btn btn-info btn-xs ' + addFlag + '" href="javascript:void(0)" onclick="$.operate.add(\'' + row.id + '\')"><i class="fa fa-plus"></i>' + i18n('btn.add') + '</a> ');
                        }
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-trash"></i>' + i18n('btn.del') + '</a>');
                        return actions.join('');
                    }
                }],
            // 修改：添加 onPostBody 事件初始化 tooltip
            onPostBody: function() {
                $('[data-toggle="tooltip"]').tooltip();
            }
        };
        $.treeTable.init(options);

        // 新增：监听展开/收起事件，动态更新颜色
        $('#bootstrap-tree-table').on('click', 'span.treetable-expander', function() {
            setTimeout(updateRowColors, 100); // 延迟确保DOM更新完成
        });

        // 页面加载完成后立即更新颜色
        setTimeout(function() {
            updateRowColors();
        }, 300); // 延迟确保DOM渲染完成

    });

    function applyIvrConfig() {
        // 显示确认对话框
        var confirmMessage = i18n("ivr.apply.confirmMessage");
        $.modal.confirm(confirmMessage, function () {
                // 发送POST请求到reload接口
                $.ajax({
                    url: prefix + "/reload",
                    type: "GET",
                    dataType: "json",
                    success: function(result) {
                        if (result.code === 0) {
                            $.modal.msgSuccess(result.msg);
                        } else {
                            $.modal.msgError(result.msg || "未知错误");
                        }
                    },
                    error: function(xhr, status, error) {
                        $.modal.msgError("网络请求失败: " + error);
                    }
                });
        })
    }

    // 更新行颜色：根节点交替着色，子节点继承父节点颜色
    function updateRowColors() {
        var $tbody = $('#bootstrap-tree-table tbody');

        // 清除所有颜色类
        $tbody.find('tr').removeClass('row-color-odd row-color-even');

        // 获取所有根节点（pid="row_root" 的行）
        var rootRows = $tbody.find('tr[pid="row_root"]');

        // 为根节点应用交替颜色
        rootRows.each(function(index) {
            var $row = $(this);
            var colorClass = index % 2 === 0 ? 'row-color-odd' : 'row-color-even';

            $row.addClass(colorClass);

            // // 检查是否展开（有 glyphicon-chevron-down 类）
            // if ($row.find('span.treetable-expander').hasClass('glyphicon-chevron-down')) {
            //     var rowId = $row.attr('id'); // 如 "row_id_0"
            //
            //     // 查找所有直接子节点和间接子节点
            //     var allChildRows = $tbody.find('tr[pid="' + rowId + '"]');
            //     allChildRows.addClass(colorClass);
            //
            //     // 处理多级子节点（递归查找）
            //     allChildRows.each(function() {
            //         var childId = $(this).attr('id');
            //         var subChildRows = $tbody.find('tr[pid="' + childId + '"]');
            //         subChildRows.addClass(colorClass);
            //     });
            // }
        });
    }
</script>
</body>
</html>