<style>
    .seo-category-page ul {
        padding: 0;
    }

    .seo-category-page li {
        list-style: none;
    }

    .seo-category-page .query-form .query-submit-btn {
        height: 39px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .seo-category-page .query-key {
        width: 300px;
        height: 39px;
        font-size: 14px;
        vertical-align: middle;
        outline: none;
    }

    .seo-category-page #pop {
        width: 500px;
        height: 300px;
        background: #fff;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin:auto;
    }

    .seo-category-page #pop .cover-title {
        position: absolute;
        background: #fff;
        margin-top: -34px;
    }

    .seo-category-page #pop .control-label {
        width: 60px;
        text-align: right;
    }

    .seo-category-page #pop li {
        padding: 6px 0;
    }

    .seo-category-page #pop select,
    .seo-category-page #pop input {
        height: 30px;
        width: 200px;
    }

    .seo-category-page #pop textarea {
        height: 70px;
        vertical-align: text-top;
        border-color: #ccc;
        resize: none;
    }

    .seo-category-page #pop .full-w {
        width: 390px;
    }

    .seo-category-page #pop .controls {
        display: inline-block;
    }

    .seo-category-page #pop .err-tip {
        color: #a94442;
    }
</style>

<div class="pageheader">
    <div class="media">
        <div class="pageicon pull-left">
            <i class="fa fa-th-list"></i>
        </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
                <li><a href="/seo/category">{{title}}</a></li>
                <li>{{typeName}}</li>
            </ul>
            <h4>{{title}}</h4>
        </div>
    </div>
    <!-- media -->
</div>

<div class="contentpanel seo-category-page" style="padding-bottom:0;">
    <div class="panel panel-default">
        <div class="panel-body">
            <label style="margin-right:20px;"><input type="checkbox" id="check-all" style="margin-right:5px;">全选</label>
            <a data-toggle="modal" href="#pop" class="btn btn-default" style="margin-right:10px;">增加</a>
            <button class="btn btn-default delete-all" type="submit">删除</button>

            <div class="input-append pull-right">
                <form id="query-form" action="/seo/category" class="query-form" method="get">
                    <input class="span2 query-key" type="text" name="query" value="{{query}}">
                    <button class="btn query-submit-btn" type="submit">搜索</button>
                </form>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <table id="table-category" class="table table-striped table-bordered responsive">
                <thead>
                    <tr>
                        <th class="text-center" width="60">ID</th>
                        <th class="text-center" width="160">品类</th>
                        <th class="text-center">描述</th>
                        <th class="text-center" width="120">操作</th>
                    </tr>
                </thead>

                <tbody>
                {{#each categoryList}}
                    <tr data-key="{{key}}" data-category="{{category}}" data-description="{{description}}">
                        <td class="text-center"><input type="checkbox" style="margin-right:5px;">{{id}}</td>
                        <td>{{category}}</td>
                        <td>{{description}}</td>
                        <td class="text-center">
                            <a href="#pop" class="edit-btn" data-toggle="modal">编辑</a>
                            <a href="javascript:;" class="del-btn">删除</a>
                        </td>
                    </tr>
                {{/each}}
                {{#unless categoryList}}
                    <tr>
                        <td class="text-center" colspan="6">暂无数据</td>
                    </tr>
                {{/unless}}
                </tbody>
            </table>
            {{# pager}}
                <div class="text-right">
                {{#if pages}}
                    <ul class="pagination">
                        {{# prePage}}
                            <li><a href="{{url}}">上一页</a></li>
                        {{/ prePage}}
                        {{# pages}}
                            <li class="{{#unless url}}disabled {{/unless}}{{#if cur}}active{{/if}}"><a {{#if url}}href="{{url}}"{{^}}href="javascript:;"{{/if}}>{{num}}</a></li>
                        {{/ pages}}
                        {{# nextPage}}
                            <li><a href="{{url}}">下一页</a></li>
                        {{/ nextPage}}
                    </ul>
                {{/if}}
                </div>
            {{/ pager}}
        </div>
    </div>

    <div id="pop" class="modal fade in" style="display: none;">
        <div class="modal-header">
            <a class="close clear-input" data-dismiss="modal">×</a>
            <h4>添加品类描述</h4>
            <h4 class="cover-title"></h4>
        </div>
        <div class="modal-body">
            <ul>
                <li>
                    <label class="control-label" for="input-category">品类：</label>
                    <div class="controls">
                        <input type="text" id="input-category" class="full-w">
                    </div>
                </li>
                <li>
                    <label class="control-label" for="input-description">描述：</label>
                    <div class="controls">
                        <textarea id="input-description" class="full-w"></textarea>
                    </div>
                </li>
            </ul>
        </div>
        <div class="modal-footer">
            <span class="err-tip"></span>
            <a class="btn clear-input close-pop-btn" data-dismiss="modal">关闭</a>
            <a class="btn btn-primary sure-btn">确定</a>
        </div>
    </div>
</div>


<script>
    var pop = {
        $base: $('#pop'),
        init: function() {
            var that = this;

            this.$popTitle = $('.cover-title', this.$base);
            this.$category = $('#input-category', this.$base);
            this.$description = $('#input-description', this.$base);

            this.$closeBtn = $('.close-pop-btn', this.$base);
            this.$errTip = $('.err-tip', this.$base);

            this.$base.on('click', '.clear-input', function() {
                that.clearInput();
            }).on('click', '.sure-btn', function() {
                var data;

                if (that.saving) {
                    return;
                }

                data = that.packReqData();

                if (!data) {
                    that.$errTip.text('请填写完整品类描述');
                    return;
                }

                that.saving = true;

                $.ajax({
                    url: that.editInfo ? '/seo/category/edit' : '/seo/category/add',
                    type: 'POST',
                    data: data,
                }).done(function(res) {
                    if (res.code === 200) {
                        history.go(0);
                    }
                }).always(function() {
                    that.saving = false;
                });
            });
        },
        clearInput: function() {
            this.editInfo = false;
            this.$popTitle.empty();
            this.$errTip.empty();
            this.$category.removeAttr('readonly');
            $('input, textarea', this.$base).val('');
        },
        fillInput(info) {
            console.log(info);
            if (info) {
                this.editInfo = info;
                this.$popTitle.text('编辑品类描述');
                this.$category.attr('readonly', 'readonly').val(info.category);
                this.$description.val(info.description);
            }
            this.$base.show();
        },
        packReqData() {
            var data = {
                category: $.trim(this.$category.val()),
                description: $.trim(this.$description.val())
            };
            var i;

            if (this.editInfo) {
                data.key = this.editInfo.key;
            }

            for (i in data) {
                if (data.hasOwnProperty(i) && !data[i]) {
                    return false;
                }
            }

            return data;
        },
        close() {
            this.$closeBtn.trigger('click');
        }
    }


    $(function(){
        var $checkboxs = $('#table-category :checkbox');
        var deling;

        pop.init();

        function delTdk(data) {
            deling = true;

            $.ajax({
                url: '/seo/category/delete',
                type: 'POST',
                data: {list: data},
            }).done(function(res) {
                if (res.code === 200) {
                    history.go(0);
                }
            }).always(function() {
                deling = false;
            });
        };


        $('#check-all').click(function() {
            if ($(this).attr('checked') === 'checked') {
                $checkboxs.attr('checked', 'checked');
            } else {
                $checkboxs.removeAttr('checked');
            }
        });

        $('.delete-all').click(function() {
            var arr = [];

            $('#table-category :checkbox:checked').each(function(){
                arr.push($(this).closest('tr').data());
            });

            arr.length ? delTdk(arr) : false;
        });

        $('#table-category').on('click', '.edit-btn', function(e) {
            pop.fillInput($(e.target).closest('tr').data());
        }).on('click', '.del-btn', function(e) {
            var data = $(e.target).closest('tr').data();

            delTdk([data]);
        });
    });

</script>