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


{% block content %}
    <div class="row header">
        <div class="col-sm-11 ">
            <h1>{{ _('菜单模型') }}
                <small>列表</small>
            </h1>
        </div>
        <div class="col-sm-1 ">

        </div>
    </div>


    <div class="row ">
        <div class="col-sm-12 ">
            <form id="filter-form" class="form-inline pane">
                <input style="display:none" type="text">
                <script>
                    // 过滤条件字段定义
                    var filter_field_schemas = {
                        id:
                            {
                                label: '{{ _('id') }}',
                                name: 'id',
                                type: 'number',
                                data_url: '',
                                choices: []
                            },
                        parent_id:
                            {
                                label: '{{ _('父节点id') }}',
                                name: 'parent_id',
                                type: 'number',
                                data_url: '',
                                choices: []
                            },
                        alias:
                            {
                                label: '{{ _('菜单显示名') }}',
                                name: 'alias',
                                type: 'char',
                                data_url: '',
                                choices: []
                            },
                        name:
                            {
                                label: '{{ _('权限名') }}',
                                name: 'name',
                                type: 'char',
                                data_url: '',
                                choices: []
                            },
                        url:
                            {
                                label: '{{ _('访问地址带参数') }}',
                                name: 'url',
                                type: 'char',
                                data_url: '',
                                choices: []
                            },
                        url_path:
                            {
                                label: '{{ _('访问路径') }}',
                                name: 'url_path',
                                type: 'char',
                                data_url: '',
                                choices: []
                            },
                        order:
                            {
                                label: '{{ _('排序') }}',
                                name: 'order',
                                type: 'number',
                                data_url: '',
                                choices: []
                            },
                        is_show:
                            {
                                label: '{{ _('显示') }}',
                                name: 'is_show',
                                type: 'number',
                                data_url: '',
                                choices: []
                            },
                        is_log:
                            {
                                label: '{{ _('记录日志') }}',
                                name: 'is_log',
                                type: 'number',
                                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 = [{
                        name: 'alias',
                        operator: "contains",
                        value: "",
                        type: "char",
                        label: '{{ _('菜单显示名') }}',
                        choices: [],
                        is_default: true
                    }]
                </script>
                {% include "framework/widgets/filter.html" %}
            </form>
        </div>
    </div>

    <div class="row ">
        <div class="col-sm-12 ">
            <div class="table-container ">
                <div id="toolbar" class="">
                    <a id="add-btn" class="btn btn-sm btn-primary openDialog" href="/myadmin/menu/edit">
                        <span class="glyphicon glyphicon-plus-sign"></span> {{ _('添加') }}
                    </a>
                    {% if request.user.is_root %}
                        <button id="delete-btn" class="btn btn-sm btn-danger " disabled>
                            <span class="glyphicon glyphicon-remove"></span> {{ _('删除') }}
                        </button>
                    {% endif %}
                        <a id="update-menu-btn" class="btn btn-sm btn-default openDialog" data-height="400px" href="{{ url('myadmin.menu.update_menu') }}">
                            <span class="glyphicon glyphicon-update"></span> {{ _('更新菜单') }}
                        </a>

                    <button id="expandAll-btn" class="btn btn-sm btn-default ">
                        {{ _('展开') }}
                    </button>
                    <button id="collapseAll-btn" class="btn btn-sm btn-default ">
                        {{ _('收缩') }}
                    </button>
                </div>
                <div id="contextMenu" class="contextMenu">
                    <ul>

                        <li id="c_add_child" class="btn no-border btn-white ">
                            <button class="btn">{{ _('添加子项') }}</button>
                        </li>

                    </ul>
                </div>

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

    <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，所以一般情况下需要设置一下这个属性（*）
            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) {
                    alertError(res.msg)
                }
                return res.data
            },
            onLoadError: function (status, jqXHR) {
                console.dir(status)
                console.dir(jqXHR)
                art.dialog.alert(jqXHR.responseJSON.msg)

            },
            pagination: false, //是否显示分页（*）
            sidePagination: "clinet", //分页方式：client 客户端分页，server 服务端分页（*）
            queryParamsType: "",      //https://examples.bootstrap-table.com/index.html?bootstrap3#options/query-params-type.html
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 10000, //每页的记录行数（*）
            pageList: [200, 600, 2400, 'all'], //可供选择的每页的行数（*）
            search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
            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',
            columns: [{
                checkbox: true,
                align: 'center',
                valign: 'middle'
            },

                {
                    field: 'id',
                    title: "{{ _('id') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                },


                {
                    field: 'alias',
                    title: "{{ _('菜单显示名') }}",
                    align: 'left',
                    valign: 'middle',
                    sortable: true,
                    formatter: function (value, row, index) {
                        var style = row.is_show == 1 ? row.css : 'color:gray;'
                        return [
                            '<i class=" ' + row.icon + '" /></i>',
                            '<b style = "' + style + '" data-toggle="tooltip" title="' + row.label + '">' + row.alias + '</b>'
                        ].join('');
                    },
                },

                {
                    field: 'name',
                    title: "{{ _('权限名') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                },

                {
                    field: 'url',
                    title: "{{ _('访问地址带参数') }}",
                    align: 'left',
                    valign: 'middle',
                    sortable: true,
                },

                {
                    field: 'icon',
                    title: "{{ _('图标') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return '<i class=' + value + '></i>'
                    }
                },
                {
                    field: 'css',
                    title: "{{ _('样式') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                },
                {
                    field: 'order',
                    title: "{{ _('排序') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                },
                {
                    field: 'is_show',
                    title: "{{ _('显示') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                },
                {
                    field: 'is_log',
                    title: "{{ _('记录日志') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                },
                {
                    field: 'create_datetime',
                    title: "{{ _('创建时间') }}",
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                },

                {
                    field: '_operate',
                    title: '{{ _('操作') }}',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return [
                            '<a href="/myadmin/menu/edit?id=' + row.id + '" class="btn btn-xs btn-info openDialog">{{ _('编辑') }}</a> ',
                            '<a href="/myadmin/menu/edit?id=' + row.id + '&is_copy=1" class="btn btn-default btn-xs openDialog">{{ _('复制') }}</a> ',
                        ].join('');
                    },
                },
            ],
            onDblClickRow: function (row, $element, field) {
                $element.treegrid('toggle');
            },
            // 表格树设置
            idField: 'id',
            treeEnable: true,
            treeShowField: 'alias',
            parentIdField: 'parent_id',
            onPostBody: function (data) {
                var columns = $table.bootstrapTable('getOptions').columns
                console.dir(columns)

                if (columns && columns[0][1].visible) {
                    $table.treegrid({
                        initialState: 'collapsed',
                        treeColumn: 2,
                        onChange: function () {
                            $table.bootstrapTable('resetWidth')
                        }
                    })
                    $table.treegrid('getRootNodes').treegrid('expand');
                }
                // 右键菜单
                $table.find('tr').contextMenu('contextMenu', {
                    bindings:
                        {
                            'c_add_child': function (t) {
                                var row = $table.bootstrapTable('getRowByUniqueId', t.dataset.uniqueid)
                                console.dir(row)
                                art.dialog.open('/myadmin/menu/edit?parent_id=' + row.id)
                            }
                        }

                });
                $('[data-toggle="tooltip"]').tooltip()

            },

        }

        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');
        })

        $(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/menu/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 {
                        artMsg(data.msg)
                    }
                }, 'json')
            })

        })

    </script>

{% endblock %}