<div id="nlist" class="page out" data-title="列表">
    <div class="page-content" id="nlist_content">
        <div id="nlist-header"></div>
        <div id="nlist-a" ></div>
    </div>
</div>
<script>
    require(["mUtil", "NavHeader", "NList"], function (mUtil, NavHeader, NList) {
        var _u = require("mUtil");
        var hasClsPicker = typeof clsPicker !== "undefined";

        if(!hasClsPicker) {
            new NavHeader({
                el: "nlist-header",
                container: "#nlist",
                option: {
                    fixed: true,
                    title: "列表插件",
                    smallTitle: "nlist"
                }
            }).render();
        }

        new NList({
            el: "nlist-a",
            option: {
                dataSource: {
                    type: 'mock',//数据来源类型：cube/mock/url/api四种
                    searchid: -999,
                    mockData: [
                      { "id": "1", "name": "杨文元", "age": "43", "birthday": "1976-02-20"},
                      { "id": "2", "name": "刘长庚", "age": "45", "birthday": "1978-03-26"},
                      { "id": "3", "name": "付蕾", "age": "34", "birthday": "1985-08-09"}
                    ],
                    urlConfig: {
                        path: '/mobilemode/mobile/demo/plugin/NList/data.jsp',
                        formats: {
                            DATAS: "datas",
                            TOTAL_SIZE: "totalSize",
                            STATUS_CODE: {
                                key: "",
                                value: ""
                            },
                            ERROR_MSG: ""
                        }
                    },
                    apiConfig: {
                        api: {
                            id: "4ff3c2114b484c9b888c32554c38cc7b",
                            name: "文档列表"
                        },
                        request: {
                            params: {
                                query: [
                                    {name: "categoryid", value: ""},
                                    {name: "searchKey", value: "{search_key}"},
                                    {name: "pageNo", value: "{page_no}"},
                                    {name: "pageSize", value: "{page_size}"}
                                ],
                                body: {}
                            },
                            path: "/X-WEV-DocList",
                            type: "GET"
                        },
                        response: {
                            type: "HTML",
                            formats: {
                                DATAS: "datas",
                                TOTAL_SIZE: "totalSize",
                                STATUS_CODE: {
                                    key: "status",
                                    value: 1
                                },
                                ERROR_MSG: "errMsg"
                            }
                        }
                    },
                },
                pageStart: 1,
                pageSize: !hasClsPicker ? 10 : 1,
                showSet: {
                    common: {//通用，但是建模查询不适用，可单独为每种类型指定view，类型详见dataSource的type字段
                        imgfield: '$m.getAvatar("{id}");',
                        titlefield: '{name}',
                        otherfields: [
                            '年龄：{age}',
                            '生日：{birthday}'
                        ]
                    },
                    cube: {
                        imgfield : {fieldid : 6544, fielddesc : "图片上传"},
                        titlefield : {fieldid : 6528, fielddesc : "单行文本框"},
                        otherfields : [
                            [{fieldid : 6534, fielddesc : "人力资源浏览框"}],
                            [{fieldid : -1, fielddesc : "{rlzyllk}"}]
                        ]
                    },
                    url: {
                        imgfield: "<img src='{avatar}' style='width:40px;height:40px;border-radius:40px;'/>",
                        titlefield: "{title}",
                        otherfields: [
                            "内容:{content}",
                            "分类:{cat}",
                            "日期:{date}"
                        ]
                    },
                    api: {
                        imgfield: "",
                        titlefield: "{subject}",
                        otherfields: [
                            "{owner}, {createtime}"
                        ]
                    }
                },
                quickSearch: {
                    hide: false,
                    tip: "请输入..."
                },
                advancedSearch: {
                    enable: true,
                    title: '高级检索',
                    fields: [
                        {fieldid: 6528, showname: '单行文本框'}
                    ]
                },
                btns: [
                    {
                        type: 1,//1文字 2图片
                        text: "新增",
                        click: function(){
                            Mobile_NS.msg("点击自定义按钮");
                        }
                    },
                    {
                        type: 2,
                        icon: "/mobilemode/piclibrary/02-E9_017afd/addition.png",
                        click: function(){
                            Mobile_NS.msg("点击自定义图片按钮");
                        }
                    }
                ],
                swipe: {
                    enable: true,
                    items: [
                        {
                            text: "收藏",
                            click: function(){
                                console.log(this);
                            },
                            bgcolor: "#f213f2"
                        }
                    ]
                },
                options: {
                    readonly: false,
                    selectable: false,        //数据可选
                    showOnePage: false        //显示一页
                },
                callback: {
                    click : function(data){
                        $u("/mobilemode/mobile/demo/plugin/NList/detail.html?billid="+data.id, true);
                    }
                },
                onload: function() {
                    var _u = require("mUtil");
                    var hasClsPicker = typeof clsPicker !== "undefined";

                    if(!hasClsPicker) return;
                    
                    _u.vetically("#nlist-a");

                    clsPicker.golalSetting({
                        container: ".wev-comp-NList",
                        type: "NList"
                    });

                    new clsPicker({
                        selector: "li .wev-media-object.wev-pull-left",
                        text: ".wev-media-object",
                        lineYSkew: 80,
                        angle: 80,
                        height: 300,
                        position: "bottom right"
                    });
                    new clsPicker({
                        selector: "li .wev-ellipsis",
                        text: ".wev-ellipsis",
                        skew: [50, ""],
                        angle: 80,
                        lineYSkew: 50,
                        height: 300,
                        position: "bottom right"
                    });

                    new clsPicker({
                        selector: ".wev-table-view-cell",
                        text: ".wev-table-view-cell",
                        skew: [1.1, 10],
                        angle: 80,
                        lineYSkew: 30,
                        position: "bottom left"
                    });

                    new clsPicker({
                        selector: ".wev-search",
                        skew: [8, ""],
                        lineYSkew: 100
                    });
                    new clsPicker({
                        selector: ".wev-search-inner",
                        skew: [3, ""],
                        lineYSkew: 70
                    });

                    new clsPicker({
                        selector: ".wev-small-icon",
                        skew: ["", 2],
                        lineYSkew: 55
                    });
                    new clsPicker({
                        selector: ".btn:last-child",
                        text: ".btn"
                    });
                }
            }
        }).render();
    });
</script>