{% extends "../main.html" %}
{% block title %}文章数据{% end %}
{% block  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 {
        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_user, #batch_del_site {
        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;
    }

    .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 {
        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;
    }
</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>
            <small class="text-muted">列出网站的文章</small>
        </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="fade aside aside-sm" id="content-aside">
                <div class="modal-dialog d-flex flex-column w-md bg-body sitelist" id="user-nav">
                    <div class="navbar">
                        <span class="sitedomain d-block pt-1 text-md text-muted">网站域名</span>
                    </div>
                    <div class="scrollable hover">
                        <div class="sidenav p-2">
                            <nav class="nav-active-text-dark" data-nav>
                                <ul class="nav">
                                    {% for c,d in enumerate(domains) %}
                                    <li class="sitedomain">
                                        <a href="#">
                                            <span class="nav-text">{{ d['domain'] }}</span>
                                        </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="data-list scroll-y mx-3 mb-0 card">
                        <div class="table-responsive">
                            <div id="toolbar">
                                <a id="add_article" href="/addarticle?domain={{ domains[0]['domain'] }}">
                                    <button id="add_user" class="btn w-xs btn-primary">添加文章</button>
                                </a>
                                <a href="javascript:;"></a>
                                <button disabled id="batch_del_site" class="btn w-xs btn-secondary">批量删除</button>
                                </a>
                            </div>
                            {% module xsrf_form_html() %}
                            <table id="article-table" class="table table-theme v-middle" data-plugin="bootstrapTable"
                                   data-toolbar="#toolbar"
                                   data-search="true" data-search-align="left" data-show-search-button="true"
                                   data-detail-view="false" data-mobile-responsive="true">
                                <thead>
                                <tr>
                                    <th data-width="5%" colspan="1" data-checkbox="true"></th>
                                    <th data-width="40%" colspan="1" data-field="title">文章标题</th>
                                    <th data-width="15%" colspan="1" data-field="catname">文章分类</th>
                                    <th data-width="25%" colspan="1" data-field="date">发布时间</th>
                                    <th colspan="1" data-field="opertions"><span class="d-none d-sm-block">操作</span>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </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>
    $(document).ready(function () {
        $('#article-table').bootstrapTable({
            url: "/articlelist",
            method: 'POST',
            //toolbar: '#toolbar',
            striped: true,
            cache: false,
            pagination: true,
            sortable: false,
            sortOrder: "desc",
            sidePagination: "server",
            pageNumber: 1,
            pageSize: 10,
            pageList: [10, 25, 50, 100],
            search: true,
            searchOnEnterKey: true,
            strictSearch: true,
            showColumns: false,
            showRefresh: false,
            minimumCountColumns: 2,
            clickToSelect: true,
            //height: 500,
            uniqueId: "ID",
            showToggle: false,
            cardView: false,
            detailView: false,
            queryParams: function (params) {
                // 发送到后端的参数
                var temp = {
                    rows: params.limit,                         //页面大小
                    page: (params.offset / params.limit) + 1,   //页码
                    sort: params.sort,      //排序列名  
                    sortOrder: params.order, //排位命令（desc，asc） 
                    _xsrf: $("[name='_xsrf']").val(),
                    domain: "{{ domains[0]['domain'] }}"
                };
                return temp;
            },
            onSearch: function (search_value) {
                req_search_list(search_value)
            },
            onLoadSuccess: function (res) {
                //console.log(res);
            },
            onLoadError: function () {
                console.log("数据加载失败!");
            },
            onCheckAll: function (rows) {
                //全选
                del_site_id_list = [];
                $.each(rows, function () {
                    del_site_id_list.push(this['id'])
                });
                $("#batch_del_site").attr("disabled", false)
            },
            onCheck: function (rows) {
                //单选
                del_site_id_list.push(rows['id']);
                $("#batch_del_site").attr("disabled", false)
            },
            onUncheckAll: function (rowsAfter, rowsBefore) {
                //取消全选
                del_site_id_list = [];
                $("#batch_del_site").attr("disabled", true)
            },
            onUncheck: function (rowsAfter, rowsBefore) {
                //取消单选
                removeByValue(del_site_id_list, rowsAfter['id']);
                if (del_site_id_list.length == 0) {
                    // 如果选择列表为空
                    $("#batch_del_site").attr("disabled", true)
                }
            },
            columns: [{
                checkbox: true,
            }, {
                field: 'title',
                title: '文章标题',
                align: 'left',
                formatter: function (value, row, index) {
                    result = '<a href="#" class="item-title article-title">' + row['title'] + '</a>'
                    return result
                }
            }, {
                field: 'catname',
                title: '文章分类',
                align: 'left'
            }, {
                field: 'date',
                title: '发布时间',
                align: 'left'
            }, {
                field: 'opertions',
                title: '操作',
                align: 'left',
                formatter: function (value, row, index) {
                    var editarticle = "编辑";
                    var delarticle = "删除";
                    result = '<a href="/updatearticle?id=' + row['id'] + '&domain=' + row['domain'] + '" class="item-title opertions ">' + editarticle + '</a>' +
                        '<a href="javascript:;" onclick="del_article(' + row['id'] + ')" class="item-title opertions ">' + 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(article_id) {
        // 删除处理
        var cur_domain = $('li[class="sitedomain active"] a span').text();
        if (!cur_domain) {
            cur_domain = "{{ domains[0]['domain'] }}";
        }
        del_site_list = {"articles_id": article_id, "domain": cur_domain, "_xsrf": $("[name='_xsrf']").val()};
        $("#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_site_id_list) {
            del_article(del_site_id_list.join(','))
        }
    });

    $("#confirm-button").click(function () {
        // 提交到后端删除
        $.ajax({
            url: "/deletearticle",
            type: "POST",
            dataType: "json",
            data: del_site_list,
            timeout: 1000000,
            success: function (res) {
                if (res.statu == 1) {
                    // 成功
                    //重载表格
                    $("#article-table").bootstrapTable('refresh');
                    notie.alert({type: 1, text: res.msg, position: 'top'});
                } else {
                    // 失败
                    notie.alert({type: 3, text: '<b>' + res.msg + '</b>', position: 'top'});
                }
            },
            error: function (res) {
                // 网络类型错误
                notie.alert({type: 3, text: '<b>网络错误</b>', position: 'top'});
            },
            complete: function (res) {
                del_site_list = [];
                del_site_id_list = [];
            }

        });
    });

    $("li.sitedomain").click(function () {
        // 选择域名后的处理
        del_site_list = [];
        del_site_id_list = [];
        var select_domain = $(this).find("a span").text();
        $('#article-table').bootstrapTable('refreshOptions', {
            queryParams: function (params) {
                // 发送到后端的参数
                var temp = {
                    rows: params.limit,                         //页面大小
                    page: (params.offset / params.limit) + 1,   //页码
                    sort: params.sort,      //排序列名  
                    sortOrder: params.order, //排位命令（desc，asc） 
                    _xsrf: $("[name='_xsrf']").val(),
                    domain: select_domain
                };
                return temp;
            }
        });

        $("#add_article").attr("href", "/addarticle?domain=" + select_domain);
    });

    var del_site_list = [];
    var del_site_id_list = [];

    function req_search_list(search_value) {
        $("#article-table").bootstrapTable("destroy");
        $('#article-table').bootstrapTable({
            url: "/search/article",
            method: 'POST',
            //toolbar: '#toolbar',
            striped: true,
            cache: false,
            pagination: true,
            sortable: false,
            sortOrder: "desc",
            sidePagination: "server",
            pageNumber: 1,
            pageSize: 20,
            pageList: [10, 25, 50, 100],
            search: true,
            searchOnEnterKey: true,
            strictSearch: true,
            showColumns: false,
            showRefresh: false,
            minimumCountColumns: 2,
            clickToSelect: true,
            //height: 500,
            uniqueId: "ID",
            showToggle: false,
            cardView: false,
            detailView: false,
            queryParams: function (params) {
                // 发送到后端的参数
                var temp = {
                    rows: params.limit,                         //页面大小
                    page: (params.offset / params.limit) + 1,   //页码
                    sort: params.sort,      //排序列名
                    sortOrder: params.order, //排位命令（desc，asc）
                    _xsrf: $("[name='_xsrf']").val(),
                    search_value: search_value,
                };
                return temp;
            },
            onSearch: function (search_value) {
                req_search_list(search_value)
            },
            onLoadSuccess: function (res) {
                setTimeout(function () {
                    location.href = "/articlelist";
                }, 6000);
                //console.log(res);
            },
            onLoadError: function () {
                console.log("数据加载失败!");
            },
            onCheckAll: function (rows) {
                //全选
                del_site_id_list = [];
                $.each(rows, function () {
                    del_site_id_list.push(this['id'])
                });
                $("#batch_del_site").attr("disabled", false)
            },
            onCheck: function (rows) {
                //单选
                del_site_id_list.push(rows['id']);
                $("#batch_del_site").attr("disabled", false)
            },
            onUncheckAll: function (rowsAfter, rowsBefore) {
                //取消全选
                del_site_id_list = [];
                $("#batch_del_site").attr("disabled", true)
            },
            onUncheck: function (rowsAfter, rowsBefore) {
                //取消单选
                removeByValue(del_site_id_list, rowsAfter['id']);
                if (del_site_id_list.length == 0) {
                    // 如果选择列表为空
                    $("#batch_del_site").attr("disabled", true)
                }
            },
            columns: [{
                checkbox: true,
            }, {
                field: 'title',
                title: '文章标题',
                align: 'left',
                formatter: function (value, row, index) {
                    result = '<a href="#" class="item-title article-title">' + row['title'] + '</a>'
                    return result
                }
            }, {
                field: 'catname',
                title: '文章分类',
                align: 'left'
            }, {
                field: 'date',
                title: '发布时间',
                align: 'left'
            }, {
                field: 'opertions',
                title: '操作',
                align: 'left',
                formatter: function (value, row, index) {
                    var editarticle = "编辑";
                    var delarticle = "删除";
                    result = '<a href="/updatearticle?id=' + row['id'] + '&domain=' + row['domain'] + '" class="item-title opertions ">' + editarticle + '</a>' +
                        '<a href="javascript:;" onclick="del_article(' + row['id'] + ')" class="item-title opertions ">' + delarticle + '</a>';
                    return result
                }
            }],
        });
    }
</script>
{% end %}