{% extends "../main.html" %}
{% block title %}插件市场{% end %}
{% block  css %}
<style>
    .search{margin-bottom:10px;}
.search input {
    font-size:12px;
    border-radius: 0;
}
#plugin-table thead tr, #table-roles thead tr , #table-permission thead tr{background:whitesmoke;}
#plugin-table tbody tr, #table-permission tbody tr{
    border-bottom:1px solid #f9f9f9;
}
#plugin-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;}
#plugin-table tbody tr td{
    overflow: hidden; 
    text-overflow:ellipsis;  
    white-space: nowrap;
    table-layout:fixed;
}
table{table-layout:fixed;}
.page-title{ 
    text-align: center;
    padding-right:5rem;
    padding-top:2rem;
}
#search-plugins{
    width:300px;
    margin:.5rem auto;
}
.search-ico{
    position: relative;
    display: inline-block;
    top: -2.3rem;
    right: -8rem;
    cursor: pointer;
}
td .h-1x{
    display:block;
    text-overflow: ellipsis;
}
</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 class="row">
                <div class="col-md-12">
                    <input id="search-plugins" maxlength="18" type="text" class="form-control" required placeholder="搜索插件">
                    <span class="search-ico"><i class="mx-2" data-feather="search"></i></span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="page-content page-container" id="page-content">
    <div class="padding contents">
        {% module xsrf_form_html() %}
        <table id="plugin-table" class="table table-theme v-middle" data-plugin="bootstrapTable" data-toolbar="#toolbar" data-detail-view="false" data-mobile-responsive="true">
            <thead>
                <tr>
                    <th data-width="5%" colspan="1" data-field="plugin-img"></th>
                    <th data-width="40%" colspan="1" data-field="plugin-name">插件名称/简介</th>
                    <th data-width="15%" colspan="1" data-field="plugin-source">来源</th>
                    <th data-width="15%" colspan="1" data-field="plugin-version">版本</th>
                    <th data-width="15%" colspan="1" data-field="plugin-price">价格</th>
                    <th colspan="1" data-field="opertions"><span class="d-none d-sm-block">操作</span></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
{% 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 () {
        $('#plugin-table').bootstrapTable({
            url: "/my-plugins",
            method: 'POST',
            //toolbar: '#toolbar',
            striped: true,
            cache: false,
            pagination: true,
            sortable: false,
            sortOrder: "desc",
            sidePagination: "server",
            pageNumber: 1,
            pageSize: 5,
            pageList: [10, 25, 50, 100],
            search: false,
            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()
                };
                $(".fixed-table-loading").empty()
                return temp;
            },
            onLoadSuccess: function (res) {
                //console.log(res);
            },
            onLoadError: function () {
                console.log("数据加载失败!");
            },
            columns: [
            {
                field: 'plugin-img',
                align: 'left',
                formatter: function (value, row, index) {
                    result = '\
                        <div class="avatar-group ">\
                            <a href="#" class="avatar ajax w-32" data-toggle="tooltip" title="" data-pjax-state="" data-original-title="Eget">\
                                <img src="'+row['plugin-img']+'">\
                            </a>\
                        </div>';

                    return result
                }
            },
            {
                field: 'plugin-name',
                title: '插件名称/简介',
                align: 'left',
                formatter: function (value, row, index) {
                    result = '<strong target="_blank" href="#" class="item-title ">' + row['plugin-name'] + '</strong>' +
                        '<div class="item-except h-1x text-muted">' + row['plugin-desc'] + '三生三世得的得得得得的的的的的的的的的的多得得得得得得</div>';
                    return result
                }
            },{
                field: 'plugin-source',
                title: '来源',
                align: 'left'
            }, {
                field: 'plugin-version',
                title: '版本',
                align: 'left'
            }, {
                field: 'plugin-price',
                title: '价格',
                align: 'left',
                formatter: function (value, row, index) {
                    if (row['plugin-price'] == "免费"){
                        var result = "<span class='text-success'>"+row['plugin-price']+"</span>"
                    }else{
                        var result = "<span class='text-danger'>￥"+row['plugin-price']+"</span>"
                    }
                    return result
                }
            }, {
                field: 'opertions',
                title: '操作',
                align: 'left',
                formatter: function (value, row, index) {
                    result = '<a data-id="'+row['plugin-id']+'" href="#" class="item-title opertions ">安装</a>';
                    return result
                }
            }],
        });
    });


    function search_plugins(){
        //搜索插件处理
        var keyword = $("#search-plugins").val();
        $('#plugin-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(),
                    keyword: keyword
                };
                return temp;
            }
        });
    }

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

</script>
{% end %}