define(['mUtil', "Component"],function(mUtil, Component) {
    var DynamicForm = function(options) {
        
        Component.super(this, options);
        
        this.type = "DynamicForm";
        this.tpl = this.type + "_html";
        this.css = this.type + "_css";
        this.dataload = true;

        var _ = {}, fieldCompos = [], pageid, $container, $comp, $errorTip, formMecId;

        var vm = this.viewModel = {
            dataSource: {},
            datas: [],
            submit: {
                action: ""
            },
            readonly: false,
            standalone: true
        };

        this.mounted = function(){
            var deferred = $.Deferred();
            var that = this;
            pageid = this.pageid;
            $container = this.$container;
            $comp = this.$comp;
            $errorTip = $('<div class="wev-error"></div>');
            formMecId = "form_" + this.id;

            var onDataLoad = function(){
                //添加内置的表单和表单按钮插件
                _.initViewModel();
                //渲染动态表单
                _.render().then(function () {
                    mUtil.trigger('dataload', that.pageid, that.id);
                    deferred.resolve();
                });
                //绑定事件
                _.initEvents();
            };
            _.loadDatas(onDataLoad);
            return deferred;
        };

        this.submit = function (callbackFn) {
            mUtil.getInstance(formMecId, pageid).submit(callbackFn);
        };

        this.reset = function () {
            mUtil.getInstance(formMecId, pageid).reset();
        };

        this.hasDraftOperation = function(cb){
            cb && cb(true);
        };

        _.loadDatas = function(cb){
            var sourceType = vm.dataSource.type;
            var showError = function (msg) {
                $errorTip.html(msg).appendTo($comp);
            };
            if(vm.datas.length && vm.standalone){
                cb && cb();
            }else if(!vm.standalone && sourceType === 'table'){
                var actionUrl = mUtil.getActionUrl(this.type, {
                    action: "getDatas",
                    mec_id: this.id
                }, pageid);

                mUtil.getJSON(actionUrl, function (result) {
                    vm.datas = result.data || [];
                    cb && cb();
                }, function (msg) {
                    mUtil.getLabel(5271, "请求失败", function (label) {
                        showError(label + ": " + msg);
                    });
                });
            }else if(sourceType === 'url'){
                var path = vm.dataSource.path || "";
                require(["apiHelper"], function(apiHelper){
                    apiHelper.requestUrl(path, {STATUS_CODE: {key: "status", value: "1"}, ERROR_MSG: "errMsg"}, {}, function(result){
                        vm.datas = result.datas || [];
                        cb && cb();
                    }, showError);
                });
            }else if(sourceType === 'api'){
                var apiConfig = vm.dataSource.apiConfig || {api: {},request: {},response: {}};
                //请求参数
                require(["apiHelper"], function(apiHelper){
                    apiHelper.callApi(apiConfig, {}, function(result){
                        var formats = apiConfig.response.formats, datas;
                        if(formats.DATAS){
                            datas = mUtil.getKeyValue(formats.DATAS, result);
                        }
                        vm.datas = datas || [];
                        cb && cb();
                    }, showError);
                });
            }
        };

        _.initEvents = function(){
            $comp.on("click", ".wev-dynamic-form-group-title", function (e) {
                var $this = $(this),
                    $groupContent = $this.parent().children(".wev-dynamic-form-group-content"),
                    hideCls = "wev-hide";
                $groupContent.toggleClass(hideCls, !$groupContent.hasClass(hideCls));
            });
        };

        _.initViewModel = function(){
            if(!vm.datas.length) return;
            var formActionUrl = vm.submit.action;
            if(formActionUrl === "save"){
                formActionUrl = mUtil.getActionUrl(this.type, {
                    action: "save",
                    mec_id: this.id
                }, pageid);
            }
            vm.datas.unshift({
                el: formMecId,
                type: "Form",
                option: {
                    isDynamicForm: true,
                    submit : {
                        action : formActionUrl,//save 表单保存、自定义提交地址
                        validate : function(){
                            //表单提交前验证脚本
                            return true;
                        }
                    }
                },
                container: $container,
                pageid: pageid
            });
        };

        _.render = function(){
            var templateHtml = '';
            vm.datas.forEach(function (data) {
                var dataHtml = '';
                if(data.group){
                    dataHtml = _.renderGroup(data, dataHtml);
                }else{
                    dataHtml = _.renderField(data, dataHtml);
                }
                templateHtml += dataHtml;
            });
            this.$comp.html(templateHtml);

            //渲染动态表单内部插件
            var deferred = $.Deferred();
            if(fieldCompos.length){
                Component.load(fieldCompos, function(){
                    deferred.resolve();
                });
            }else{
                deferred.resolve();
            }
            return deferred;
        };

        _.renderGroup = function(groupData, template){
            if(!groupData) return template;
            var dataid = groupData.id || "", pid = groupData.pid || "";
            template += '<div class="wev-dynamic-form-group" data-id="'+dataid+'" data-pid="'+pid+'">';
            template += '<div class="wev-dynamic-form-group-title">'+groupData.title+'</div>';
            template += '<div class="wev-dynamic-form-group-content">';
            if(groupData.childs){
                groupData.childs.forEach(function (child) {
                    var childHtml = '';
                    if(child.group){
                        childHtml = _.renderGroup(child, childHtml);
                    }else{
                        childHtml = _.renderField(child, childHtml);
                    }
                    template += childHtml;
                });
            }
            template += '</div>';//end content
            template += '</div>';
            return template;
        };

        _.renderField = function(fieldData, template){
            var fieldId = fieldData.el || mUtil.UUID(),
                fieldType = fieldData.type,
                fieldOption = fieldData.option;

            fieldOption.form = formMecId;
            if(vm.readonly){
                fieldOption.readonly = vm.readonly;
            }
            fieldCompos.push({
                el: fieldId,
                type: fieldType,
                option: fieldOption,
                container: $container,
                pageid: pageid
            });

            var dataid = fieldData.id || "", pid = fieldData.pid || "";
            template += '<div class="wev-dynamic-form-field" data-id="'+dataid+'" data-pid="'+pid+'">\
                    <abbr id="'+fieldId+'" data-type="'+fieldType+'" data-loaded="false"></abbr>\
                </div>';
            return template;
        };

        _.initViewModel = _.initViewModel.bind(this);
        _.loadDatas = _.loadDatas.bind(this);
        _.render = _.render.bind(this);
    };

    return Component.init(DynamicForm);
});