{% extends "framework/base.html" %}

{% block header %}
    <title>{{ _('${model_desc} 列表') }}</title>
{% endblock %}
<%!
from django.db.models.fields import IntegerField,CharField,DateTimeField,BigAutoField,TextField
from django.db.models.fields.related import ManyToManyField
from utils import json_dumps
%>

{% block content %}
<div class="row header">
    <div class="col-sm-5">
        <h1 >{{ _('${model_desc}') }}
            <small>{{ _('列表') }}</small>
        </h1>
    </div>
</div>


<div class="row ">
    <div class="col-sm-12">
        <form id="filter-form" class="form-inline pane">
            <input style="display:none" type="text">
            <%include file="filter_form.htm" args="filter_field_schemas=filter_field_schemas"/>
        </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="{{ url('${app_name}.${model_lower_name}.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>
                <!--button id="expandAll-btn" class="btn btn-sm btn-default ">
                        {{ _('展开') }}
                </button-->
                <!--button id="collapseAll-btn" class="btn btn-sm btn-default ">
                        {{ _('收缩') }}
                </button-->
            </div>
            <table id="table" class="table "></table>
        </div>
    </div>
</div>


<script>

var $table=$('#table')
var bootstrapTableOption = {
    height: Math.max(400, getWindowHeightWidth()[1] - Math.min($('html').height(), $table.offset().top) + 10),
    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){
            alertMsg(res.msg)
        }
        return res.data
      },
    onLoadError: function (status, jqXHR) {

        ajaxError(jqXHR, status)


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

        $('[data-toggle="tooltip"]').tooltip()
        $('[data-toggle="popover"]').popover()
    },
    // -- end
    columns: [{
        checkbox: true,
        align: 'center',
        valign: 'middle'
      },
    % for f in fields:
      {
        field: '${f.name}',
        title: "{{ _('${f.verbose_name}') }}",
        align: 'center',
        valign: 'middle',
        sortable: true,
        visible:true,
        % if f.choices:
        formatter:function(value,row,index){
             return row.${f.name}_alias.toString()
        }
        % endif
    },
    % endfor
    {
        field: '_operate',
        title: '{{ _('操作') }}',
        align: 'center',
        valign: 'middle',
        formatter: function(value, row, index){
              return [
                    '<a href="{{ url('${app_name}.${model_lower_name}.edit') }}?id='+row.id+'" class="btn btn-xs btn-info openDialog">{{ _('编辑') }}</a> ',
                    '<a href="{{ url('${app_name}.${model_lower_name}.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');
})

$(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("{{ url('${app_name}.${model_lower_name}.delete') }}", {id: ids}, function (rsp) {
            if (rsp.code == 0) {
                $table.bootstrapTable('remove', {
                    field: 'id',
                    values: ids
                })
                $delete.prop('disabled', true)
                art.dialog(rsp.msg).time(1)
            } else {
                art.dialog.alert(rsp.msg)
            }
        }, 'json')
    })
})

</script>
{% endblock %}