{% extends "framework/base.html" %}
{#{% load i18n %}#}
{% block header %}
    <title>{{ _('角色模型 列表') }}</title>
{% endblock %}


{% block content %}
    <div class="row header">
        <div class="col-sm-12 ">
            <ul id="nav-list" class="nav nav-tabs">
                <li>
                    <a href="/myadmin/user/list">{{ _('管理员 列表') }}</a>
                </li>
                <li class="active">
                    <a href="/myadmin/role/list"><b>{{ _('角色 列表') }} </b></a>
                </li>

            </ul>
        </div>
    </div>

    <form id="filter-form" class="form-inline ">
        <div class="row ">
            <div class="col-sm-12 ">

                <div class="pane">

                    <script>
                        // 过滤条件字段定义
                        var filter_field_schemas = {
                            id:
                                {
                                    label: '{{ _('id') }}',
                                    name: 'id',
                                    type: 'number',
                                    data_url: '',
                                    choices: []
                                },
                            alias:
                                {
                                    label: '{{ _('角色名') }}',
                                    name: 'alias',
                                    type: 'char',
                                    data_url: '',
                                    choices: []
                                },
                            name:
                                {
                                    label: '{{ _('标识') }}',
                                    name: 'name',
                                    type: 'char',
                                    data_url: '',
                                    choices: []
                                },
                            parent:
                                {
                                    label: '{{ _('上级') }}',
                                    name: 'parent',
                                    type: 'choice',
                                    data_url: '/myadmin/role/list',
                                    choices: []
                                },

                            type:
                                {
                                    label: '{{ _('角色类型') }}',
                                    name: 'type',
                                    type: 'choice',
                                    data_url: '',
                                    choices: [{% for o in request.parser_context.view.model.fields_map.type.choices %}
                                        ["{{ o.0 }}", '{{ o.1 }}'],{% endfor %}
                                    ]
                                },
                            remark:
                                {
                                    label: '{{ _('角色描述') }}',
                                    name: 'remark',
                                    type: 'char',
                                    data_url: '',
                                    choices: []
                                },
                            home_index:
                                {
                                    label: '{{ _('角色首页') }}',
                                    name: 'home_index',
                                    type: 'char',
                                    data_url: '',
                                    choices: []
                                },
                            create_datetime:
                                {
                                    label: '{{ _('创建时间') }}',
                                    name: 'create_datetime',
                                    type: 'date',
                                    data_url: '',
                                    choices: []
                                },
                            update_datetime:
                                {
                                    label: '{{ _('更新时间') }}',
                                    name: 'update_datetime',
                                    type: 'date',
                                    data_url: '',
                                    choices: []
                                },
                        }

                        // 默认过滤条件
                        var filter_conditions = [
                            {
                                label: '{{ _('标识') }}',
                                name: 'name',
                                type: 'char',
                                data_url: '',
                                choices: []
                            }]
                    </script>
                    {% include "framework/widgets/filter.html" %}

                </div>

            </div>
        </div>


        <div class="row ">
            <div class="col-sm-12">

                <div id="toolbar" class="">

                    <a id="add-btn" class="btn btn-sm btn-primary openDialog" href="/myadmin/role/edit">
                        <span class="glyphicon glyphicon-plus-sign"></span> {{ _('添加') }}
                    </a>
                    <button id="delete-btn" class="btn btn-sm btn-danger " disabled>
                        <span class="glyphicon glyphicon-remove"></span> {{ _('删除') }}
                    </button>

                    <div class="btn-group" data-toggle="buttons">
                        {% for o in request.parser_context.view.model.fields_map.type.choices %}
                            <label class="btn btn-sm btn-default {% if loop.first %}active{% endif %}">
                                <input type="radio"
                                       {% if loop.first %}checked{% endif %}
                                       name="type__in"
                                       value="{{ o.0 }}"
                                       autocomplete="off">{{ o.1 }}
                            </label>
                        {% endfor %}
                    </div>
                    <a id="expandAll-btn" class="btn btn-xs btn-default ">
                        {{ _('展开') }}
                    </a>
                    <a id="collapseAll-btn" class="btn btn-xs btn-default ">
                        {{ _('收缩') }}
                    </a>

                </div>
                <div class="table-container">
                    <table id="table" class="table table-striped"></table>

                </div>

            </div>
        </div>

    </form>

    <script>

        var $table = $('#table')
        var bootstrapTableOption = {
            height: Math.max(600, getWindowHeightWidth()[1] - Math.min($('html').height(), $('#table').offset().top)),
            url: window.location.pathname,  //请求后台的URL（*）
            locale: BootstrapTableLocale,
            toolbar: '#toolbar',
            method: "GET", //请求方式（*）
            dataType: "json",
            striped: true, //是否显示行间隔色
            cache: false,  //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true, //是否显示分页（*）
            sortable: true,  //是否启用排序
            sortOrder: "asc", //排序方式
            resizable: true,
            queryParams: function (params) {
                var paramsArray = $('#filter-form').serializeArray()
                paramsArray.push({name: 'page_size', value: params.pageSize || 10000})
                paramsArray.push({name: 'page', value: params.pageNumber || 1})
                paramsArray.push({name: 'keywords', value: params.searchText})
                var orderPrefix = params.sortOrder == 'asc' ? '' : '-'
                paramsArray.push({name: 'ordering', value: orderPrefix + (params.sortName || '')})
                return paramsArray;

            },//传递参数（*）
            showExport: true,
            totalField: 'count',
            dataField: 'results',
            showJumpTo: "true",
            responseHandler: function (res) {
                if (res.code !== 0) {
                    art.dialog.alert(res.msg)
                }
                return res.data
            },
            onLoadError: function (status, jqXHR) {

                ajaxError(jqXHR, status)

            },
            sidePagination: "client", //分页方式：client 客户端分页，server 服务端分页（*）
            queryParamsType: "",      //https://examples.bootstrap-table.com/index.html?bootstrap3#options/query-params-type.html
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 10000, //每页的记录行数（*）
            pageList: [100, 200, 600, 2400], //可供选择的每页的行数（*）
            search: true, //是否显示表格搜索，客户端搜索，sidePagination: "server"进服务端
            showSearchClearButton: true,
            strictSearch: false, //严格查询
            showFullscreen: false,
            showColumnsToggleAll: true,
            showColumns: true, //是否显示所有的列
            showRefresh: true, //是否显示刷新按钮
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: true, //是否启用点击选中行
            multipleSelectRow: true,
            showToggle: false, //是否显示详细视图和列表视图的切换按钮
            cardView: false,   //是否显示详细视图
            detailView: false,//显示详情
            fixedColumns: true,
            fixedNumber: 1,
            fixedRightNumber: 1,
            uniqueId: 'id',
            groupBy: true,//分组
            groupByShowToggleIcon: true,
            groupByField: 'type_alias',
            groupByFormatter: function (value, idx, data) {
                return '<span class="label label-info">' + value + '</span>'
            },
            onDblClickRow: function (row, $element, field) {
                console.dir(field)
                console.dir($element)
                $element.treegrid('toggle');
            },
            // 表格树设置
            idField: 'id',
            treeEnable: true,
            treeShowField: 'parent',//在哪一列展开树形
            parentIdField: 'parent',
            //rootParentId:'null',
            onPostBody: function (data) {
                var columns = $table.bootstrapTable('getOptions').columns
                console.dir(columns)
                // http://maxazan.github.io/jquery-treegrid
                if (columns && columns[0][1].visible) {
                    $table.treegrid({
                        initialState: 'expanded',
                        treeColumn: 2,
                        onChange: function () {
                            $table.bootstrapTable('resetWidth')
                        }
                    })
                }

            },
            columns: [{
                checkbox: true,
                align: 'center',
                valign: 'middle'
            },
                {
                    field: 'id',
                    title: "{{ _('id') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                    visible: true,
                },
                {
                    field: 'alias',
                    title: "{{ _('角色名') }}",
                    align: 'left',
                    valign: 'middle',
                    sortable: true,
                },
                {
                    field: 'name',
                    title: "{{ _('标识') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                },
                {
                    field: 'parent',
                    title: "{{ _('上级id') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                    visible: false,
                },
                {
                    field: 'parent_alias',
                    title: "{{ _('上级') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                    visible: false,
                },
                {
                    field: 'creater_alias',
                    title: "{{ _('创建者') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                },
                {
                    field: 'type',
                    title: "{{ _('角色类型') }}",
                    align: 'center',
                    valign: 'middle',
                    visible: true,
                    sortable: true,
                    formatter: function (value, row, index) {
                        return row.type_alias
                    }
                },
                {
                    field: 'remark',
                    title: "{{ _('角色描述') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                },
                {
                    field: 'home_index',
                    title: "{{ _('角色首页') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                },
                {
                    field: 'create_datetime',
                    title: "{{ _('创建时间') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                },
                {
                    field: 'update_datetime',
                    title: "{{ _('更新时间') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                    visible: false,
                },
                {
                    field: '_operate',
                    title: '{{ _('操作') }}',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return [
                            '<a href="/myadmin/role/edit?id=' + row.id + '" class="btn btn-xs btn-info openDialog">{{ _('编辑') }}</a> ',
                            '<a href="/myadmin/role/edit?id=' + row.id + '&is_copy=1" class="btn btn-default btn-xs openDialog">{{ _('复制') }}</a> ',
                        ].join('');
                    },
                },
            ]
        }

        var $delete = $('#delete-btn')

        // 刷新表格
        function refreshTable() {
            $table.bootstrapTable('refresh', {})
        }

        $('.filter-btn').click(function (event) {
            event.preventDefault();
            refreshTable()
            return false
        })
        $('#expandAll-btn').click(function () {
            $table.treegrid('expandAll');
        })
        $('#collapseAll-btn').click(function () {
            $table.treegrid('collapseAll');
        })
        $('[name="type__in"]').change(function () {
            refreshTable()
        })

        $(function () {
            $table.bootstrapTable(bootstrapTableOption)
            $table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
                $delete.prop('disabled', !$table.bootstrapTable('getSelections').length)
            })

            $delete.click(function () {
                if (!confirmRandom('确认删除吗?')) {
                    return false
                }
                var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                    return row.id
                })
                $.post("/myadmin/role/delete", {id: ids}, function (data) {
                    if (data.code == 0) {
                        $table.bootstrapTable('remove', {
                            field: 'id',
                            values: ids
                        })
                        $delete.prop('disabled', true)
                        art.dialog(data.msg).time(1)
                    } else {
                        art.dialog.alert(data.msg)
                    }
                }, 'json')
            })
        })

    </script>
{% endblock %}