{% extends "../main.html" %}
{% block title %}自定义文件上传{% end %}
{% block css %}
<link rel="stylesheet" href="{{ static_url('libs/dropzone/dist/min/basic.min.css') }}" type="text/css"/>
<link rel="stylesheet" href="{{ static_url('libs/dropzone/dist/min/dropzone.min.css') }}" type="text/css"/>
{% end %}
{% block content %}
<style>
    ::-webkit-scrollbar {
        display: none;
    }

    .data-list {
        background: #fff0;
    }

    .column-list {
        font-size: 0.8rem;
        font-weight: 700;
    }

    .setkey, .modify {
        font-size: 0.6rem;
        width: 100px;
    }

    .main-key {
        margin-left: 5px;
        margin-bottom: 5px;
        cursor: pointer;
    }

    .notie-background-success {
        background-color: #57BF57;
    }

    .notie-background-error {
        background-color: #E1715B;
    }

    .notie-background-warning {
        background-color: #D6A14D;
    }

    .mkey-dropdown {
        padding: 0;
        min-width: 0;
    }

    .mkey-dropdown a {
        padding: 0.4rem 1.0rem;
        font-size: 0.5rem;
        font-weight: 700;
    }

    .mkey-dropdown hr {
        margin: 0;
    }

    .item-mkey {
        display: inline;
    }
</style>
<div class="d-flex flex fixed-content">
    <div class="fade aside aside-sm" id="content-aside">
        <div class="modal-dialog d-flex flex-column w-md bg-body" id="user-nav">

            <div class="navbar">
                <!--<span class="mtext-d mx-2">域名列表</span>-->

            </div>
            <div class="scrollable hover">
                <div class="sidenav p-2">
                    <nav class="nav-active-text-primary" data-nav>
                        <ul class="nav">
                            <span class="mtext-d mx-2">域名列表</span>
                            <li><a href="#">
                                <span class="mx-2" style="color: ghostwhite"></span>
                                <span class="nav-text" style="color: ghostwhite"></span>
                                <label class="ui-check m-0 ">
                                    <input type="checkbox" id="all_select" value="1" onclick="all_select()">
                                    <i></i>
                                </label>
                            </a></li>
                            {% for domain in domains %}
                            <li>
                                <a href="#">
                                    <span class="mx-2"><b class="badge badge-circle sm text-primary"></b></span>
                                    <span class="nav-text">{{domain}}</span>
                                    <label class="ui-check m-0 ">
                                        <input type="checkbox" class="domain_select" value="{{domain}}">
                                        <i></i>
                                    </label>
                                </a>
                            </li>
                            {% end %}

                        </ul>
                    </nav>
                </div>
            </div>
            <!-- / -->
        </div>
    </div>
    <div class="d-flex flex" id="content-body">
        <div class="d-flex flex-column flex" id="user-list" data-plugin="user">
            <div class="p-3">
                <h2 class="text-stype text-md text-highlight">
                    <!--<div class="bg-light r r-3 py-1 my-1">自定义文件上传</div>-->
                    <p>
                    <div class="alert alert-warning" role="alert" id="error-div" style="display: none">
                        <i data-feather="alert-circle"></i>
                        <span class="mx-2" id="error-msg"></span>
                    </div>
                    </p>
                </h2>
                <h4>

                    <div class="bg-light r r-3 py-1 my-1">
                        <div class="">
                            <a href="#" class="text-dark r r-3 btn text-muted" id="return_path">
                                <i data-feather="rotate-ccw"></i>
                            </a>
                            <span class="text-dark r r-3">路径：</span>
                            <span class="text-dark r r-3" id="cut_path">{{info['cut_path']}}</span>
                            <span class="text-dark r r-3" id="parent_path"
                                  style="display: none">{{info['parent_path']}}</span>
                            <button class="text-dark r r-3 float-right btn btn-outline-secondary"
                                    style="margin-right: 120px" id="uploadfile_modal_btn"><i class="mx-2"
                                                                                             data-feather="upload"></i>
                                上传</i>
                            </button>
                        </div>
                    </div>

                </h4>
                <hr>

            </div>

            <div class="data-list scroll-y mx-3 mb-0 card">

                <div class="table-responsive">
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_1">
                            <div class="card">
                                <table id="table" class="table table-theme v-middle" data-plugin="bootstrapTable"
                                       data-toolbar="#toolbar" data-show-export="true" data-show-columns="true"
                                       data-detail-view="false" data-mobile-responsive="true">
                                    <thead>
                                    <tr>
                                        <th data-sortable="true" data-field="name"><i class="mx-2"></i>名称</th>
                                        <th data-field="updatetime"><span class="d-none d-sm-block">修改日期</span></th>
                                        <th data-field="size"><span class="d-none d-sm-block">大小</span></th>
                                        <th data-field="handle"><span class="d-none d-sm-block">操作</span></th>
                                    </tr>
                                    </thead>
                                    <tbody id="dirinfo">
                                    {% for item in info['dirinfo'] %}
                                    <tr data-name="{{item['name']}}">
                                        <td class="flex next_path_dir">
                                            <a href="#" class="item-title text-color"><i class="mx-2"
                                                                                         data-feather="folder"></i>{{item['name']}}</a>
                                        </td>
                                        <td>
                                            <span class="item-amount d-none d-sm-block text-sm ">{{item['updatetime']}}</span>
                                        </td>
                                        <td>
                                            <span class="item-amount d-none d-sm-block text-sm [object Object]">{{item['size']}}</span>
                                        </td>
                                        <td class="delete_file">
                                            <span class="item-amount d-none d-sm-block text-sm "><a>删除</a></span>
                                        </td>
                                    </tr>
                                    {% end %}
                                    {% for item in info['fileinfo'] %}
                                    <tr data-name="{{item['name']}}">
                                        <td class="flex">
                                            <i class="mx-2" data-feather="file"></i>{{item['name']}}
                                        <td>
                                            <span class="item-amount d-none d-sm-block text-sm ">{{item['updatetime']}}</span>
                                        </td>
                                        <td>
                                            <span class="item-amount d-none d-sm-block text-sm [object Object]">{{item['size']}}</span>
                                        </td>
                                        <td class="delete_file">
                                            <span class="item-amount d-none d-sm-block text-sm "><a>删除</a></span>
                                        </td>
                                    </tr>
                                    {% end %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- .uploadfile modal -->
<div id="uploadfile_modal" class="modal bg-dark fade" data-backdrop="true">
    <div class="modal-dialog">
        <div class="modal-content ">
            <div class="modal-header ">
                <div class="modal-title text-md">文件上传</div>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" role="alert">
                    <i data-feather="alert-circle"></i>
                    <span class="mx-2">提示：请选择域名上传到该域名的文件夹下。</span>
                </div>
                <div class="modal-body p-6">
                    <form action="#" id="dropz"
                          class="dropzone white b-a b-3x b-dashed b-primary p-a rounded p-5 text-center"
                          data-plugin="dropzone">
                        <div class="dz-message">
                            <h4 class="my-4">点击这里上传文件。</h4>
                        </div>
                        {% module xsrf_form_html() %}
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- / .select_site modal -->
{% end %}
{% block js %}
<script src="{{static_url('libs/dropzone/dist/min/dropzone.min.js')}}"></script>
<script>
    Dropzone.autoDiscover = false;
    $("#dropz").dropzone({
        url: "/uploadfile",
        method: "post",
        paramName: "file",
        maxFiles: 10,
        maxFilesize: 20, //MB
        acceptedFiles: ".jpg,.jpeg,.gif,.png,.txt,.html,.htm,.key,.csr,.crt,.pem", //上传的类型
        parallelUploads: 3,
        dictMaxFilesExceeded: "您最多只能上传" + this.maxFiles + "个文件！",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "你不能上传该类型文件,文件类型只能是*.jpg,*.jpeg,*.gif,*.png,*.txt,*.html,*.htm,*.key,*.csr,*.crt,*.pem。",
        dictFallbackMessage: "浏览器不受支持",
        dictFileTooBig: "文件过大上传文件最大支持.",
        dictRemoveLinks: "删除",
        dictCancelUpload: "取消",
        init: function () {
            this.on("sending", function (file, xhr, formData) {
                var parent_path = $("#parent_path").text();
                var domains = "";
                $(".domain_select").each(function () {
                    var is_domain_select = $(this).is(":checked");
                    if (is_domain_select) {
                        domains = domains + $(this).val() + ",";
                    }

                });
                var _xsrf = $("[name='_xsrf']").val();
                formData.append("_xsrf", _xsrf);
                formData.append("domains", domains);
                formData.append("parent_path", parent_path);
            });
            this.on("addedfile", function (file) {
                //上传文件时触发的事件
            });
            this.on("complete", function (file, data) {
                $('#uploadfile_modal').modal("hide");
                setTimeout(function () {
                    location.href = "/uploadfile";
                }, 3000);
                //上传完成后触发的方法
            });
            this.on("removedfile", function (file) {
                //删除文件时触发的方法
            });
            this.on("success", function (file, data) {
                $('#uploadfile_modal').modal("hide");
                $("#error-div").show();
                $("#error-msg").empty();
                $("#error-msg").append(data);
            });
        }
    });

    $("#uploadfile_modal_btn").click(function () {
        $('#uploadfile_modal').modal();
    });

    function all_select() {
        //全选
        var is_all_select = document.getElementById("all_select").checked;
        if (is_all_select) {
            var domain_select = document.getElementsByClassName("domain_select");
            for (var i = 0; i < domain_select.length; i++) {
                domain_select[i].checked = "checked";
            }
        } else {
            var domain_select = document.getElementsByClassName("domain_select");
            for (var i = 0; i < domain_select.length; i++) {
                domain_select[i].checked = "";
            }
        }
    }

    $("tbody").on("click", "td.next_path_dir", function () {
        //获取下一级文件
        var parent_path = $("#parent_path").text();
        var this_file = $(this).parent().attr("data-name");
        // alert($(this).text());
        var dataArray = {
            _xsrf: $("[name='_xsrf']").val(),
            parent_path: parent_path,
            this_file: this_file,
        };
        $.ajax({
            url: "/nextdir",
            type: "post",
            dataType: "json",
            data: dataArray,
            success: function (info) {
                insert_info(info);
            },
            error: function () {
                console.log(info);
            }
        });
    });

    $("tbody").on("click", "td.delete_file", function () {
        //删除文件
        var parent_path = $("#parent_path").text();
        var this_file = $(this).parent().attr("data-name");
        // alert(this_file);
        var dataArray = {
            _xsrf: $("[name='_xsrf']").val(),
            parent_path: parent_path,
            this_file: this_file,
        };
        $.ajax({
            url: "/deldir",
            type: "post",
            dataType: "json",
            data: dataArray,
            success: function (info) {
                $("#error-div").show();
                $("#error-msg").empty();
                $("#error-msg").append(info['msg']);
                insert_info(info);
            },
            error: function () {
                console.log(info);
            }
        });
    });
    $("#return_path").click(function () {
        //返回上一级目录
        var parent_path = $("#parent_path").text();
        var dataArray = {
            _xsrf: $("[name='_xsrf']").val(),
            parent_path: parent_path,
        };
        $.ajax({
            url: "/prevdir",
            type: "post",
            dataType: "json",
            data: dataArray,
            success: function (info) {
                insert_info(info);
            },
            error: function () {
                console.log(info);
            }
        });
    });

    function insert_info(info) {
        //插入文件信息
        $("#dirinfo").empty();
        $("#parent_path").empty();
        $("#cut_path").empty();
        $("#parent_path").append(info['parent_path']);
        $("#cut_path").append(info['cut_path']);
        $.each(info['dirinfo'], function (i, item) {
            var tr0 = '<tr data-name="' + item['name'] + '">';
            var td0 = '<td class="flex next_path_dir"><a href="#" class="item-title text-color"><i class="mx-2" data-feather="folder"></i>' + item['name'] + '</a></td>';
            var td1 = '<td><span class="item-amount d-none d-sm-block text-sm ">' + item['updatetime'] + '</span></td>';
            var td2 = '<td><span class="item-amount d-none d-sm-block text-sm [object Object]">' + item['size'] + '</span></td>';
            var td3 = '<td class="delete_file"><span class="item-amount d-none d-sm-block text-sm "><a>删除</a></span></td>';
            var tr1 = '</tr>';
            $("#dirinfo").append(tr0 + td0 + td1 + td2 + td3 + tr1);
        });
        $.each(info['fileinfo'], function (i, item) {
            var tr0 = '<tr data-name="' + item['name'] + '">';
            var td0 = '<td class="flex"><i class="mx-2" data-feather="folder"></i>' + item['name'] + '</td>';
            var td1 = '<td><span class="item-amount d-none d-sm-block text-sm ">' + item['updatetime'] + '</span></td>';
            var td2 = '<td><span class="item-amount d-none d-sm-block text-sm [object Object]">' + item['size'] + '</span></td>';
            var td3 = '<td class="delete_file"><span class="item-amount d-none d-sm-block text-sm "><a>删除</a></span></td>';
            var tr1 = '</tr>';
            $("#dirinfo").append(tr0 + td0 + td1 + td2 + td3 + tr1);
        });
    }
</script>
{% end %}