<div class="pageheader">
    <div class="media">
        <div class="pageicon pull-left">
            <i class="fa fa-th-list"></i>
        </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
                <li>静态资源</li>
            </ul>
            <h4>活动上传</h4>
        </div>
    </div>
    <!-- media -->
</div>
<!-- pageheader -->
<div class="contentpanel">
    <div class="row">
        <div class="col-sm-12">
            <div class="form-horizontal">
                <div class="form-group col-sm-12">
                    <label class="control-label col-sm-1">上传地址：</label>
                    <div class="col-sm-6">
                        <div class="input-group">
                            <span class="input-group-addon">https://huodong.yoho.cn/</span>
                            <input id="actPath" type="text" class="form-control col-sm-10" placeholder="请输入上传地址">
                            <span class="input-group-addon">/index.html</span>
                        </div>
                    </div>
                </div>
                <div class="form-group col-sm-12">
                    <label class="control-label col-sm-1">上传文件：</label>
                    <div class="col-sm-3">
                        <input type="file" accept="application/x-zip-compressed" name="file" id="fileInput" class="btn btn-default btn-block">
                        <p class="form-control-static">注：仅支持zip格式</p>
                        <button id="upload" class="btn btn-primary btn-block">上传</button>
                    </div>
                </div>
                <div class="form-group col-sm-12">
                    <label class="control-label col-sm-1">上传日志：</label>
                    <div class="col-sm-8">
                        <div class="logs panel-body yoho-log-dark" style="height: 150px; overflow-y: scroll; color: #fff;"></div>
                    </div>
                </div>
                <div class="form-group col-sm-12">
                    <label class="control-label col-sm-1">上传记录：</label>
                    <div class="col-sm-11">
                        <table id="upload-list" style="word-break: break-all;" class="table table-bordered table-hover">
                            <tr class="title">
                                <th style="text-align:center;">活动地址</th>
                                <th style="text-align:center;">文件名称</th>
                                <th style="text-align:center;">上传时间</th>
                                <th style="text-align:center;">上传用户</th>
                                <th style="text-align:center;">操作</th>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="form-group col-sm-12">
                    <div class="col-sm-11 col-sm-offset-1" style="text-align: center;">
                        <a class="btn btn-primary more-list">加载更多记录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    let $uploadList = $('#upload-list tbody');
    let marker = '';
    let page = 1;

    $('#upload').on('click', function() {
        var formData = new FormData();
        var file = $('#fileInput').prop('files')[0];
        var actPath = $('#actPath').val();

        if (!$('#actPath').val()) {
            $('.logs').prepend('<p>state: 请输入上传地址！</p>');
            return false;
        }
        actPath = `/${actPath}`;
        formData.append('file', file);
        formData.append('actPath', actPath);
        $.ajax({
            type: 'POST',
            url: '/files/upload',
            cache: false,
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function(result) {
                if (result) {
                    if (result.code === 200) {
                        $('.logs').prepend('<p>state: 上传完成！</p>');
                        $('#upload-list tr[class!=title]').remove();
                        page = 1;
                        getList();
                    } else if (result.code === 400) {
                        $('.logs').prepend('<p>state: 请选择上传文件！</p>');
                    } 
                } else {
                    $('.logs').prepend('<p>state: 请稍后再试！</p>');
                }
            }
        });
    });

    // 上传记录列表
    function getList(){
        $.ajax({
            type: 'GET',
            url: '/files/listlogs',
            cache: false,
            dataType: 'json',
            data: {
                page: page++
            },
            success: function(result) {
                if (result && result.data && result.data.length > 0) {
                    let $uploadList = $('#upload-list > tbody');

                    result.data.forEach(function(item){
                        $uploadList.append(`
                            <tr>
                                <td><a href="${item.actPath}">${item.actPath}</a></td>
                                <td style="text-align:center;">${item.fileName}</td>
                                <td style="text-align:center;">${item.date}</td>
                                <td style="text-align:center;">${item.username}</td>
                                <td style="text-align: center;">
                                    <a class="detail-btn btn btn-warning btn-block" data-path="${item.actPath}">展开详情</a>
                                    <a class="get-more btn btn-success btn-block hide" data-path="${item.actPath}">加载更多</a>
                                </td>
                            </tr>
                            <tr class="detail-c hide">
                                <td colspan=5>
                                    <table class="table table-bordered detail-table">
                                        <tr>
                                            <th style="text-align: center">文件路径</th>
                                            <th style="text-align: center">文件大小</th>
                                            <th style="text-align: center">文件格式</th>
                                            <th style="text-align: center">上传时间</th>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        `);
                    });
                } else {
                    $('.more-list').hide();
                }
            }
        });
    };

    // 上传记录详情
    function getDetail(e, marker) {
        let $this = $(e.currentTarget);
        let path = $this.data('path');
        let $uploadDetail = $this.parents('tr');
        let detail = '';

        $.ajax({
            type: 'GET',
            url: '/files/listfiles',
            cache: false,
            dataType: 'json',
            data: {
                actPath: `${path}`,
                marker: marker
            },
            success: (result) => {
                if (result && result.data &&result.data.items) {
                    if ($this.parents('td').find('.get-more').attr('data-marker') === result.data.marker) {
                        $this.parents('td').find('.get-more').remove();
                        return false;
                    }
                    $this.parents('td').find('.get-more').attr('data-marker', result.data.marker);
                    result.data.items.forEach(function(item){
                        detail += `<tr class="detail-list">
                            <td><a href="${item.link}">${item.key}</a></td>
                            <td style="text-align:center;">${item.fsizekb}</td>
                            <td style="text-align:center;">${item.mimeType}</td>
                            <td style="text-align:center;">${item.putTimeFormat}</td>
                        </tr>`;
                    });
                    $uploadDetail.next('.detail-c').find('.detail-table tbody').append(detail);
                    $this.parents('td').find('.get-more').removeClass('hide');
                }
            }
        });
    }

    // 加载更多列表
    $('.more-list').on('click', function() {
        getList();
    })

    // 上传记录详情，插入tr
    $uploadList.on('click', '.detail-btn', function(e) {
        let $this = $(e.currentTarget);
        let $detailC = $this.parents('tr').next('.detail-c');
        let $detailList = $this.parents('tr').next('.detail-c').find('.detail-list');

        if ($detailC.is(':hidden')) {
            $('.detail-c').addClass('hide');
            $detailC.removeClass('hide');
            $('.detail-btn').text('展开详情');
            $this.text('关闭详情');
            if ($detailList.length <= 0) {
                getDetail(e, marker);
            } else if ($detailC.find('.detail-list').length > 0) {
                $this.siblings('.get-more').removeClass('hide');
            }
        } else {
            $detailC.addClass('hide');
            $this.text('展开详情');
            $this.siblings('.get-more').addClass('hide');
        }
    });

    // 加载更多
    $uploadList.on('click', '.get-more', function(e) {
        let $this = $(e.currentTarget);
        let marker = $this.data('marker');

        getDetail(e, marker);
    })

    // 打印日志
    $(() => {
        var ws = io();
        ws.on('connect', function() {
            ws.on('/upload', function(data) {
                $('.logs').prepend(`<p>state: ${data.state}</p>`);
            });
        });

        getList();
    });
</script>