{% 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, #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, .pagination-detail, .pagination, #add-role-modal-right, .modal-footer > button,
    .select2-container, #permission-modal-right, #table-permission tbody tr td {
        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;
    }

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

    table {
        table-layout: fixed;
    }
</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 id="toolbar">
            <a href="/batch">
                <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="site-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="20%" colspan="1" data-field="site-domain">网站域名/网站名称</th>
                <th data-width="10%" colspan="1" data-field="sitetype">网站类型</th>
                <th data-width="20%" colspan="1" data-field="sitemodel">网站模型</th>
                <th colspan="1" data-field="adddate"><span class="d-none d-sm-block">创建时间</span></th>
                <th colspan="1" data-field="opertions"><span class="d-none d-sm-block">操作</span></th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </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 () {
        $('#site-table').bootstrapTable({
            url: "/sitelist",
            method: 'POST',
            //toolbar: '#toolbar',
            striped: true,
            cache: false,
            pagination: true,
            sortable: false,
            sortOrder: "desc",
            sidePagination: "server",
            pageNumber: 1,
            pageSize: 6,
            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(),
                };
                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: 'domain',
                title: '网站域名/网站名称',
                align: 'left',
                formatter: function (value, row, index) {
                    var domain = row['domain'];
                    var sitename = row['sitename'];
                    var siteid = row['id'];
                    result = '<a target="_blank" href="http://' + domain + '" class="item-title ">' + domain + '</a>' +
                        '<div class="item-except h-1x">' + sitename + '</div>';
                    return result
                }
            }, {
                field: 'sitemodel',
                title: '网站模型',
                align: 'center'
            }, {
                field: 'sitetype',
                title: '网站类型',
                align: 'center'
            }, {
                field: 'adddate',
                title: '创建时间',
                align: 'left'
            }, {
                field: 'opertions',
                title: '操作',
                align: 'left',
                formatter: function (value, row, index) {
                    var editsite = "编辑网站";
                    var delsite = "删除网站";
                    result = '<a href="/updatesite?id=' + row['id'] + '" class="item-title opertions ">' + editsite + '</a>' +
                        '<a href="javascript:;" onclick="del_site(' + row['id'] + ')" class="item-title opertions ">' + delsite + '</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_site(site_id) {
        // 删除网站处理
        del_site_list = {"domains_id": site_id, "_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_site(del_site_id_list.join(','))
        }
    });

    $("#confirm-button").click(function () {
        // 提交到后端删除网站
        $.ajax({
            url: "/deletesite",
            type: "POST",
            dataType: "json",
            data: del_site_list,
            timeout: 1000000,
            success: function (res) {
                if (res.statu == 1) {
                    // 成功
                    //重载表格
                    del_site_list = [];
                    $("#site-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'});
            }

        });
    });

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

    function req_search_list(search_value) {
        $('#site-table').bootstrapTable("destroy");
        $('#site-table').bootstrapTable({
            url: "/search/site",
            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 (data) {
                req_search_list(data)
            },
            onLoadSuccess: function (res) {
                setTimeout(function () {
                    location.href = "/sitelist";
                }, 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: 'domain',
                title: '网站域名/网站名称',
                align: 'left',
                formatter: function (value, row, index) {
                    var domain = row['domain'];
                    var sitename = row['sitename'];
                    var siteid = row['id'];
                    result = '<a target="_blank" href="http://' + domain + '" class="item-title ">' + domain + '</a>' +
                        '<div class="item-except h-1x">' + sitename + '</div>';
                    return result
                }
            }, {
                field: 'sitemodel',
                title: '网站模型',
                align: 'center'
            }, {
                field: 'sitetype',
                title: '网站类型',
                align: 'center'
            }, {
                field: 'adddate',
                title: '创建时间',
                align: 'left'
            }, {
                field: 'opertions',
                title: '操作',
                align: 'left',
                formatter: function (value, row, index) {
                    var editsite = "编辑网站";
                    var delsite = "删除网站";
                    result = '<a href="/updatesite?id=' + row['id'] + '" class="item-title opertions ">' + editsite + '</a>' +
                        '<a href="javascript:;" onclick="del_site(' + row['id'] + ')" class="item-title opertions ">' + delsite + '</a>';
                    return result
                }
            }],
        });
    }
</script>
{% end %}