<link rel="stylesheet" href="<?php echo base_url();?>public/js/vendor/smalot_bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
<script src="<?php echo base_url();?>public/js/vendor/smalot_bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="<?php echo base_url();?>public/js/vendor/smalot_bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<style>
    .fixed-table-toolbar {
        display: none;
    }

    .fileinput-button {
        position: relative;
        top: -5px;
    }

    .fileinput-button input{
        position:absolute;
        top: 0px;
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
    }
</style>
<div id="msg-tip">

</div>
<div class="content_wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <section style="width: 45%;display: inline-block">
                        <div class="container-fluid">
                            <input type="button" style="display: none;margin-bottom: 10px;width: 80px;" class="btn btn-info" value="上传" id="btn"/>
                            <span id="filespan" class="btn btn-info fileinput-button">
                                <span id="filespan2">上传RemoteAssets文件</span>
                                <input type="file" id="upfile">
                            </span>
                        </div>
                    </section>
                    <section style="width: 45%;display: inline-block">
                        <div class="container-fluid">
                            <input type="button" style="display: none;margin-bottom: 10px;width: 80px;" class="btn btn-info" value="上传" id="btn2"/>
                            <span id="file2-1" class="btn btn-info fileinput-button">
                                <span id="file2-2">上传ThemesAssets文件</span>
                                <input type="file" id="upfile2">
                            </span>
                        </div>
                    </section>
                    <section style="width: 45%;display: inline-block">
                        <div class="container-fluid">
                            <input type="button" style="display: none;margin-bottom: 10px;width: 80px;" class="btn btn-info" value="上传" id="btn3"/>
                            <span id="file3-1" class="btn btn-info fileinput-button">
                                <span id="file3-2">上传自定义文件</span>
                                <input type="file" id="upfile3">
                            </span>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <header><i class="fa fa-fw fa-file"></i>资源管理</header>
                    <section>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="table-responsive">
                                        <table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                                            <thead>
                                            <tr>
                                                <th>操作用户</th>
                                                <th>压缩文件</th>
                                                <th>文件名</th>
                                                <th>操作时间</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <?php foreach($action as $k => $v) { ?>
                                                <tr>
                                                    <td><?php echo $v['uploader'];?></td>
                                                    <td><?php echo $v['zipPath'];?></td>
                                                    <td><?php echo $v['filename']?></td>
                                                    <td><?php echo date('Y-m-d H:i:s', $v['createTime']);?></td>
                                                    <td><button class="btn btn-sm btn-primary" onclick="preloadCDN('/config/<?=$v['filename']?>')">预热</button></td>
                                                </tr>
                                            <?php } ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $("#btn").click(function(){
        var formData = new FormData();
        formData.append("file",document.getElementById("upfile").files[0]);
        $.ajax({
            type: "POST", // 数据提交类型
            url: "Debug/actionFileUpload/RemoteAssets", // 发送地址
            data: formData, //发送数据
            async: true, // 是否异步
            processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            contentType: false, //
            xhr: function() {        //ajax进度条，直接拿过去就可以用
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener("progress", function (e) {
                        var loaded = e.loaded; //已经上传大小情况
                        var tot = e.total; //附件总大小
                        var per = Math.floor(100 * loaded / tot); //已经上传的百分比
                        console.log(per)
                        $('#progress-bar').css('width',per+'%');
                    }, false);
                    return xhr;
                }
            },
            success: function(data) { // 成功回调
                data = JSON.parse(data);
                if(data.ret == 0){
                    window.location.reload();
                }else {
                    alert(data.msg)
                }
            }
        });
    });

    $("#filespan").on("change", "input[type='file']", function() {
        var filePath = $(this).val();
        if (filePath) {
            $('#filespan2').html(filePath);
            $('#btn').show();
        } else {
            $('#filespan2').html("上传资源文件");
            $('#btn').hide();
        }
    });


    $("#btn2").click(function(){
        var formData = new FormData();
        formData.append("file",document.getElementById("upfile2").files[0]);
        $.ajax({
            type: "POST", // 数据提交类型
            url: "Debug/actionFileUpload/ThemesAssets", // 发送地址
            data: formData, //发送数据
            async: true, // 是否异步
            processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            contentType: false, //
            xhr: function() {        //ajax进度条，直接拿过去就可以用
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener("progress", function (e) {
                        var loaded = e.loaded; //已经上传大小情况
                        var tot = e.total; //附件总大小
                        var per = Math.floor(100 * loaded / tot); //已经上传的百分比
                        console.log(per)
                        $('#progress-bar').css('width',per+'%');
                    }, false);
                    return xhr;
                }
            },
            success: function(data) { // 成功回调
                data = JSON.parse(data);
                if(data.ret == 0){
                    window.location.reload();
                }else {
                    alert(data.msg)
                }
            }
        });
    });
    $("#btn3").click(function(){
        var formData = new FormData();
        var updateObj = document.getElementById("upfile3").files[0];
        formData.append("file",updateObj);
        var fileName=updateObj.name.substring(0,updateObj.name.indexOf("."));
        $.ajax({
            type: "POST", // 数据提交类型
            url: "Debug/actionFileUpload/"+fileName, // 发送地址
            data: formData, //发送数据
            async: true, // 是否异步
            processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            contentType: false, //
            xhr: function() {        //ajax进度条，直接拿过去就可以用
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener("progress", function (e) {
                        var loaded = e.loaded; //已经上传大小情况
                        var tot = e.total; //附件总大小
                        var per = Math.floor(100 * loaded / tot); //已经上传的百分比
                        console.log(per)
                        $('#progress-bar').css('width',per+'%');
                    }, false);
                    return xhr;
                }
            },
            success: function(data) { // 成功回调
                data = JSON.parse(data);
                if(data.ret == 0){
                    window.location.reload();
                }else {
                    console.log(data);
                    alert(data.msg)
                }
            }
        });
    });

    $("#file2-1").on("change", "input[type='file']", function() {
        var filePath = $(this).val();
        if (filePath) {
            $('#file2-2').html(filePath);
            $('#btn2').show();
        } else {
            $('#file2-2').html("上传资源文件");
            $('#btn2').hide();
        }
    });
    $("#file3-1").on("change", "input[type='file']", function() {
        var filePath = $(this).val();
        if (filePath) {
            $('#file3-2').html(filePath);
            $('#btn3').show();
        } else {
            $('#file3-2').html("上传资源文件");
            $('#btn3').hide();
        }
    });

    preloadCDN = (file)=>{
        console.log(file)
        $.post('/config/preloadCDNByFile',{file:file}, response=>{
            console.log(response)
            alert(response.msg)
        })
    }
</script>