{% 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, #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{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-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-card-body, .select-permission-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 {
    width:100%;
}
#add-member-body .pagination-detail, #add-permission-body .pagination-detail {display:none;}
.select-users: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;
}
.site_status{position: relative;top:1px;}
.note-editor.note-frame{
    border: 1px solid #a9a9a9;
    box-shadow: 0px 0px 1px rgb(171, 171, 171);
    border-radius: 0;
}
</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 class="cdomain" class="text-sm">{{ 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 info">
                            <div class="col-md-8">
                                <form>
                                    {% module xsrf_form_html() %}
                                    <input type="hidden" name="id" class="form-control" value="">
                                    <div class="row info">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="text-dark"><span class="muted">*</span> 文章标题</label>
                                                <input style="font-weight: 500;" autofocus="autofocus" value="" name="title" type="text" class="form-control" required>
                                            </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>
                                                <input type="hidden" name="domain" class="form-control" value="{{ domain }}">
                                                <div data-plugin="summernote" data-option="{}" class="summernote-ui"></div>
                                            </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>
                                                <input value="/picimgs" name="img_url" type="text" class="form-control" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row info">
                                        <div class="col-md-4">
                                            <div class="form-group footer">
                                                <button id="add_article" 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="form-group">
                                    <label class="text-dark"><span class="muted">*</span> 文章作者</label>
                                    <input value="" name="author" type="text" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label class="text-dark"><span class="muted">*</span> 文章分类</label>
                                    <select name="catid" data-plugin="select2" id="select2-single" class="form-control"
                                        data-minimum-results-for-search="Infinity">
                                        {% for item in dataArray['catids'] %}
                                        <option value="{{ item['cat_id'] }}">{{ item['cat_name'] }}</option>
                                        {% end %}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="text-dark"><span class="muted">*</span> 文章标签</label>
                                    <input value="" name="tags" type="text" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label class="text-dark">标识</label>
                                    <input value="" name="flag" type="text" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label class="text-dark">城市</label>
                                    <input value="" name="area" type="text" class="form-control" required>
                                </div>
                                <div class="row info">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="text-dark">点击数</label>
                                            <input value="" name="clicks" type="text" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="text-dark">喜欢数</label>
                                            <input value="" name="likes" type="text" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="text-dark">讨厌数</label>
                                            <input value="" name="hates" type="text" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="text-dark">下载数</label>
                                            <input value="" name="downloads" type="text" class="form-control" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ############ Main END-->
    </div>
    <!-- ############ Content END-->

{% end %}
{% block js %}
<script src="/static/libs/notie/dist/notie.min.js"></script>
<script>
    $(document).ready(function () {
        $("#add_article").click(function (event) {
            event.preventDefault();
            var title = $("input[name='title']").val();
            var domain = $("input[name='domain']").val();
            var content = $(".summernote-ui").summernote('code');
            var author = $("input[name='author']").val();
            var catid = $("select[name='catid']").val();
            var tags = $("input[name='tags']").val();
            var clicks = $("input[name='clicks']").val();
            var likes = $("input[name='likes']").val();
            var hates = $("input[name='hates']").val();
            var downloads = $("input[name='downloads']").val();
            var img_url = $("input[name='img_url']").val();
            var flag = $("input[name='flag']").val();
            var area = $("input[name='area']").val();
            //var types = $("select[name='types']").val();

            var dataArray = {
                _xsrf: $("[name='_xsrf']").val(),
                title: title,
                domain: domain,
                content: content,
                author: author,
                catid: catid,
                tags: tags,
                clicks: clicks,
                hates: hates,
                likes: likes,
                downloads: downloads,
                img_url: img_url,
                flag: flag,
                area: area,
            };
            
            $.ajax({
                url: "/addarticle",
                type: "POST",
                dataType: "json",
                data: dataArray,
                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' });
                }
            });
        });
    });
</script>
{% end %}