{% 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"/>
<style>
    .search {
        margin-bottom: 10px;
    }

    .search input {
        font-size: 12px;
        border-radius: 0;
    }

    #site-table thead tr,
    #column-table thead tr,
    #article-table thead tr,
    #table-roles thead tr,
    #table-permission thead tr {
        background: whitesmoke;
    }

    #site-table tbody tr,
    #table-permission tbody tr {
        border-bottom: 1px solid #f9f9f9;
    }

    #site-table tbody tr td,
    #column-table tbody tr td,
    #article-table tbody tr td,
    .pagination-detail,
    .pagination,
    #add-role-modal-right,
    .modal-footer > button,
    .select2-container,
    #permission-modal-right,
    #table-permission tbody tr td,
    #content-aside,
    #paths, #upload-modal-right {
        font-size: 12px;
        -webkit-font-smoothing: antialiased;
    }

    .select2-container {
        display: block;
        width: 100% !important;
    }

    .select-roles-card-body,
    .select-permission-card-body {
        border: 1px solid #ececec;
        height: 364px;
        overflow-y: auto;
        padding: .7rem 1.25rem .5rem 1.25rem;
    }

    .opertions {
        margin-right: 10px;
    }

    .alert-info {
        color: #555;
        background-color: #eaeaea;
        border-color: #eaeaea;
        border-radius: 0;
        font-size: 12px;
        -webkit-font-smoothing: antialiased;
    }

    .alert-info b {
        font-weight: 700;
        font-size: 14px;
    }

    .alert-info .user-message {
        margin-bottom: 10px;
    }

    .alert-info .user-notic {
        margin-top: 10px;
    }

    .page-title {
        width: 100%;
    }

    .headers {
        padding-bottom: 0;
    }

    .contents {
        padding-top: 0;
    }

    #add_file, #remote_down, #htaccess,
    #batch_del_site,
    #goback {
        margin-right: 10px;
        font-size: 12px;
        border-radius: 0;
        font-weight: 400;
    }

    #per-toolbar input,
    #per-toolbar span {
        border-radius: 0;
        font-size: 12px !important;
    }

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

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

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

    #add-roles-body {
        width: 870px;
    }

    #upload-body {
        width: 800px;
    }

    .muted {
        color: #b30202;
    }

    .modal-header {
        border-bottom: 1px solid #f3f3f3;
    }

    .modal-footer {
        border-top: 1px solid #f3f3f3;
        justify-content: left;
    }

    .modal-footer button {
        border-radius: 0;
        float: left;
    }

    #table-roles tbody tr td {
        padding: 0.6rem;
    }

    #add-role-modal-right .search,
    #permission-modal-right .search,
    #upload-modal-right .search {
        width: 100%;
    }

    #table-roles thead tr th {
        border: 1px solid rgba(160, 175, 185, 0.15);
    }

    .select-roles .closes {
        float: right;
    }

    .select-roles {
        padding: 5px 5px 1px 10px;
        border-radius: 10px;
        border: 1px solid #a7a7a7;
        cursor: pointer;
    }

    .select-roles:hover {
        background: white;
        color: black;
    }

    .cur-select-roles {
        display: inline-block;
        width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #add-roles-body .pagination-detail,
    #add-permission-body .pagination-detail {
        display: none;
    }

    #add-permission-body {
        width: 1024px;
        overflow: hidden;
    }

    #add-permission-body .bootstrap-table {
        overflow-y: auto;
        height: 471px;
    }

    .select-users {
        padding: 5px 5px 1px 10px;
        border-radius: 10px;
        border: 1px solid #a7a7a7;
        cursor: pointer;
    }

    .select-users .closes {
        float: right;
    }

    .cur-select-users,
    .cur-select-permission {
        display: inline-block;
        width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cur-select-permission {
        width: 230px !important;
    }

    .select-users:hover {
        background: white;
        color: black;
    }

    .page-list {
        display: none;
    }

    .fixed-content {
        top: 13.75rem !important;
        height: calc(100vh - 13.75rem) !important;
        padding: 0;
    }

    .fixed-content .navbar,
    .fixed-content span.nav-text,
    .fixed-content .nav li > a,
    .fixed-content .sidenav {
        padding-left: 0 !important;
        margin-left: 0;
    }

    .fixed-content .navbar {
        min-height: 1.2rem;
        padding-top: 0;
    }

    .fixed-content .sidenav {
        max-height: 30rem;
    }

    #user-list .card {
        border-radius: 0;
        overflow: unset;
        background-color: transparent;
        box-shadow: none;
    }

    .fixed-content .nav li > a {
        background-color: #ffffff;
        border: 1px solid #f7f7f7;
        border-radius: 3px;
        padding-left: 10px !important;
    }

    .fixed-content .sidenav .nav li.active > a {
        background-color: #efefef;
        border-radius: 3px;
        padding-left: 10px !important;
        border: 1px solid #ececec;
    }

    .fixed-content .sidenav .nav li {
        margin-bottom: .35rem;
    }

    .fixed-content .sitelist {
        width: 180px;
    }

    .sitedomain {
        font-size: 13px;
    }

    #column-table tbody tr td,
    #article-table tbody tr td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        table-layout: fixed;
    }

    table {
        table-layout: fixed;
    }

    a.article-title {
        color: #000;
    }

    a.article-title:hover {
        text-decoration: underline;
    }

    .fileico,
    .floderico {
        margin-right: .5rem;
        color: #949494;
    }

    .floderico {
        color: #f49a14;
    }

    #goback {
        width: 4rem;
    }

    #backoff:hover, #refresh:hover {
        color: rgb(0, 97, 255) !important;
        background-color: #e4e4e4;
    }

    #backoff, #refresh {
        color: rgb(68, 139, 255)
    }

    .goback {
        width: 12px;
        height: 12px;
    }

    #dropz {
        border-color: #dadada !important;
        border-width: 1px;
    }

    #page-hero .padding {
        padding-bottom: 0;
    }

    .nav-pills .nav-link {
        background-color: #f3f3f3;
    }

    .nav-item {
        margin-right: 1rem;
    }

    .nav-item a:hover {
        color: #000;
    }

    #modal-remote-down, #modal-remote-down input, #modal-htaccess, #modal-htaccess input {
        font-size: 12px;
        -webkit-font-smoothing: antialiased;
    }

    #modal-remote-down .modal-content, #modal-htaccess .modal-content {
        border-radius: 0;
    }

    #modal-remote-down .modal-dialog {
        margin: 5.75rem auto;
    }

    #modal-htaccess .modal-dialog {
        margin: 5.75rem auto;
    }

    #modal-remote-down .modal-footer, #modal-htaccess .modal-footer {
        justify-content: flex-end;
    }

    #modal-remote-down .confirm-circle, #modal-htaccess .confirm-circle {
        width: 21px;
        height: 21px;
    }

    #modal-remote-down .modal-title span, #modal-htaccess .modal-title span {
        font-size: 1rem;
        color: black;
    }

    #modal-remote-down .modal-body, #modal-htaccess .modal-body {
        padding: 1.5rem;
    }

    #modal-remote-down .modal-body div, #modal-htaccess .modal-body div {
        font-size: 12px;
        color: #4c4c4c;
    }

    #modal-remote-down .modal-footer button, #modal-htaccess .modal-footer button {
        border-radius: 0;
        font-size: 12px;
        float: left;
    }

</style>
{% end %}
{% block content %}
<div class="page-hero page-container " id="page-hero">
    <div class="padding d-flex">
        <div class="page-title">
            <h2 class="text-md text-highlight">自定义文件上传</h2>
            <div class="alert alert-info" role="alert">
                <div class="user-message">上传自定义文件到任意网站根目录并支持直接访问</div>
                <b>文件上传规则:</b>
                <div class="user-notic" style="margin-bottom:5px;">
                    - 上传自定义文件到任意网站，通过域名可以直接访问</br>
                    - 默认上传文件的web访问路径都以一级目录来访问，例如：<u>http://www.abc.com/aaa.txt</u>，可通过编辑伪静态规则进行调整</br>
                    - 可以将文件上传到指定网站访问，也可以将文件上传给所有网站访问，请<strong>注意</strong>上传时的选项
                </div>
            </div>
        </div>
        <div class="flex">
            <div class="alert alert-warning" role="alert" id="alert-div" style="display: none;">
                <i data-feather="alert-circle"></i>
                <span class="mx-2" id="alert-msg"></span>
            </div>
        </div>
        <div>
        </div>
    </div>
</div>

<div class="page-content page-container" id="page-content">
    <div class="padding contents">
        <div class="d-flex flex fixed-content">

            <div class="d-flex flex" id="content-body">
                <div class="d-flex flex-column flex" id="user-list">
                    <div class="data-list scroll-y mb-0 card">
                        <div class="table-responsive">
                            <div id="toolbar">
                                <a href="javascript:;">
                                    <button id="add_file"
                                            class="btn w-xs btn-primary">上传文件
                                    </button>
                                </a>
                                <a href="javascript:;">
                                    <button id="remote_down"
                                            class="btn w-xs btn-secondary">远程下载
                                    </button>
                                </a>
                                <a href="javascript:;">
                                    <button id="htaccess"
                                            class="btn w-xs btn-secondary">伪静态规则
                                    </button>
                                </a>
                                <a href="javascript:;"></a>
                                <button disabled id="batch_del_site"
                                        class="btn w-xs btn-secondary">批量删除
                                </button>
                                </a>
                                <a id="refresh_file" href="/uploadfile"><span id="refresh" class="badge badge-light"><i
                                        class="goback" data-feather="refresh-cw"></i></span></a>
                                <a href="javascript:;" onclick="prev_dir()"><span id="backoff"
                                                                                  class="badge badge-light"><i
                                        class="goback" data-feather="corner-left-up"></i></span></a>
                                <a href="javascript:;"><span id="cut_path" class="badge badge-light">{{info['cut_path']}}</span></a>
                            </div>
                            {% module xsrf_form_html() %}
                            <table id="article-table" class="table table-theme v-middle" data-plugin="bootstrapTable"
                                   data-toolbar="#toolbar" data-search="false" data-search-align="right"
                                   data-detail-view="false" data-mobile-responsive="true">
                                <thead>
                                <tr>
                                    <th data-width="8%" colspan="1" data-checkbox="true"></th>
                                    <th data-width="38%" colspan="1" data-field="name">文件名/文件夹</th>
                                    <th data-width="22%" colspan="1" data-field="updatetime">更新时间</th>
                                    <th data-width="15%" colspan="1" data-field="size">文件大小</th>
                                    <th colspan="1" data-field="opertions"><span class="d-none d-sm-block">操作</span>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for item in info['dirinfo'] %}
                                <tr>
                                    <td></td>
                                    <td><i class="floderico" data-feather="folder-plus"></i><a href="javascript:;"
                                                                                               onclick='next_dir(this)'
                                                                                               class="item-title article-title">{{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 ">{{item['size']}}</span>
                                    </td>
                                    <td><a href="#" class="item-title opertions ">删除</a></td>
                                </tr>
                                {% end %}
                                {% for item in info['fileinfo'] %}
                                <tr>
                                    <td></td>
                                    <td><i class="fileico" data-feather="file"></i><span>{{item['name']}}</span></td>
                                    <td>{{item['updatetime']}}</td>
                                    <td>{{item['size']}}</td>
                                    <td><a href="#" class="item-title opertions delete">删除</a></td>
                                </tr>
                                {% end %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- .上传modal -->
<div id="upload-modal-right" class="modal fade">
    <div class="modal-dialog modal-right">
        <div class="modal-content h-100 no-radius">
            <div class="modal-header ">
                <div class="modal-title text-md">上传文件</div>
                <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="alert alert-warning" role="alert">
                <i data-feather="alert-circle"></i>
                <span class="mx-2">单个文件最大20M, 最多支持10个文件同时上传.</span>
            </div>
            <div id="upload-body" class="modal-body">
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-dark">上传到</label>
                    <div class="col-sm-10">
                        <div class="mb-3">
                            <ul class="nav nav-pills" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab"
                                       aria-controls="all" aria-selected="true">所有网站</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="appoint-tab" data-toggle="tab" href="#appoint" role="tab"
                                       aria-controls="appoint" aria-selected="false">指定网站</a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-content mb-4">
                            <div class="text-muted tab-pane fade show active" id="all" role="tabpanel"
                                 aria-labelledby="all-tab"><strong>上传后所有网站域名都可以访问的到</strong></div>
                            <div class="tab-pane fade" id="appoint" role="tabpanel" aria-labelledby="appoint-tab">
                                <select id="select2-site" class="form-control" data-plugin="select2" data-option="{}"
                                        data-placeholder="请选择域名" data-minimum-results-for-search="Infinity" multiple>
                                    <option></option>
                                    {% for domain in domains %}
                                    <option value="{{domain}}">{{domain}}</option>
                                    {% end %}
                                </select>
                                <strong class="text-muted" style="margin-top:.5rem;">只有被选择的网站域名可以访问</strong>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-dark">上传文件</label>
                    <div class="col-sm-10">
                        <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">
                                <h5 class="my-4">将一个或多个文件拖拽到此处，或单击 <span class="text-primary">直接上传</span></h5>
                                <span class="text-muted d-block mb-4">(文件格式支持 jpg,jpeg,gif,png,txt,html,htm,key,csr,crt,pem)</span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
</div>
<!-- / .上传modal -->

<div id="modal-remote-down" class="modal fade" data-backdrop="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content box-shadow">
            <div class="modal-header ">
                <div class="modal-title text-md"><i class="mx-2 confirm-circle"
                                                    data-feather="download"></i><span>下载文件</span></div>
                <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-dark">URL地址</label>
                    <div class="col-sm-10">
                        <input id="down-address" type="text" class="form-control" required placeholder="下载地址">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-dark">文件名</label>
                    <div class="col-sm-10">
                        <input id="down-filename" type="text" class="form-control" required placeholder="要保存的文件名">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label text-dark">下载到</label>
                    <div class="col-sm-10">
                        <div class="mb-3">
                            <ul class="nav nav-pills" id="downTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="down-all-tab" data-toggle="tab" href="#down-all"
                                       role="tab" aria-controls="down-all" aria-selected="true">所有网站</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="down-appoint-tab" data-toggle="tab" href="#down-appoint"
                                       role="tab" aria-controls="down-appoint" aria-selected="false">指定网站</a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-content mb-4">
                            <div class="text-muted tab-pane fade show active" id="down-all" role="tabpanel"
                                 aria-labelledby="down-all-tab"><span>所有网站域名都可以访问的到</span></div>
                            <div class="tab-pane fade" id="down-appoint" role="tabpanel"
                                 aria-labelledby="down-appoint-tab">
                                <select id="select2-site-down" class="form-control" data-plugin="select2"
                                        data-option="{}" data-placeholder="请选择域名"
                                        data-minimum-results-for-search="Infinity" multiple>
                                    <option></option>
                                    {% for domain in domains %}
                                    <option value="{{domain}}">{{domain}}</option>
                                    {% end %}
                                </select>
                                <span class="text-muted" style="margin-top:.5rem;">只有被选择的网站域名可以访问</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="down-confirm-button" type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                <button id="down-cancel-button" type="button" class="btn btn-light" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div id="modal-htaccess" class="modal fade" data-backdrop="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content box-shadow">
            <div class="modal-header ">
                <div class="modal-title text-md"><i class="mx-2 confirm-circle"
                                                    data-feather="code"></i><span>伪静态规则</span></div>
                <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" role="alert">
                    <i data-feather="alert-circle"></i>
                    <span class="mx-2">请注意：如果语法错误，会导致nginx启动失败影响网站正常运行.</span>
                </div>
                <div class="row info">
                    <div class="col-md-12">
                        <div class="form-group">
{#                            <input type="hidden" name="domain" class="form-control" value="{{ domain }}">#}
                            <div data-plugin="summernote" data-option="{
                                toolbar: [],
                                shortcuts:false,
                                height:300,
                                spellCheck:false,
                                disableGrammar:false,
                                disableDragAndDrop:true
                            }" class="summernote-ui">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button id="htaccess-confirm-button" type="button" class="btn btn-primary" data-dismiss="modal">保存
                </button>
                <button id="htaccess-cancel-button" type="button" class="btn btn-light" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

{% include "../other/confirm.html" %}
{% end %}
{% block js %}
<script src="/static/libs/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.js"></script>
<script src="/static/libs/notie/dist/notie.min.js"></script>
<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 = current_global_path
                var domains = "";
                var current_tab = $('#upload-body li.nav-item a[aria-selected="true"]').attr("aria-controls");
                if (current_tab == "appoint") {
                    // 指定域名处理
                    $.each($("#select2-site").select2("val"), function (index, site) {
                        domains = domains + site + ",";
                    });
                }
                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";
                }, 1000);
                //上传完成后触发的方法
            });
            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);
            });
        }
    });
    $(document).ready(function () {
        $('#article-table').bootstrapTable({
            striped: true,
            cache: false,
            pagination: true,
            sortable: true,
            sortOrder: "asc",
            sidePagination: "client",
            pageNumber: 1,
            pageSize: 10,
            pageList: [10, 25, 50, 100],
            search: true,
            strictSearch: true,
            showColumns: false,
            showRefresh: false,
            minimumCountColumns: 2,
            clickToSelect: true,
            //height: 500,
            uniqueId: "ID",
            showToggle: false,
            cardView: false,
            detailView: false,
            onLoadSuccess: function (res) {
                //console.log(res);
            },
            onLoadError: function () {
                console.log("数据加载失败!");
            },
            onCheckAll: function (rows) {
                //全选
                del_file_list = [];
                $.each(rows, function () {
                    del_file_list.push($(this.name).text())
                })
                $("#batch_del_site").attr("disabled", false)
            },
            onCheck: function (rows) {
                //单选
                del_file_list.push($(rows.name).text())
                $("#batch_del_site").attr("disabled", false)
            },
            onUncheckAll: function (rowsAfter, rowsBefore) {
                //取消全选
                del_file_list = [];
                $("#batch_del_site").attr("disabled", true)
            },
            onUncheck: function (rowsAfter, rowsBefore) {
                //取消单选
                removeByValue(del_file_list, $(rowsAfter.name).text())
                if (del_file_list.length == 0) {
                    // 如果选择列表为空
                    $("#batch_del_site").attr("disabled", true)
                }
            },
            columns: [{
                checkbox: true,
            }, {
                field: 'name',
                title: '文件名/文件夹',
                align: 'left',
            }, {
                field: 'updatetime',
                title: '更新时间',
                align: 'left'
            }, {
                field: 'size',
                title: '文件大小',
                align: 'left'
            }, {
                field: 'opertions',
                title: '操作',
                align: 'left',
                formatter: function (value, row, index) {
                    var delarticle = "删除";
                    result = '<a href="javascript:;" class="item-title opertions delete">' + delarticle + '</a>';
                    return result
                }
            }],
        });
    });

    function removeByValue(arr, val) {
        // 删除数组元素
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == val) {
                arr.splice(i, 1);
                break;
            }
        }
    }

    function del_article(c_file) {
        // 删除处理
        del_file_data = {
            _xsrf: $("[name='_xsrf']").val(),
            parent_path: current_global_path,
            this_file: c_file,
        };
        $("#modal-confirm .modal-title span").text('删除文件/文件夹');
        $("#modal-confirm .modal-body").html("<div><p>您确定要删除所选文件/文件夹吗？</p><p>删除包括：</p>将从服务器上删除此文件/文件夹</div>")
        $("#modal-confirm").modal('show');
    }

    $("#batch_del_site").click(function () {
        // 批量删除处理
        if (del_file_list) {
            del_article(del_file_list.join('#,#'))
        }
    })

    $("tbody").on("click", "a.delete", function () {
        // 单个删除
        var c_file = $(this).parent().prevAll()[2].innerText
        del_article(c_file)
    });

    $("#confirm-button").click(function () {
        // 删除提交
        $.ajax({
            url: "/deldir",
            type: "POST",
            dataType: "json",
            data: del_file_data,
            success: function (info) {
                show_file_list(info)
                notie.alert({type: info['statu'], text: info.msg, position: 'top'});
            },
            error: function (res) {
                // 网络类型错误
                notie.alert({type: 3, text: '<b>网络错误</b>', position: 'top'});
            },
            complete: function (res) {
                del_file_data = "";
                del_file_list = [];
            }

        });
    });

    $("#add_file").click(function () {
        $("#upload-modal-right").modal("show");
    })

    $(".page-content").on("click", "button#remote_down", function () {
        $("#modal-remote-down").modal("show");
    })

    $("#down-confirm-button").click(function () {
        // 提交后端下载文件
        var domains = "";
        var current_tab = $('#downTab li.nav-item a[aria-selected="true"]').attr("aria-controls");
        if (current_tab == "down-appoint") {
            // 指定域名处理
            $.each($("#select2-site-down").select2("val"), function (index, site) {
                domains = domains + site + ",";
            });
        }
        var data = {
            url: $("#down-address").val(),
            filename: $("#down-filename").val(),
            domains: domains,
        };

        //这里ajax开始提交
        $.ajax({
            url: "/downloadfile",
            type: "post",
            dataType: "json",
            data: data,
            timeout: 1000000,
            success: function (res) {
                if (res.statu == 1) {
                    notie.alert({type: 1, text: '<b>' + res.msg + '</b>', position: 'top'});
                } else {
                    notie.alert({type: 0, text: '<b>' + res.msg + '</b>', position: 'top'});
                }
                setTimeout(function () {
                        location.href = "/uploadfile";
                    }, 2000);
            },
            error: function (res) {
                notie.alert({type: 3, text: '<b>网络错误</b>', position: 'top'});
            }
        })


    });

    $(".page-content").on("click", "button#htaccess", function () {
        // 显示伪静态规则模态框
        $("#modal-htaccess").modal("show");
        $('.summernote-ui').summernote('codeview.toggle');
        //这里ajax从后端获取htaccess内容
        var data="";
        $.ajax({
            url: "/read/htaccess",
            type: "post",
            dataType: "json",
            data: data,
            success: function(info) {
                $('.summernote-ui').summernote('code',info['msg']);
            },
            error: function(info) {
                console.log("error");
            }
        })
    });

    $('#modal-htaccess').on('hide.bs.modal', function () {
        // 关闭伪静态规则模态框
        setTimeout(function () {
            $('.summernote-ui').summernote('codeview.toggle');
        }, 500);
    });

    $("#htaccess-confirm-button").click(function () {
        // 伪静态规则提交到后端
        var content = $('.summernote-ui').summernote('code');
        //这里ajax提交保存的htaccess
        data = {
            _xsrf: $("[name='_xsrf']").val(),
            content: content,
        }
        $.ajax({
            url: "/write/htaccess",
            type: "post",
            dataType: "json",
            data: data,
            timeout: 1000000,
            success: function (res) {
                if (res.statu == 1) {
                    notie.alert({type: 1, text: '<b>' + res.msg + '</b>', position: 'top'});
                } else {
                    notie.alert({type: 0, text: '<b>' + res.msg + '</b>', position: 'top'});
                }
            },
            error: function (res) {
                notie.alert({type: 3, text: '<b>网络错误</b>', position: 'top'});
            }
        })
    })

    function show_file_list(info) {
        // 显示
        data = []
        for (var i = 0; i < info['dirinfo'].length; i++) {
            info['dirinfo'][i]['opertions'] = '<a href="#" class="item-title opertions ">删除</a>'
            info['dirinfo'][i]['name'] = '<i class="floderico" data-feather="folder-plus"></i><a href="javascript:;" onclick="next_dir(this)" class="item-title article-title">' + info['dirinfo'][i]['name'] + '</a>';
            data.push(info['dirinfo'][i])
        }
        for (var i = 0; i < info['fileinfo'].length; i++) {
            info['fileinfo'][i]['opertions'] = '<a href="#" class="item-title opertions ">删除</a>'
            info['fileinfo'][i]['name'] = '<i class="fileico" data-feather="file"></i><span>' + info['fileinfo'][i]['name'] + '</span>';
            data.push(info['fileinfo'][i])
        }
        var result = {
            total: info['fileinfo'].length,
            rows: data
        }

        $("#article-table").bootstrapTable('load', data);
        feather.replace({'width': 16, 'height': 16, 'stroke-width': 2})
    }

    function next_dir(obj) {
        // 下一级
        var c_floder = $(obj).text()
        var dataArray = {
            _xsrf: $("[name='_xsrf']").val(),
            parent_path: current_global_path,
            this_file: c_floder,
        };
        $.ajax({
            url: "/nextdir",
            type: "post",
            dataType: "json",
            data: dataArray,
            success: function (info) {
                show_file_list(info)
                current_global_path = current_global_path + "/" + c_floder
                $("#cut_path").text(info['cut_path'])
            },
            error: function (info) {
                console.log("error");
            }
        })
    }

    function prev_dir() {
        // 上一级
        var dataArray = {
            _xsrf: $("[name='_xsrf']").val(),
            parent_path: current_global_path,
        };
        $.ajax({
            url: "/prevdir",
            type: "post",
            dataType: "json",
            data: dataArray,
            success: function (info) {
                show_file_list(info)
                current_global_path = info['parent_path']
                $("#cut_path").text(info['cut_path'])
            },
            error: function () {
                console.log("error");
            }
        });
    }


    var current_global_path = "{{info['parent_path']}}";
    var del_file_data = "";
    var del_file_list = [];
</script>
{% end %}