<style type="text/css">
.panel-body-container {
    position: relative;
    min-height: 100px;
}

.edit-area {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.edit-area > textarea {
    width: 100%;
    height: 100%;
}

.pannel-option > * {
    margin-left: 10px;
}

.pannel-option .save,
.pannel-option .cancle {
    display: none;
}

.pannel-option.pannel-edit .edit {
    display: none;
}

.pannel-option.pannel-edit .cancle,
.pannel-option.pannel-edit .save {
    display: inline;
}

.edit-area {
    display: none;
}
</style>

<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><a href="/servers">Projects</a></li>
            </ul>
            <h4>客户端预加载清单</h4>
        </div>
    </div>
    <!-- media -->
</div>

<div class="contentpanel task-panel" style="padding-bottom:0;">
    <!-- pageheader -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="pull-right pannel-option">
                <a href="javascript:;" class="tooltips edit">编辑</a>
                <a href="javascript:;" class="tooltips save">保存</a>
                <a href="javascript:;" class="tooltips cancle">取消</a>
            </div>
            <h4 class="panel-title">预加载清单</h4>
        </div>
        <div class="panel-body">
            <div class="panel-body-container">
                <div id="edit-area" class="edit-area">
                    <textarea id="textarea" class="form-control" pleaceholder="支持多条换行输入"></textarea>
                </div>
                <div id="static-list" class="static-list"></div>
            </div>
        </div>
    </div>
</div>

<script>
    var files = [];
    var revision = ''

    function resetManifest(list) {
        files = list || [];

        var h = '';

        for (var i = 0; i < files.length; i++) {
            h += '<p>' + files[i] + '</p>';
        }

        $('#static-list').html(h);
    }

    function getManifest(file) {
        $.get(file + '?t=' + new Date().getTime(), function(res) {
            if (res && res.files) {
                resetManifest(res.files);
                revision = res.revision;
            };
        });
    }

    function clearCache(url) {
        var cloud = ['qiniu', 'qcloud', 'aliyun'];

        cloud.forEach(function(val) {
            $.post('/cdn_cache/clear', {
                query_uri: url,
                object_type: 'File',
                cloud: val
            });
        });
    }

    $('.pannel-option').on('click', '.tooltips', function() {
        var $this = $(this),
            $par = $this.parent(),
            $edit = $('#edit-area');

        $par.toggleClass('pannel-edit');

        if ($this.hasClass('save')) {
            var _files = $('#textarea').val().split('\n');
            $.post('/precache/client/save', {
                files: _files,
                lastRevision: revision
            }, function(res) {
                if (res.code === 200) {
                    getManifest(res.data.url);
                    clearCache(res.data.url);
                    $edit.hide();
                } else {
                    $par.addClass('pannel-edit');
                    alert(res.message || '保存失败');
                }
            });
        } else if ($this.hasClass('edit')) {
            $('#textarea').val(files.join('\n'));
            $edit.show();
        } else {
            $edit.hide();
        }
    });

    getManifest('//cdn.yoho.cn/{{manifestPath}}');
</script>