{% 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, .card, .card p{
    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;}
#plugin-edit, #plugin-del{
    margin-right:10px;
    font-size:12px;
    border-radius: 0;
    font-weight:600;
    width: 60px;
    background-color: #fff;
    color: #448bff;
    border-color: #efefef;
}
#plugin-edit:hover, #plugin-del:hover{
    background-color: #448bff1f !important;
    border-color: #448bff1f !important;
    box-shadow: none;
}
.plugin-checked{
    float:right;
    margin-top:.4rem;
}

#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;}
.plugin-desc{
    height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    text-overflow: -o-ellipsis-lastline;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}
.plugin-img{
    width: 35px;
    height: 35px;
    background-size: cover;
    background-position: center;
    margin: .2rem auto;
}
.card-footer{
    border-top:none;
    padding-left:10px;
    padding-right:10px;
}
.plugin-author{
    float: right;
    
    font-weight:400;
}
#search-plugins{
    width:300px;
}
.search-ico{
    
    cursor: pointer;
}
.loading{
    margin: 0 auto !important;
    width:34px;
    height:34px;
}
</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">已安装的插件 <span id="plugin-total">0</span> 个</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 class="page-content page-container" id="page-content">
    <div class="padding contents">
        <div class="plugin-search">
            <div class="input-group mb-3">
                <input id="search-keyword" type="text" class="form-control" placeholder="搜索插件" aria-label="搜索插件" aria-describedby="basic-addon2">
                <div class="input-group-append search-ico">
                    <span class="input-group-text" id="basic-addon2"><i class="mx-2" data-feather="search"></i></span>
                </div>
            </div>
        </div>
        <div id="plugin-list" class="row">
            <div class="text-center p-5 w-100">
                <div class="loading m-4"></div>
            </div>
        </div>
        <div class="plugin-page">
            <div class="fixed-table-pagination">
                <div class="float-left pagination-detail">
                    <span class="pagination-info"></span>
                </div>
                <div class="float-right pagination" style="display: none;">
                    <ul class="pagination"></ul>
                </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>
    $("#plugin-list").on("click", "#plugin-del", function(){
        // 删除插件按钮绑定
        del_plugin_id = $(this).data('id');
        $("#modal-confirm .modal-title span").text('删除插件');
        $("#modal-confirm .modal-body").html("<div><p>您确定要删除该插件吗？</p><p>删除包括：</p>删除该插件及配置数据</div>")
        $("#modal-confirm").modal('show');
    })
    $("#confirm-button").click(function () {
        // 删除插件ajax提交到后端
        var datas = {
            plugin_id: del_plugin_id
        }
        $.ajax({
            url: "",
            type: "POST",
            dataType: "json",
            data: datas,
            success: function (info) {
                notie.alert({ type: info['statu'], text: info.msg, position: 'top' });
            },
            error: function (res) {
                notie.alert({ type: 3, text: '<b>网络错误</b>', position: 'top' });
            },
        });
    });

    function get_plugin_list(){
        // 从后端获取已安装的插件列表
        datas = {
            limit: limit,                     //数量
            page: page,                       //页码
            search: search                    //搜索字符
        }
        $.ajax({
            url: "/my-plugins",
            type: "POST",
            dataType: "json",
            data: datas,
            success: function (info) {
                if (info['rows']){
                    show_plugin_list(info)
                }
            },
            error: function (res) {
                notie.alert({ type: 3, text: '<b>网络错误</b>', position: 'top' });
            },
        });
    }

    function show_plugin_list(datas){
        //输出插件列表
        if (datas['total'] >= 1){
            $("#plugin-list").empty()
            $.each(datas['rows'], function (index, row) {
                if (row['plugin-statu'] == 1) {
                    var checked = "checked";
                } else {
                    var checked = "";
                }
                var plugin_content = '\
                            <div class="col-sm-12 col-md-6 col-lg-6 col-xl-4">\
                                <div class="card">\
                                    <div class="card-body">\
                                        <div class="row">\
                                            <div class="col-md-2">\
                                                <div class="plugin-img" style="background-image: url('+ row['plugin-img'] + ');"></div>\
                                            </div>\
                                            <div class="col-md-10">\
                                                <h6 class="card-title plugin-title">'+ row['plugin-name'] + '</h6>\
                                                <p class="card-text plugin-desc">'+ row['plugin-desc'] + '</p>\
                                                <p class="card-text">\
                                                    <span class="plugin-version text-muted">版本 '+ row['plugin-version'] + '</span>\
                                                    <span class="badge badge-light text-uppercase plugin-author">'+ row['plugin-source'] + '</span>\
                                                </p>\
                                            </div>\
                                        </div>\
                                    </div>\
                                    <div class="card-footer">\
                                        <a data-id="'+ row['plugin-id'] + '" href="#"><button id="plugin-edit" class="btn btn-xs w-xs btn-primary">操作</button></a>\
                                        <a href="javascript:;"><button data-id="'+row['plugin-id']+'" id="plugin-del" class="btn btn-xs w-xs btn-primary">删除</button></a>\
                                        <span class="plugin-checked">\
                                            <label class="md-switch">\
                                                <input type="checkbox" '+ checked + '>\
                                                <i class="blue"></i>\
                                            </label>\
                                        </span>\
                                    </div>\
                                </div>\
                            </div>';
                $("#plugin-list").append(plugin_content)
                $("#plugin-total").text(datas['total'])
            });
            show_pagination(datas)
        }else{
            var default_msg = '\
                <div class="d-flex flex align-items-center info theme">\
                    <div class="text-center p-5 w-100">\
                        <h1 class="display-5 my-5">还未安装任何插件</h1>\
                        <p>请前往 \
                            <a href="/plugins" class="b-b b-white">插件市场</a> 拓展你的系统.\
                        </p>\
                    </div>\
                </div>';
            $("#plugin-list").empty()
            $("#plugin-list").append(default_msg)
        }
    }

    function show_pagination(datas){
        // 输出分页信息
        $("ul.pagination").empty()
        var total = datas['total']
        if (total > limit){
            $("div.pagination").show()
            total_page_num = Math.ceil(total/limit);
            var page_content = '<li class="page-item page-pre"><a class="page-link" href="#">‹</a></li>';

            if ( (page-4) >= 1 ){
                page_content += '<li class="page-item page-code"><a class="page-link" href="#">1</a></li>';
                page_content += '<li class="page-item page-first-separator disabled"><a class="page-link" href="#">...</a></li>';
                page_content += '<li class="page-item page-code"><a class="page-link" href="#">'+(page-2)+'</a></li>';
                page_content += '<li class="page-item page-code"><a class="page-link" href="#">'+(page-1)+'</a></li>';
            }else{
                for (i = 1; i < page; i++) {
                    page_content += '<li class="page-item page-code"><a class="page-link" href="#">'+i+'</a></li>';
                }
            }

            page_content += '<li class="page-item active"><a class="page-link" href="#">'+page+'</a></li>';

            if ( (page+4) <= total_page_num ){
                page_content += '<li class="page-item page-code"><a class="page-link" href="#">'+(page+1)+'</a></li>';
                page_content += '<li class="page-item page-code"><a class="page-link" href="#">'+(page+2)+'</a></li>';
                page_content += '<li class="page-item page-first-separator disabled"><a class="page-link" href="#">...</a></li>';
            }else{
                for (i = page+1; i < total_page_num; i++) {
                    page_content += '<li class="page-item page-code"><a class="page-link" href="#">'+i+'</a></li>';
                }
            }

            if (page < total_page_num){
                page_content += '<li class="page-item page-code"><a class="page-link" href="#">'+total_page_num+'</a></li>';
            }

            page_content += '<li class="page-item page-next"><a class="page-link" href="#">›</a></li>';
            $("ul.pagination").append(page_content)
        }

        if (total >= 1){
            var offset = (page - 1) * limit + 1;
            var end = offset + datas['rows'].length - 1;
            $("span.pagination-info").text('显示第 '+offset+' 到第 '+end+' 条记录，总共 '+total+' 条记录')
        }

    }

    function search_plugin(){
        // 搜索插件处理
        var keyword = $("#search-keyword").val();
        if (!search){page = 1;}
        if (keyword != search){page = 1;}
        search = $("#search-keyword").val();
        get_plugin_list()
    }


    $("ul.pagination").on("click", "li.page-code a.page-link", function(){
        // 绑定页码
        page = Number( $(this).text() )
        get_plugin_list()
    });
    $("ul.pagination").on("click", "li.page-pre a.page-link", function(){
        // 绑定上一页
        page = page - 1;
        if (page < 1){page = total_page_num;}
        get_plugin_list()
    });
    $("ul.pagination").on("click", "li.page-next a.page-link", function(){
        // 绑定下一页
        page = page + 1
        if (page > total_page_num){page = 1;}
        get_plugin_list()
    });

    $("div.plugin-search").on("click", ".search-ico span", function(){
        // 绑定搜索按钮
        search_plugin()
    });
    $("#search-keyword").keypress(function (e) {
        if (e.which == 13) {
            search_plugin()
        }
    });

    var limit = 9;
    var page = 1;
    var search = "";
    var total_page_num = "";
    var del_plugin_id = "";

    get_plugin_list()

</script>
{% end %}