@using GBLab.Common.Expand;
@using GBLab.Entities
@{
    /**/

    Layout = "~/Areas/Manage/Views/DefaultSkin/Shared_Back/_Layout_Head_List.cshtml";

    // 树形数据链接
    string dataTreeUrl = ViewData["dataTreeUrl"].ToString();

    // 树形数据链接
    string dataRecommondTreeUrl = ViewData["dataRecommondTreeUrl"].ToString();

    string ExtendFunctionName = ViewData["ExtendFunctionName"].DefaultIsNullOrEmpty("");
    string ExtendFunctionNameReplaceName = ExtendFunctionName == "" ? "$NullName" : ExtendFunctionName;

    var actions = ViewData["actions"] as Dictionary<string, string>;
}

@section JavaScript{
    <script src="/App_Themes/Skin_Manage/Extend/libs/sea/sea.js?v=2.2.0.1"><</script>
    <script src="/App_Themes/Skin_Manage/Extend/libs/sea/seajs-css.js?v=2.2.0.1"></script>
    <script src="/App_Themes/Skin_Manage/Extend/helper/sea/seaConfig.js"></script>

    <script type="text/javascript">

        // ---------------------------------------------------- 基础方法 ----------------------------------------------------
        // 通过ID创建功能链接
        function createLink(id) {
            return "/manage/default/Post?ActionGUID=" + id + "&Template=" + Template + "&MvcMarkName=" + MvcMarkName + "&MvcClassID=" + $("#SearchClassID").val();
        }

        // 编辑窗口 - 打开 - 添加
        function Add(actionId) {
            dialogWin = openWindow("#form-window", " 添加 ", createLink(actionId), "icon-add").dialog('open');
        }

        // ---------------------------------------------------- 列表数据 ----------------------------------------------------
        // 参数 - 获取
        function queryParams() {
            var queryParams = {
                begin: $("#SearchTimeBegin").datebox('getValue'),
                end: $("#SearchTimeEnd").datebox('getValue'),
                userId: $("#F_UsersId").val()
            };
            return queryParams;
        }

        // 参数 - 清空
        function doClearSearch() {
            $("#SearchTimeBegin").datebox('setValue', '');
            $("#SearchTimeEnd").datebox('setValue', '');
            $("#F_UsersId").datebox('setValue', '');

            //$("#SearchBox").searchbox('setValue', '');
            //$("#SearchModuleNmae").searchbox('setValue', '');
            btnSearch();
        }

        // 数据加载
        function loadData(params) {
            return $('#grid-list').datagrid({
                //----------------------------------------------------------  字段配置 ----------------------------------------------------------
                // 冻结列
                frozenColumns: [[
                    { field: 'F_Name', title: '模块', width: 240, align: 'left', sortable: true}
                ]],

                // 滚动列
                columns: [[
                    { field: 'F_NumCount', title: '数量', width: 180, align: 'right', formatter: function (value, row, index) { return "<span style=\"font-weight:bold;\">" + value + "</span>"; } }
                    , { field: 'F_NumView', title: '浏览', width: 180, align: 'right', formatter: function (value, row, index) { return "<span style=\"font-weight:bold;\">" + value + "</span>"; } }
                    , { field: 'F_NumGuestBook', title: '留言', width: 180, align: 'right', formatter: function (value, row, index) { return "<span style=\"font-weight:bold;\">" + value + "</span>"; } }
                ]],

                pageSize: 20,
                pageList: [20, 30, 50, 100],

                //----------------------------------------------------------  数据加载 ----------------------------------------------------------
                url: createLink('@(GBLab.Common.Utils.Dictionarys.GetActionId(actions, ExtendFunctionName + "List"))'),        // 从远程站点请求数据的 URL。
                method: 'post',                                                                         // 请求远程数据的方法（method）类型。
                idField: 'F_Id',                                                                        // 指示哪个字段是标识字段。
                loadMsg: "数据加载中，请稍后……",                                                      // 当从远程站点加载数据时，显示的提示消息。

                //----------------------------------------------------------  展示配置 ----------------------------------------------------------
                striped: true,                                                             // 显示斑马线效果
                fitColumns: false,                                                         // 设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
                rownumbers: true,                                                          // 设置为 true，则显示带有行号的列。
                showHeader: true,                                                          // 定义是否显示行的头部。
                showFooter: true,                                                          // 定义是否显示行的底部。
                scrollbarSize: 10,                                                         // 滚动条宽度（当滚动条是垂直的时候）或者滚动条的高度（当滚动条是水平的时候）。
                view: detailview,

                //----------------------------------------------------------  界面调整 ----------------------------------------------------------
                resizeHandle: 'right',                                                     // 调整列的位置，可用的值有：'left'、'right'、'both'。当设置为 'right' 时，用户可通过拖拽列头部的右边缘来调整列。该属性自版本 1.3.2 起可用。

                //----------------------------------------------------------  性能配置 ----------------------------------------------------------
                nowrap: true,                                                              // 【性能】设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。
                autoRowHeight: true,                                                       // 【性能】定义是否设置基于该行内容的行高度。设置为 false，则可以提高加载性能。(没设置的时候，冻结列的高度会和右边自动撑开的高度不一致)

                //----------------------------------------------------------  分页配置 ----------------------------------------------------------
                pagination: false,                                                          // 设置为 true，则在数据网格（datagrid）底部显示分页工具栏。
                pagePosition: 'bottom',                                                    // 定义分页栏的位置。可用的值有：'top'、'bottom'、'both'。 该属性自版本 1.3 起可用。

                //----------------------------------------------------------  业务配置 ----------------------------------------------------------
                singleSelect: false,                                                       // 只能选中一行
                checkOnSelect: true,                                                       // 选中复选框关联 如果设置为 true，当用户点击某一行时，则会选中/取消选中复选框。如果设置为 false 时，只有当用户点击了复选框时，才会选中/取消选中复选框。该属性自版本 1.3 起可用。
                selectOnCheck: true,                                                       // 如果设置为 true，点击复选框将会选中该行。如果设置为 false，选中该行将不会选中复选框。 该属性自版本 1.3 起可用。
                queryParams: params,                                                       // 当请求远程数据时，发送的额外参数。
                sortName: '',                                                              // 定义可以排序的列。
                sortOrder: 'asc',                                                          // 定义列的排序顺序，只能用 'asc' 或 'desc'。
                multiSort: true,                                                           // 定义是否启用多列排序。该属性自版本 1.3.4 起可用。
                remoteSort: false,                                                         // 定义是否从服务器排序数据。

                //----------------------------------------------------------  未知配置 ----------------------------------------------------------
                width: function () { return document.body.clientWidth },                   // 宽度
                fit: true,                                                                 // 自动大小

                //----------------------------------------------------------  事件配置 ----------------------------------------------------------
                // 返回例如 'background:red' 的样式。该函数需要两个参数： rowIndex：行的索引，从 0 开始。 rowData：该行相应的记录。
                rowStyler: function (index, row) {
                    // console.log(row);
                    // if (index > 3) {
                    //     return 'background-color:#6293BB;color:#fff;';
                    // }
                },

                //----------------------------------------------------------  事件：展开详情 ----------------------------------------------------------
                detailFormatter: function (index, row) {
                    return '<div style="padding:2px" class="ddv">数量：' + row.F_Num + '</div>';
                },
                onExpandRow: function (index, row) {
                    // var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv');
                    // console.log(ddv);

                    //ddv.panel({
                    //    border: false,
                    //    cache: false,
                    //    href: 'datagrid21_getdetail.php?itemid=' + row.itemid,
                    //    onLoad: function () {
                    //        $('#dg').datagrid('fixDetailRowHeight', index);
                    //    }
                    //});
                    //$('#grid-list').datagrid('fixDetailRowHeight', index);
                },

                //----------------------------------------------------------  事件：加载部分 ----------------------------------------------------------
                onBeforeLoad: onBeforeLoad,
                onLoadSuccess: function (data) {
                    // x轴数据
                    var x = new Array();

                    // y轴数据 - Y轴可以有多个，根据实际情况添加
                    var y_num = new Array();
                    var y_numView = new Array();
                    var y_numGuestBook = new Array();

                    // 填充数据
                    data.rows.forEach(function (item) {
                        y_num.push(item.F_NumCount);
                        y_numView.push(item.F_NumView);
                        y_numGuestBook.push(item.F_NumGuestBook);
                        x.push(item.F_Name);
                    });

                    var item_Num = {
                        name: '信息数量',
                        type: 'bar',
                        data: y_num,
                        markPoint: null,
                        markLine: null
                    }

                    var item_NumView = {
                        name: '浏览数量',
                        type: 'bar',
                        data: y_numView,
                        markPoint: null,
                        markLine: null
                    }

                    var item_NumGuestBook = {
                        name: '留言数量',
                        type: 'bar',
                        data: y_numGuestBook,
                        markPoint: null,
                        markLine: null
                    }

                    var dataInfo = new Array();
                    dataInfo.push(item_Num);
                    dataInfo.push(item_NumView);
                    dataInfo.push(item_NumGuestBook);

                    // 渲染图表
                    seajs.use(
                        [
                            "/App_Themes/Skin_Manage/Extend/libs/echart/echarts.min.js?v=2.2.0.1"
                            , "/App_Themes/Skin_Manage/Extend/libs/divlistener.js?v=2.2.0.1"
                            , "/App_Themes/Skin_Manage/Extend/helper/plus/plus_echarts_line.js?v=2.2.0.1"
                        ]
                        , function () {
                            var chart_line = new gblab_echarts_line.func();
                            chart_line.config.text = '数据图表';
                            chart_line.config.isminmaxpoint = true;
                            chart_line.config.ishelpline = true;
                            chart_line.mustconfig.dataY = dataInfo;
                            chart_line.mustconfig.dataX = x;
                            chart_line.init();
                        }
                    );

                    setTimeout(function () {
                        $("#timeOut").html(data.timeOut);
                        grid.datagrid('fixDetailRowHeight');
                        grid.datagrid("clearSelections");
                        bindFancybox();
                    }, 0);
                },
                onLoadError: onLoadError,

                //----------------------------------------------------------  事件：点击事件 ----------------------------------------------------------
                // 单击事件
                onClickCell: onClickCell,

                // 双击事件
                onDblClickRow: function (rowIndex, rowData) {
                    var rowId = rowData.F_Id;
                    var rowGuid = rowData.F_Guid;
                    @Html.Raw(T_FunctionAction.Get_Action_Buttons(GBLab.Common.Utils.Dictionarys.GetActionId(actions, ExtendFunctionName + "Edit"), "jsAction").Replace(ExtendFunctionNameReplaceName, ""))
                },
            });
        }

        // 执行 - 查询
        function btnSearch() {
            grid=loadData(queryParams());

            // 分页信息初始化
            grid.datagrid('getPager').pagination({
                links: 10,                                                                 // 链接数量，只有当 'links' 项包含在 'layout' 中时才是有效的。该属性自版本 1.3.5 起可用。
                /*
                 * 分页布局定义。该属性自版本 1.3.5 起可用。
                 * 布局项目包括一个或多个下列值：
                 * 1、list：页面尺寸列表。
                 * 2、sep：页面按钮分割。
                 * 3、first：第一个按钮。
                 * 4、prev：前一个按钮。
                 * 5、next：后一个按钮。
                 * 6、last：最后一个按钮。
                 * 7、efresh：刷新按钮。
                 * 8、manual：允许输入域页码的手动页码输入框。
                 * 9、links：页码链接。
                 *
                 * 10 info:自定义信息
                 */
                layout: ['list', 'sep', 'links', 'sep', 'first', 'prev', 'next', 'last', 'sep', 'refresh', 'info'],

                total: 1,                                                                  // 记录总数，应该在创建分页（pagination）时设置。
                pageSize: 20,                                                              // 当设置了 pagination 属性时，初始化页面尺寸。
                pageNumber: 1,                                                             // 当设置了 pagination 属性时，初始化页码。
                pageList: [20, 25, 30, 50, 100],                                               // 分页信息

                loading: true,                                                             // 定义数据是否正在加载。

                showPageList: true,                                                        // 定义是否显示页面列表。
                showRefresh: true,                                                         // 定义是否显示刷新按钮。

                beforePageText: "第",                                                      // 在 input 组件之前显示 label。
                afterPageText: "页 ，共 <span class=\"red\">{pages}</span> 页",            // 在 input 组件之后显示 label。
                displayMsg: '当前 <span class=\"red\">{from}</span> 到 <span class=\"red\">{to}</span> 条，总 <span class=\"red\">{total}</span> 条，耗时 <span class=\"red\" id=\"timeOut\"></span> 毫秒',   // Display a page information.
            });

            $('body').layout();
        }

        // 数据导出
        function Download() {
            $.ajax({
                url: createLink('@(GBLab.Common.Utils.Dictionarys.GetActionId(actions, ExtendFunctionName + "Download"))'),
                type: "post",
                data: queryParams(),
                cache: false,
                async: true,
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    window.location.href = data;
                }
            });
        }
    </script>
}

<!-- 图表 -->
<div title="数据图表"
     data-options="region:'north',split:true,iconCls:'icon-ok'"
     style="height:30%"
     collapsible="true"
     minWidth="10"
     minHeight="10"
     maxWidth="100000"
     maxHeight="100000"
     border="true">
    <div id="p" class="easyui-panel" data-options="iconCls:'icon-save',border:false,closable:true,collapsible:true,minimizable:true,maximizable:true,fit:true">
        <div id="main" style="width: 100%;height:100%;"></div>
    </div>
</div>

<!-- 列表 -->
<div data-options="region:'center',border:true" style="height:70%;">
    <div id="tabs" class="easyui-tabs menu-tabs" data-options="border:false,fit:true">
        <div title="订单标记">
            <div id="grid-list" title="" data-options="toolbar:'#tb',border:false"></div>
        </div>
        <div title="帮助" style="padding:15px;">
            <div>展示系统动作的操作次数</div>
        </div>
    </div>

    <!-- 工具栏 -->
    <div id="tb" class="tb" style="height: auto">
        <div class="toolbar">
            <ul>
                <li>
                    筛选：
                    <input class="easyui-datebox w120" id="SearchTimeBegin" editable="false" prompt="- 开始时间 -" value="@DateTime.Now.AddMonths(-1).ToString("yyyy-MM-dd")" />
                    -
                    <input class="easyui-datebox w120" id="SearchTimeEnd" editable="false" prompt="- 结束时间 -" value="@DateTime.Now.ToString("yyyy-MM-dd")" />
                </li>
                <li style="@(Request.QueryString["IsSelf"].DefaultIsNullOrEmpty(false)==true?"display:none;":"")">
                    @RenderPage("/Areas/Manage/Views/DefaultSkin/Modules/00Common/Partial/_Tags.cshtml", new { Tags = "", TagsName = "F_Users", TagsModuleType = "users", IsOnly=true, Width=160 })
                </li>
            </ul>
            <div class="search">
                <a href="javascript:void(0);" class="easyui-linkbutton" iconcls="icon-clear" plain="true" onclick="doClearSearch();">清空</a>
                <a href="javascript:" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:false" onclick="btnSearch();">查询</a>
                @Html.Raw(T_FunctionAction.Get_Action_Buttons(GBLab.Common.Utils.Dictionarys.GetActionId(actions, ExtendFunctionName + "Download")).Replace(ExtendFunctionNameReplaceName, ""))
            </div>
        </div>
    </div>
</div>

<div id="form-window" title="操作窗口" data-options="modal:true,closed:true,fit:false" style="width:88%;height:88%;"></div>