<?php viewLoad('public/header'); ?>
<script src="<?=Mvc::$cfg['staticUrl']?>/js/lib/dxGrid.js"></script>

<div style="margin-bottom:12px;">
    <button id="scanBtn"><?=lg('扫描')?></button>
    <span id="scanResult" style="margin-left:10px;color:#666;"></span>
</div>

<div style="margin-bottom:12px;">
    <label><?=lg('语言文件')?>:</label>
    <select id="fileSelect"></select>
</div>

<div id="langGrid"></div>

<script>
$(function () {
    function loadFiles() {
        return $.get(APP.HOST + '/langTool/files').then(function (res) {
            var $select = $('#fileSelect').empty();
            (res.data || []).forEach(function (file) {
                $select.append($('<option>').val(file).text(file));
            });
            if (res.data && res.data.length) {
                loadGrid(res.data[0]);
            }
        });
    }

    function loadGrid(file) {
        $.ajax({
            url: APP.HOST + '/langTool/grid',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ file: file })
        }).then(function (res) {
            var rows = (res.data && res.data.data) || [];
            var $grid = $('#langGrid');

            if ($grid.data('dxDataGrid')) {
                $grid.dxDataGrid('option', 'dataSource', rows);
            } else {
                $grid.dxDataGrid({
                    dataSource: rows,
                    showBorders: true,
                    height: function () { return dxAutoHeight('#langGrid'); },
                    columnAutoWidth: true,
                    filterRow: { visible: true },
                    filterPanel: { visible: true },
                    paging: { pageSize: 20 },
                    editing: {
                        mode: 'row',
                        allowUpdating: true,
                        allowAdding: false,
                        allowDeleting: false,
                        useIcons: true
                    },
                    columns: [
                        { dataField: 'key', caption: '<?=lg('中文原文')?>', allowEditing: false },
                        { dataField: 'value', caption: '<?=lg('翻译')?>' }
                    ],
                    onRowUpdated: function (e) {
                        $.ajax({
                            url: APP.HOST + '/langTool/save',
                            method: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify({
                                file: $('#fileSelect').val(),
                                key: e.data.key,
                                values: { value: e.data.value }
                            })
                        });
                    }
                });
            }
        });
    }

    $('#fileSelect').on('change', function () {
        loadGrid($(this).val());
    });

    $('#scanBtn').on('click', function () {
        $('#scanResult').text('<?=lg('扫描中')?>...');
        $.ajax({
            url: APP.HOST + '/langTool/scan',
            method: 'POST',
            contentType: 'application/json',
            data: '{}'
        }).then(function (res) {
            var files = res.data.files || {};
            var text = '<?=lg('共')?> ' + res.data.keys + ' <?=lg('个文案')?>; ';
            Object.keys(files).forEach(function (f) {
                text += f + ': +' + files[f].added + ' / -' + files[f].removed + '  ';
            });
            $('#scanResult').text(text);
            loadFiles();
        });
    });

    loadFiles();
});
</script>

<?php viewLoad('public/footer'); ?>
