{% extends "../main.html" %}
{% block title %}添加栏目{% end %}
{% block content %}
<style>
.search, #toolbar button, #toolbar-f-permission button, #toolbar-d-permission button,
#toolbar-uper-permission button{margin-bottom:10px;}
.search input {
    font-size:12px;
    border-radius: 0;
}
#role-table thead tr, #table-member thead tr, #table-permission thead tr, #role-user-table thead tr,
#role-f-permission-table thead tr, #role-d-permission-table thead tr, #uper-permission-table thead tr,
#fper-permission-table thead tr, #dper-permission-table thead tr {background:whitesmoke;}

#role-table tbody tr, #table-member tbody tr, #table-permission tbody tr, #role-user-table tbody tr,
#role-f-permission-table tbody tr, #role-d-permission-table tbody tr, #uper-permission-table tbody tr,
#fper-permission-table tbody tr, #dper-permission-table tbody tr{border-bottom:1px solid #f9f9f9;}

#role-table tbody tr td,#table-member tbody tr td, .pagination-detail, .pagination, #role-modal-right, .modal-footer>button,
.select2-container, #add-main-key-modal-right, #member-modal-right, #permission-modal-right, #table-permission tbody tr, .basic-info, #myTab, 
#role-user-table tbody tr td, #role-f-permission-table tbody tr td, #role-d-permission-table tbody tr td, #role-basic-modal-right,
#new-role-body input, #new-role-body textarea, #new-role-body select, #permission-data-modal-right, #permission-data-modal-right,
#add-role-modal-right,#uper-permission-table tbody tr td, #fper-permission-table tbody tr td, #dper-permission-table tbody tr td
{
    font-size: 12px !important;
    -webkit-font-smoothing: antialiased !important;
}

.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-notic{
    margin-top:10px;
}
.alert-info .user-message{
    margin-bottom:10px;
}
.page-title{width:100%;}
.headers{padding-bottom:0;}
.contents{padding-top:0;}
#add_member, .add_permission{
    margin-right:10px;
    font-size:12px;
    border-radius: 0;
    font-weight:300;
}
#new-role-body{width:600px;}
#add-member-body, #add-roles-body, #add-main-key-body{width:870px;}
#add-permission-body{width:1024px;overflow: hidden;}
.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;
}
.select2-container{
    display: block;
    width: 100% !important;
}
.notie-background-success{
    background-color:#57BF57;
}
.notie-background-error{
    background-color:#E1715B;
}
.notie-background-warning{
    background-color:#D6A14D;
}
button.btn.btn-secondary.dropdown-toggle {
    border-radius: 2px;
    font-weight: 100;
    padding: 0px 5px;
}
.select-key{padding:5px 5px 1px 10px; border-radius: 10px; border:1px solid #a7a7a7;cursor:pointer;}
.select-key .closes{float:right;}
.cur-select-key, .cur-select-key{
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cur-select-key{
    width:180px !important;
}
.select-key-card-body{
    border: 1px solid #ececec;
    height: 360px;
    overflow-y:auto;
    padding:.7rem 1.25rem .5rem 1.25rem
}
#table-member thead tr th, #table-permission thead tr th{
    border:1px solid rgba(160, 175, 185, 0.15);
}
#member-modal-right .search, #permission-modal-right .search, #add-role-modal-right .search, #add-main-key-modal-right .search {
    width:100%;
}
#add-member-body .pagination-detail, #add-main-key-body .pagination-detail {display:none;}
.select-key:hover{background:white;color:black;}
#per-toolbar input , #per-toolbar span{
    border-radius: 0;
    font-size: 12px !important;
}
#per-toolbar input{
    width:598px;
}
#per-toolbar .input-group{
    margin-bottom:10px !important;
}
.per-badge{margin-left:10px;}
#add-permission-body .bootstrap-table{
    overflow-y: auto;
    height: 471px;
}


.zu{width:15 !important;height:15px !important;color:black}
.basic-info{
    margin-top:1rem;
    margin-bottom:2.5rem;
}
.basic-info .role-base{
    margin-bottom:.7rem;
}
.basic-info .role-base h3{
    font-weight: 700;
}
.page-title h2{font-size:1.5rem;}
.page-title h2 svg{
    cursor:pointer;
    width:21px;
    height:21px;
}
.permission-manager{padding-top:1rem;}
#add-roles-body .pagination-detail {display:none;}
.select-roles-card-body{
    border: 1px solid #ececec;
    height: 364px;
    overflow-y:auto;
    padding:.7rem 1.25rem .5rem 1.25rem;
}
.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;
}

.footer button{
    border-radius: 0;
    width:4rem;
    border:1px solid #e8e8e8;
    font-size:12px;
}
.footer button:last-child{
    background-color:#f3f3f3;
}
.info .form-control {
    border-radius: 0;
}

/* 唯一 */
#main,#header {
    background-color: #fff;
}
.circle{
    width:12px;
    height:12px;
}
.headers h2{font-size:1rem;}
.headers .cdomain{font-size:1rem;font-weight:100;margin-left:8px;}
.headers .badge{margin-left:3px; font-weight: 100;color:#9c9c9c;}
.form-control:not(.is-valid):not(.is-invalid):focus{
    border-color: #7d7d7d;
    box-shadow: none;
}
.info .form-group input, .info .form-group textarea {
    font-size:12px;
}
.info input[readonly]{
    background-color: transparent;
    opacity: 1;
}
.mkey-card {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid rgba(135, 150, 165, 0.15);
    margin-bottom:0;
    cursor: pointer;
    max-height: 10rem;
    min-height: 2.2rem;
    overflow: auto;
}
.mkey-card .card-body{
    padding: 0.375rem 0.75rem 0.155rem 0.75rem;
}
.mkey-card .card-body span{
    margin-bottom:4px;
    background-color: #efefef;
    
}
</style>
<!-- ############ Content START-->
<div id="content" class="flex ">
        <!-- ############ Main START-->
        <div>
            <div class="page-hero page-container " id="page-hero">
                <div class="padding d-flex headers">
                    <div class="page-title headers-t">
                        <h2 class="text-md text-highlight">
                            <i onclick="javascript:history.back(-1);" class="zu" data-feather="arrow-left"></i> 
                            添加栏目
                            <span id="{{domains['id']}}" class="cdomain" class="text-sm">{{domains['domain']}} </span>
                            <span class="badge badge-light text-sm">域</span>
                        </h2>
                        <hr>
                    </div>
                </div>
            </div>
            <div class="page-content page-container" id="page-content">
                <div class="padding contents">
                    <div class="basic-info text-dark">
                        <div class="row">
                            <div class="col-md-8">
                                <form id="update-column" onsubmit="return false">
                                    {% module xsrf_form_html() %}
                                    <input type="hidden" name="id" class="form-control" value="{{domains['id']}}">
                                    <input type="hidden" name="domain" class="form-control" value="{{domains['domain']}}">
                                    <div class="row role-base">
                                        <div class="col-md-12">
                                            <h3 class="text-sm">网站栏目信息</h3>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-7">
                                            <div class="form-group">
                                                <label class="text-dark"><span class="muted">*</span> 栏目名称</label>
                                                <input autofocus="autofocus" value="" name="cat_name" type="text" class="form-control" required>
                                                <label class="text-muted">不超过64个字符，允许汉字英文字母、数字，或"-"</label>
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label class="text-dark">栏目URI</label>
                                                <input value="" name="cat_uri" type="text" class="form-control">
                                                <label class="text-muted">该栏目展示的唯一URL,默认随机字符</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-7">
                                            <div class="form-group">
                                                <label class="text-dark"><span class="muted">*</span> 栏目关键词</label>
                                                <input value="" name="cat_keys" type="text" class="form-control" required>
                                                <label class="text-muted">前端展示关键词</label>
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label class="text-dark">栏目简写</label>
                                                <input value="" name="cat_short" type="text" class="form-control">
                                                <label class="text-muted">默认随机字符</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="text-dark"><span class="muted">*</span> 栏目主词</label>
                                                <div class="mkey-card card">
                                                    <div class="card-body main_name">
                                                    </div>
                                                </div>
                                                <label class="text-muted">栏目主词控制该栏目下采集的内容数量及质量</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="text-dark"><span class="muted">*</span> 栏目描述</label>
                                                <textarea name="cat_desc" class="form-control" rows="5" data-minwords="5"
                                                    placeholder=""></textarea>
                                                <label class="text-muted">最大长度24个字符或汉字</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-4">
                                            <div class="form-group footer">
                                                <button type="submit" class="btn btn-primary">保存</button>
                                                <button onclick="javascript:history.back(-1);" type="button" class="btn btn-white">返回</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="col-md-4">
                                <div class="alert alert-info" role="alert">
                                    <div class="user-message">
                                        配置栏目基本信息
                                    </div>
                                    <b>注意事项：</b>
                                    <div class="user-notic">
                                        1. 栏目内的文章数据按设置的主词进行拉取</br>
                                        2. 栏目关键词与主词无关，可随意设置，以逗号分隔。</br>
                                        3. 栏目URI即显示在网页上的URL。
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ############ Main END-->
    </div>
    <!-- ############ Content END-->

    <!-- .添加主词modal -->
    <form id="add-main-key-form" onsubmit="return false">
        <div id="add-main-key-modal-right" class="modal fade" data-backdrop="static">
            <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 id="add-main-key-body" class="modal-body">
                        <div class="form-group">
                            <label class="text-dark"> 选择主词</label>
                            <div class="row">
                                <div class="col-md-8">
                                    <div id="per-toolbar">
                                    </div>
                                    <table id="table-add-main-key" class="table v-middle table-bordered"
                                        data-plugin="bootstrapTable" data-search="true" data-search-align="left"
                                        data-detail-view="false" data-mobile-responsive="true">
                                        <thead>
                                            <tr>
                                                <th data-width="30%" colspan="1" data-field="name">关键词</th>
                                                <th data-width="30%" colspan="1" data-field="desc">文章量</th>
                                                <th data-width="30%" colspan="1" data-field="type">长尾量</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-4">
                                    <div class="card">
                                        <label class="text-dark"> 已选主词</label>
                                        <div class="card-body select-key-card-body">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">确定</button>
                        <button type="button" class="btn btn-light" data-dismiss="modal">关闭</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        </div>
    </form>
    <!-- / .添加主词modal -->


{% 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/js/.js"></script>
<script>
function req_key_list(){
    // 权限列表表格
    $('#table-add-main-key').bootstrapTable({
        url: "/get_mainkey",                        //请求后台的URL（*）
        method: 'POST',                      //请求方式（*）
        //toolbar: '#toolbar',              //工具按钮用哪个容器
        striped: false,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sortable: false,                     //是否启用排序
        sortOrder: "desc",                   //排序方式
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
        pageSize: 6,                        //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        search: true,                      //是否显示表格搜索
        strictSearch: true,
        showColumns: false,                  //是否显示所有的列（选择显示的列）
        showRefresh: false,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        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） 
                search: params.search
            };
            return temp;
        },
        onClickRow: function (row,index) {
            var item_index = index['0']['sectionRowIndex']
            $('#table-add-main-key tr[data-index="'+item_index+'"]').attr('data-mid',row['mid'])
            select_key(row, item_index)
        },
        onLoadSuccess: function (res) {
            $.each(res['rows'], function(index,value){
                // 显示已选择过的关键词行
                if (is_exists(value['mid'])) {
                    $('#table-add-main-key tr[data-index="' + index + '"]').attr('data-select',true)
                    $('#table-add-main-key tr[data-index="'+index+'"]').css('background-color','rgba(0, 51, 255, 0.075)')
                }
            })
        },
        onLoadError: function () {
            console.log("数据加载失败!");
        },
        columns: [{
            field: 'keyword',
            title: '关键词',
            align: 'left',
        },{
            field: 'post_count',
            title: '文章量',
            align: 'left'
        },{
            field: 'longtail_count',
            title: '长尾量',
            align: 'left'
        }],
    });
}

function select_key(row, item_index){
    // 鼠标点选权限后的处理
    if (typeof(row) == 'object'){
        mid = row['mid'];
    }else{
        mid = row;
    }

    var eml = $('#table-add-main-key tr[data-mid="'+mid+'"]')
    if ( is_exists(mid) ){
        // 如果已选
        if ( eml.attr('data-select') ){
            eml.attr('data-select',null)
            eml.css('background-color','')
        }
        $("#key-"+mid).remove()
        removeByValue(mid,'1')
    }else{
        // 否则执行选择操作
        eml.attr('data-select',true)
        eml.css('background-color','rgba(0, 51, 255, 0.075)')

        var html1 = '<div id="key-'+row['mid']+'" class="alert alert-info select-key" role="alert">'+
                    '<span class="cur-select-key">'+row['keyword']+'</span>'+
                    '<span onclick="select_key('+row['mid']+','+item_index+')" class="closes"><i class="foo bar" data-feather="x"></i></span>'+
                    '</div>';
        $(".select-key-card-body").prepend(html1);
        feather.replace({'width':16,'height':16,'stroke-width': 2})
        select_key_id_list.push({"mid":row['mid'],"keyword":row['keyword']})
    }
}

function is_exists(mid){
    // 判断是否已选
    var res = 0
    for(var i = 0; i < select_key_id_list.length; i++) {
        cur_arr = select_key_id_list[i]['mid']
        if(cur_arr == mid) {
            res = 1;
            break;
        }
    }
    return res
}

function removeByValue(val, types) {
    // 删除已选则的
    for(var i = 0; i < select_key_id_list.length; i++) {
        if (types == '1'){
            cur_arr = select_key_id_list[i]['mid']
        }else{
            cur_arr = select_key_id_list[i]
        }
        if(cur_arr == val) {
            select_key_id_list.splice(i, 1);
            break;
        }
    }
}

$('.main_name').click(function(){
    req_key_list()
    $("#add-main-key-modal-right").modal("show")
})

$("#add-main-key-form").submit(function(e){
    $('.main_name').empty();
    $.each(select_key_id_list, function(index, value){
        $('.main_name').append( '<span style="margin-right:3px;" data-mmid="'+value['mid']+'" class="badge badge-light">'+value['keyword']+'</span>' )
    })
    $("#add-main-key-modal-right").modal("hide")
});

$("#update-column").submit(function(e){
    var data = JSON.stringify({
        domain: $("input[name='domain']").val(),
        id: $("input[name='id']").val(),
        name: $("input[name='cat_name']").val(),
        uri: $("input[name='cat_uri']").val(),
        desc: $("textarea[name='cat_desc']").val(),
        short: $("input[name='cat_short']").val(),
        keys: $("input[name='cat_keys']").val(),
        main_keys: select_key_id_list
    })
    $.ajax({
        url: "/add_column",
        type: "POST",
        dataType: "json",
        data: data,
        timeout: 1000000,
        success: function (res) {
            if (res.statu == 1){
                // 成功
                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 select_key_id_list = [];

$('.main_name span').each(function(){
    var mmid = $(this).data("mmid");
    var keyword = $(this).text();
    select_key( {"mid":mmid, "keyword":keyword} )
})

</script>

{% end %}