{template "header.html"}

<div class="note note-info">
    <p><strong>{dr_lang('物理目录')}</strong>：{$dir}</p>
    <p class="mb-0"><strong>{dr_lang('访问地址')}</strong>：{$url}</p>
</div>

<div class="right-card-box">
    <div class="row" style="margin-bottom:12px;">
        <div class="col-md-12">
            <ul class="list-inline" style="margin:0;padding:8px 12px;background:#f5f5f5;border-radius:4px;border:1px solid #e7e7e7;">
                {loop $breadcrumb $c}
                <li style="margin:0 2px;display:inline-block;">
                    {if $c.path != $rel}
                    <a href="{dr_url($uriprefix.'/index', ['path' => $c.path])}">{$c.name}</a>
                    {else}
                    <strong>{$c.name}</strong>
                    {/if}
                </li>
                {if $c.path != $rel}
                <li style="margin:0 2px;display:inline-block;color:#999;">/</li>
                {/if}
                {/loop}
            </ul>
        </div>
    </div>

    <div class="bootstrap-table bootstrap-table2" style="margin-bottom:12px;">
        <div id="toolbar" class="toolbar">
            {if $ci->_is_admin_auth('edit')}
            <link href="{ROOT_THEME_PATH}assets/global/plugins/jquery-fileupload/css/jquery.fileupload.css" rel="stylesheet" type="text/css" />
            <script src="{ROOT_THEME_PATH}assets/global/plugins/jquery-fileupload/js/jquery.fileupload.js" type="text/javascript"></script>
            <form id="dir-replace-csrf" style="display:none;">{dr_form_hidden()}</form>
            {/if}
            <div class="dir-toolbar-btns" style="display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;">
            {if $ci->_is_admin_auth('edit')}
                <form id="dir-upload-form" style="display:inline-flex;align-items:center;margin:0;padding:0;border:0;background:transparent;vertical-align:middle;">
                    {dr_form_hidden(['path' => $rel])}
                    <label class="dev" id="dir-fileupload" style="margin:0;display:inline-flex;align-items:center;">
                        <a href="javascript:;" class="fileinput-button btn blue btn-sm" style="margin:0;"><i class="fa fa-upload"></i> {dr_lang('上传')}<input type="file" multiple name="file_data"></a>
                    </label>
                    <span class="fileupload-progress text-muted" style="margin-left:4px;"></span>
                </form>
                <button type="button" class="btn green btn-sm" style="margin:0;flex-shrink:0;" onclick="dr_attachment_dir_mkdir();"><i class="fa fa-folder"></i> {dr_lang('新建文件夹')}</button>
            {/if}
            {if $ci->_is_admin_auth('del')}
                <button type="button" class="btn red btn-sm" style="margin:0;flex-shrink:0;" onclick="dr_ajax_option('{$dir_delete_url}', '{$dir_js.confirm_del}', 0)"><i class="fa fa-trash"></i> {dr_lang('删除所选')}</button>
            {/if}
                <button type="button" class="btn default btn-sm" style="margin:0;flex-shrink:0;" onclick="window.location.reload(true);" title="{dr_lang('刷新')}"><i class="fa fa-refresh"></i> {dr_lang('刷新')}</button>
            </div>
            {if $ci->_is_admin_auth('edit')}
            <script type="text/javascript">
                $(function() {
                    $("#dir-fileupload").fileupload({
                        disableImageResize: false,
                        autoUpload: true,
                        maxFileSize: "{$upload.param.size}",
                        url: "{$upload.url}",
                        dataType: "json",
                        acceptFileTypes: /./i,
                        maxChunkSize: 2000000000,
                        progressall: function (e, data) {
                            var progress = parseInt(data.loaded / data.total * 100, 10);
                            $("#dir-fileupload").closest("form").find(".fileupload-progress").show().html(progress + "%");
                        },
                        add: function (e, data) {
                            $("#dir-fileupload").closest("form").find(".fileupload-progress").hide();
                            data.formData = $("#dir-upload-form").serializeArray();
                            data.submit();
                        },
                        done: function (e, data) {
                            $("#dir-fileupload").closest("form").find(".fileupload-progress").hide();
                            var r = data.result;
                            if (typeof r === "string") { try { r = JSON.parse(r); } catch (err) {} }
                            if (r && r.code > 0) {
                                dr_tips(r.code, r.msg);
                                setTimeout(function() { window.location.reload(true); }, 800);
                            } else if (r) {
                                dr_tips(r.code, r.msg, -1);
                            } else {
                                dr_tips(0, '{$dir_js.upload_fail}', -1);
                            }
                        },
                        fail: function (e, data) {
                            $("#dir-fileupload").closest("form").find(".fileupload-progress").hide();
                            dr_tips(0, data.errorThrown || '{$dir_js.upload_fail}', -1);
                        }
                    });
                    $(".dir-replace-wrap").each(function() {
                        var $w = $(this);
                        $w.fileupload({
                            url: "{$dir_replace_url}",
                            dataType: "json",
                            autoUpload: true,
                            maxFileSize: "{$upload.param.size}",
                            maxChunkSize: 2000000000,
                            add: function (e, data) {
                                var fd = $("#dir-replace-csrf").serializeArray();
                                fd.push({name: "replace", value: $w.attr("data-replace-path")});
                                data.formData = fd;
                                data.submit();
                            },
                            done: function (e, data) {
                                var r = data.result;
                                if (typeof r === "string") { try { r = JSON.parse(r); } catch (err2) {} }
                                if (r && r.code > 0) {
                                    dr_tips(r.code, r.msg);
                                    setTimeout(function() { window.location.reload(true); }, 600);
                                } else if (r) {
                                    dr_tips(r.code, r.msg, -1);
                                } else {
                                    dr_tips(0, '{$dir_js.upload_fail}', -1);
                                }
                            },
                            fail: function (e, data) {
                                dr_tips(0, data.errorThrown || '{$dir_js.upload_fail}', -1);
                            }
                        });
                    });
                });
            </script>
            {/if}
        </div>
    </div>

    <form class="form-horizontal" role="form" id="myform">
        {dr_form_hidden()}
        <div class="table-scrollable">
            <table class="table table-striped table-bordered table-hover table-checkable dataTable">
                <thead>
                <tr class="heading">
                    <th class="myselect" width="50">
                        <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                            <input type="checkbox" class="group-checkable" data-set=".checkboxes" />
                            <span></span>
                        </label>
                    </th>
                    <th width="55%">{dr_lang('名称')}</th>
                    <th width="12%">{dr_lang('类型')}</th>
                    <th width="13%">{dr_lang('大小')}</th>
                    <th width="20%">{dr_lang('修改时间')}</th>
                </tr>
                </thead>
                <tbody>
                {if $rel}
                <tr>
                    <td></td>
                    <td colspan="4">
                        <a href="{dr_url($uriprefix.'/index', ['path' => $parent_rel])}"><i class="fa fa-level-up"></i> ..</a>
                    </td>
                </tr>
                {/if}
                {loop $dirs $t}
                <tr>
                    <td class="myselect">
                        <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                            <input type="checkbox" class="checkboxes" name="paths[]" value="{$t.path}" />
                            <span></span>
                        </label>
                    </td>
                    <td><i class="fa fa-folder text-warning"></i>
                        <a href="{dr_url($uriprefix.'/index', ['path' => $t.path])}">{$t.name}</a>
                    </td>
                    <td>{dr_lang('文件夹')}</td>
                    <td class="dir-folder-size text-muted" data-path="{$t.path_esc}" title="{dr_lang('含子目录的全部文件大小')}" data-loading="0" style="cursor:pointer;">{dr_lang('点击计算')}</td>
                    <td>{dr_date($t.mtime, null, 'red')}</td>
                </tr>
                {/loop}
                {loop $files $t}
                <tr>
                    <td class="myselect">
                        <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                            <input type="checkbox" class="checkboxes" name="paths[]" value="{$t.path}" />
                            <span></span>
                        </label>
                    </td>
                    <td>
                        {if $t.is_image}
                        <img src="{$t.url}" style="max-width:28px;max-height:28px;vertical-align:middle;margin-right:6px;" />
                        <a href="javascript:dr_preview_image('{$t.url}');">{$t.name}</a>
                        {elseif $t.is_mp4}
                        <i class="fa fa-file-o text-muted"></i>&nbsp;
                        <a href="javascript:dr_preview_video('{$t.url}');">{$t.name}</a>
                        {else}
                        <i class="fa fa-file-o text-muted"></i>&nbsp;
                        <a href="javascript:dr_preview_url('{$t.url}');">{$t.name}</a>
                        {/if}
                        <a class="btn btn-xs default" style="margin-left:6px;vertical-align:middle;" href="{$t.url}" target="_blank" rel="noopener noreferrer" title="{dr_lang('新窗口打开')}"><i class="fa fa-external-link"></i></a>
                        {if $ci->_is_admin_auth('edit')}
                        <span class="fileinput-button btn btn-xs green dir-replace-wrap" style="margin-left:6px;position:relative;vertical-align:middle;" data-replace-path="{$t.path_esc}">
                            <i class="fa fa-refresh"></i> {dr_lang('重传')}<input type="file" name="file_data">
                        </span>
                        {/if}
                    </td>
                    <td>{if $t.ext}{$t.ext}{else}{dr_lang('文件')}{/if}</td>
                    <td>{dr_format_file_size($t.size)}</td>
                    <td>{dr_date($t.mtime, null, 'red')}</td>
                </tr>
                {/loop}
                {if !$dirs && !$files && !$rel}
                <tr><td colspan="5" class="text-center text-muted">{dr_lang('暂无文件')}</td></tr>
                {elseif !$dirs && !$files}
                <tr><td colspan="5" class="text-center text-muted">{dr_lang('当前文件夹为空')}</td></tr>
                {/if}
                </tbody>
            </table>
        </div>
    </form>
</div>

<form id="dir-mkdir-data" style="display:none;">
    {dr_form_hidden(['path' => $rel])}
    <input type="hidden" name="name" id="dr_mkdir_name" value="" />
</form>

<script type="text/javascript">
function dr_attachment_dir_mkdir() {
    layer.prompt({
        title: '{$dir_js.mkdir_title}',
        formType: 0,
        maxlength: 80
    }, function (name, index) {
        layer.close(index);
        name = $.trim(name);
        if (!name) {
            dr_tips(0, '{$dir_js.name_empty}', -1);
            return;
        }
        $('#dr_mkdir_name').val(name);
        var loading = layer.load(2, {shade: [0.3,'#fff'], time: 100000000});
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '{$dir_mkdir_url}',
            data: $('#dir-mkdir-data').serialize(),
            success: function (json) {
                layer.close(loading);
                if (json.token) {
                    $("#myform input[name='"+json.token.name+"']").val(json.token.value);
                }
                dr_cmf_tips(json.code, json.msg, json.data ? json.data.time : 0);
                if (json.code) {
                    setTimeout(function () { window.location.reload(true); }, 600);
                }
            },
            error: function (HttpRequest, ajaxOptions, thrownError) {
                layer.close(loading);
                dr_ajax_alert_error(HttpRequest, this, thrownError);
            }
        });
    });
}
</script>
{if $dirs}
<script type="text/javascript">
$(function() {
    $('.dir-folder-size').on('click', function() {
        var $td = $(this);
        if ($td.attr('data-loaded') == '1' || $td.attr('data-loading') == '1') {
            return;
        }
        var path = $td.data('path');
        if (path === undefined || path === null) {
            $td.removeClass('text-muted').html('—');
            return;
        }
        $td.attr('data-loading', '1').html('<i class="fa fa-spinner fa-spin"></i> {dr_lang("计算中")}');
        $.ajax({
            url: '{$dir_folder_size_url}',
            type: 'GET',
            dataType: 'json',
            data: { path: path },
            success: function(json) {
                if (json.code > 0 && json.data && json.data.size_text !== undefined) {
                    $td.removeClass('text-muted').attr('data-loaded', '1').attr('data-loading', '0').css('cursor', 'default').html(json.data.size_text);
                } else {
                    $td.attr('data-loading', '0').html('<span class="text-muted">—</span>');
                }
            },
            error: function() {
                $td.attr('data-loading', '0').html('<span class="text-muted">—</span>');
            }
        });
    });
});
</script>
{/if}

{template "footer.html"}