define(['mUtil', 'Component', 'wev-loading', 'fieldParseHelper', "i18n", 'mApi/popup'], function (mUtil, Component, WevLoading, fieldHelper, i18n) {
    var NHoriList = function(options) {
        var _nhorilist = {}, $container, $errorTip, $noData;

        Component.super(this, options);

        this.type = 'NHoriList';
        this.tpl = this.type + '_html';
        this.css = this.type + '_css';
        this.dataload = true;
        this.keysOfSkipedVarParse = ['dataSource', 'dataurl', 'showSet'];
        this.components = {
            loading: new WevLoading({
                delay: 300,
                animation: 1
            })
        };

        var vm = this.viewModel = {
            dataSource: {
                type: 'mock'  //cube mock sql url api
            },
            pageSize: 10,
            showSet: {
                common: {
                    imgfield: '',
                    titlefield: '',
                    otherfields: []
                },
                cube: {
                    imgfield: {},
                    titlefield: {},
                    otherfields: []
                }
            },
            options: {
                readonly: false        //是否只读
            },
            relate: {},
            standalone : true,
            onload: function() {}
        };

        this.beforeMount = function(){
            vm.needReplaceUrl = mUtil.containsVariables(vm.options.dataurl);
            vm.isCube = vm.dataSource.type == 'cube';
        };

        this.mounted = function(){
            var that = this;
            vm.isMock = vm.dataSource.type == 'mock';
            $errorTip = this.$el.find('.wev-error');
            $noData = this.$el.find(".wev-no-data");
            $container = that.$container;

            //加载数据
            _nhorilist.refreshList(vm.onload);

            //绑定单条数据点击事件
            this.$comp.on('click', 'a.wev-navigate-right', function(e){
                if(vm.options.readonly) return;
                
                if($(e.target).closest('.wev-file[data-docid]').length) return;
                
                var $this = $(this), data = util.getDataItem($this) || {};
                if(vm.callback && mUtil.isFunction(vm.callback.click)) {
                    vm.callback.click.call(this, data);
                }
                if(vm.isCube && vm.relate.modeid != -1 && vm.options.urltype == 0){
                    if(vm.layoutUrl) {
                        $u(vm.layoutUrl + '&billid=' + data.id);
                    } else {
                        Mobile_NS.getLayoutUrl(vm.relate.modeid, 1, data.id);
                    }
                }else if(data.dataurl){
                    var dataurl = data.dataurl;
                    if(dataurl.indexOf('javascript:') == -1){
                        $u(dataurl);
                    }else{
                        mUtil.eval(dataurl, that.pageid);
                    }
                }
            });

            //解析布局url
            vm.isCube && vm.relate.modeid != -1 && !vm.options.readonly && vm.options.urltype === 0 && util.parseLayoutUrl();
        };

        this.reload = function(args, callback){
            _nhorilist.state.dynamicParam = {};
            if(mUtil.isObject(args)){
                $.extend(_nhorilist.state.dynamicParam, args);
            }
            _nhorilist.refreshList(callback);
        };

        _nhorilist.state = {
            list: [],
            dynamicParam: {},
            timestamp: 0
        };

        _nhorilist.refreshList = function(callback){
            var that = this,
                coms = this.components,
                loading = coms.loading;

            _nhorilist.state.list = [];

            loading.setRefs(this.$comp, 'wev-refreshing');
            loading.show();

            _nhorilist.loadData(function (){
                loading.hide();
                if(mUtil.isFunction(callback)){
                    callback.call(null);
                }
                mUtil.trigger('dataload', that.pageid, that.id);
            });
        };

        _nhorilist.loadData = function(callback){
            var that = this,
                timestamp = new Date().valueOf(),    //时间戳
                sourceType = vm.dataSource.type,
                showFields = vm.showSet[sourceType] || vm.showSet.common,
                state = _nhorilist.state;

            state.timestamp = timestamp;

            var currPageParam = mUtil.getPageParam(that.pageid) || {},
                defReqParam = $.extend({}, currPageParam, state.dynamicParam),
                searchKey = typeof (defReqParam.searchKey) != 'undefined' ? defReqParam.searchKey || "" : defReqParam.search_key || "",
                commonReqParam = {
                    pageNo: 1,
                    pageSize: vm.pageSize,
                    searchKey: searchKey
                },
                defInnerParam = $.extend({}, commonReqParam, {
                    PAGE_NO: 1,
                    PAGE_SIZE: vm.pageSize,
                    SEARCH_KEY: searchKey
                });

            commonReqParam = $.extend(defReqParam, commonReqParam);

            var showError = function(msg){
                callback(false, false);
                $errorTip.html(msg).show();
            }

            if(sourceType == 'cube'){
                if(!vm.dataSource.searchid) {
                    showError(mUtil.getLabel(6112, '内容来源未配置，请联系管理员。'));
                    return;
                }

                var fieldparse = fieldHelper.parseFieldIds(JSON.stringify(showFields));
                var requestParam = $.extend({}, commonReqParam, {
                    action: 'getDatas',
                    searchid: vm.dataSource.searchid,
                    fieldparse: fieldparse
                });

                var actionUrl = mUtil.getActionUrl(this.type, requestParam, this.pageid);

                mUtil.getJSON(actionUrl, function (result) {
                    result = result.data;
                    if (timestamp != state.timestamp) return;

                    var convertResult = _nhorilist.convertShowDatas4CubeSearch(result, showFields);
                    _nhorilist.renderData(convertResult.billDatas, convertResult.showDatas, callback);
                }, showError);
            } else if(sourceType == 'mock'){
                var mockData = vm.dataSource.mockData;
                if(mUtil.isArray(mockData) && mockData.length > 0){
                    mockData = vm.pageSize > mockData.length ? mockData : mockData.splice(0, vm.pageSize);
                    var convertResult = _nhorilist.convertShowDatas4Common(mockData, showFields);
                    _nhorilist.renderData(convertResult.billDatas, convertResult.showDatas, callback);
                }else{
                    showError(mUtil.getLabel(6112, "内容来源未配置，请联系管理员。"));
                }
            } else if(sourceType == 'sql' && !vm.standalone){
                //拓展请求参数
                var requestParam = $.extend({}, commonReqParam, {
                    action: 'getSqlDatas',
                    mec_id: that.id
                });

                var actionUrl = mUtil.getActionUrl(this.type, requestParam, this.pageid);

                mUtil.getJSON(actionUrl, function (result) {
                    result = result.data;
                    if (timestamp != state.timestamp) return;

                    var convertResult = _nhorilist.convertShowDatas4Common(result.datas, showFields);
                    _nhorilist.renderData(convertResult.billDatas, convertResult.showDatas, callback);
                }, showError);
            } else if(sourceType == 'url'){
                var urlConfig = vm.dataSource.urlConfig || {}, path = urlConfig.path || '';
                var sourceUrl = mUtil.replaceVal(path, defInnerParam);
                var requestParam = commonReqParam;
                var formats = urlConfig.formats || {};
                require(['apiHelper'], function(apiHelper){
                    apiHelper.requestUrl(sourceUrl, formats, requestParam, function(result){
                        if (timestamp != state.timestamp) return;

                        var datas;
                        if(formats.DATAS){
                            datas = mUtil.getKeyValue(formats.DATAS, result);
                        }else{
                            datas = [{}];
                        }

                        var convertResult = _nhorilist.convertShowDatas4Common(datas, showFields);
                        _nhorilist.renderData(convertResult.billDatas, convertResult.showDatas, callback);
                    }, showError);
                });
            } else if(sourceType == 'api'){
                var apiConfig = vm.dataSource.apiConfig || {api: {},request: {},response: {}};
                //请求参数
                var requestParam = $.extend({}, commonReqParam, defInnerParam);
                require(['apiHelper'], function(apiHelper){
                    apiHelper.callApi(apiConfig, requestParam, function(result){
                        if (timestamp != state.timestamp) return;

                        var formats = apiConfig.response.formats, datas;
                        if(formats.DATAS){
                            datas = mUtil.getKeyValue(formats.DATAS, result);
                        }else{
                            datas = [{}];
                        }
                        var convertResult = _nhorilist.convertShowDatas4Common(datas, showFields);
                        _nhorilist.renderData(convertResult.billDatas, convertResult.showDatas, callback);
                    }, showError);
                });
            } else {
                showError(mUtil.getLabel(6113, '不支持的数据来源类型，请检查配置。'));
            }
        };

        _nhorilist.convertShowDatas4CubeSearch = function(originDatas, viewset){
            var convertShowDataItem = function (billdata, fieldmap, fieldset){
                var imgfield = fieldset.imgfield, otherfields = fieldset.otherfields;
                //图片字段
                var imgDisplay = fieldHelper.isSettingValue(imgfield), imgFValue = '';
                imgDisplay && (imgFValue = fieldHelper.getFieldValue(imgfield, billdata, fieldmap, true, vm.options.readonly));
                //其他字段
                var otherFValue = [];
                if(mUtil.isArray(otherfields)){
                    otherfields.forEach(function(rowfields) {
                        var rowFieldValue = [];
                        rowfields.forEach(function(colfield) {
                            if(fieldHelper.isSettingValue(colfield)){
                                var colFieldValue = fieldHelper.getFieldValue(colfield, billdata, fieldmap, false, vm.options.readonly);
                                rowFieldValue.push(colFieldValue);
                            }
                        });
                        if(rowFieldValue.length > 0){
                            otherFValue.push(rowFieldValue);
                        }
                    });
                }
                
                return {
                    rowid           : billdata._rowid,
                    imgFieldValue   : imgFValue,
                    titleFieldValue : fieldHelper.getFieldValue(fieldset.titlefield, billdata, fieldmap),
                    otherFieldValue : otherFValue
                };
            };
            
            var fieldmap = originDatas.fieldMap, showDatas = [], listDatas = [];
            originDatas.datas.forEach(function(data){
                var dataItem = $.extend({}, data.dataMap);
                var dataId = data.keyvalue;
                var dataurl = _nhorilist.parseDataUrl(data.dataMap, vm.options.dataurl, dataId);
                
                dataItem._rowid = data._rowid = mUtil.UUID();
                dataItem.id = dataId;
                dataItem.dataurl = dataurl;
                listDatas.push(dataItem);
                
                var showDataItem = convertShowDataItem(data, fieldmap, viewset);
                showDatas.push(showDataItem);
            });
            return {
                billDatas: listDatas,
                showDatas: showDatas
            };
        };

        _nhorilist.convertShowDatas4Common = function(originDatas, viewset){
            return {
                billDatas: originDatas,
                showDatas: originDatas.map(function (d) {
                    d._rowid = mUtil.UUID();
                    d.dataurl = _nhorilist.parseDataUrl(d, vm.options.dataurl);
                    d = JSON.parse(Component.replaceMutilLanguage(JSON.stringify(d), mUtil.getUserLanguage()));
                    return {
                        rowid: d._rowid,
                        imgFieldValue: mUtil.replaceValAndVarParser(viewset.imgfield, fieldHelper.getFirstDataByFielddesc(viewset.imgfield,d)), // 图片
                        titleFieldValue: mUtil.replaceValAndVarParser(viewset.titlefield, d), // 标题
                        otherFieldValue: viewset.otherfields.map(function (field) {
                            return mUtil.replaceValAndVarParser(field, d);
                        })
                    };
                })
            }
        };

        _nhorilist.renderData = function(datas, showDatas, callback){
            var that = this,
                state = _nhorilist.state;

            mUtil.concat(state.list, datas);

            var templateHtml = [
                '{@each datas as d}',
                '<li data-id="${d.rowid}" class="wev-table-view-cell wev-media">',
                      '<a href="javascript:void(0);" class="wev-navigate-right{@if readonly} wev-data-readonly"{@else}" data-ignoreviewimg{@/if}>',
                          '<div class="wev-media-object">',
                              '$${d.imgFieldValue}',
                          '</div>',
                          '<div class="wev-media-body">',
                              '<div class="wev-nowrap">$${d.titleFieldValue}</div>',
                              '{@each d.otherFieldValue as row}',
                                  '<div class="wev-nowrap">',
                                      '$${row}',
                                  '</div>',
                              '{@/each}',
                          '</div>',
                      '</a>',
                '</li>',
                '{@/each}'
            ].join('');

            var html = mUtil.parseTemplate(templateHtml, {readonly: vm.options.readonly, datas: showDatas});
            var $list = $('.wev-table-view', this.$comp);
            var $newList = $(html);

            $list.html($newList);
            
            util.initLazyImg();

            $errorTip.hide();
            $noData[showDatas.length === 0 ? 'show' : 'hide']();
            callback && callback();
            mUtil.renderVarParser(vm.needParseVar);
        }

        _nhorilist.parseDataUrl = function(billData, originUrl, billid){
            var dataurl = '',
                useCustomUrl = (vm.isCube && (vm.options.urltype == 1 || vm.relate.modeid == -1)) || !vm.isCube;
            if(useCustomUrl && originUrl){
                dataurl = vm.needReplaceUrl ? fieldHelper.replaceVal(originUrl, billData) : originUrl;
                if(dataurl.indexOf('javascript:') == -1 && vm.isCube){
                    if(!vm.options.isNewLayout && dataurl.indexOf('&billid=') == -1 && dataurl.indexOf('?billid=') == -1){
                        dataurl += (dataurl.indexOf('?') == -1 ? '?' : '&') + 'billid=' + billid;
                    }
                }
            }else{
                dataurl = 'javascript:void(0);';
            }
            return dataurl;
        }

        var util = {
            getDataItem: function ($el) {
                var dataid = $el.closest("li.wev-table-view-cell").data("id"), data;
                _nhorilist.state.list.every(function(d){
                    if(d._rowid !== dataid) return true;
                    data = d;
                    return false;
                });
                return data;
            },
            parseLayoutUrl: function() {
                var url = mUtil.getActionUrl('service.FormComponent', { action: 'resolveDefaultLayout' });

                mUtil.getJSON(url, { modelid: vm.relate.modeid, appid: vm.relate.appid, uitype: 1 }, function (result) {
                    vm.layoutUrl = result.data || '';
                    require(['mApi/other']);//TODO 预加载
                }, function (errMsg) { });
            },
            initLazyImg: function () {
                require(['lazyImgHelper']);
            }
        }

        _nhorilist.refreshList = _nhorilist.refreshList.bind(this);
        _nhorilist.loadData = _nhorilist.loadData.bind(this);
        _nhorilist.renderData = _nhorilist.renderData.bind(this);
    };

    return Component.init(NHoriList);
});