(function ($, zou) {
    "use strict";

    $.lrCustmerFormDesigner = {
        init: function ($self, op) {
            var dfop = {
                data: [{// 选项卡数据
                    id: zou.newGuid(),
                    title: '主表信息',
                    columns: []
                }]
            }
            $.extend(dfop, op || {});
            dfop.id = $self.attr('id');
            $self[0].zCustmerFormDesigner = { dfop: dfop };
            $self.addClass('z-custmerform-designer-layout');
            var _html = '';
            _html += '<div class="custmerform-designer-layout-left"  id="lr_custmerform_compont_list_' + dfop.id + '"></div>';

            _html += '<div class="z-custmerform-designer-layout-center">';
            _html += '<div class="z-custmerform-designer-layout-header">';
            _html += '<div class="z-custmerform-designer-tabs" id="lr_custmerform_designer_tabs_' + dfop.id + '">';
            _html += '<ul class="nav nav-tabs z-form-tab">';
            _html += '</ul>';
            _html += '</div>';
            _html += '</div>';

            _html += '<div class="z-custmerform-designer-layout-area" id="lr_custmerform_designer_layout_area_' + dfop.id + '" ></div>';
            _html += '<div class="z-custmerform-designer-layout-footer">';
            //_html += '<div class="z-custmerform-designer-layout-footer-item" id="lr_custmerform_preview_btn_' + dfop.id + '"><i class="fa fa-eye"></i><span>预览表单</span></div>';
            _html += '</div>';
            _html += '<div class="z-custmerform-designer-layout-center-bg"><img src="/Scripts/Form/images/tableform.png" /></div>';

            _html += '</div>';

            _html += '<div class="z-custmerform-designer-layout-right" id="lr_custmerform_compont_property_' + dfop.id + '"></div>';

            $self.html(_html);
            $.lrCustmerFormDesigner.bind($self);
            $.lrCustmerFormDesigner.compontinit($self);
            $.lrCustmerFormDesigner.compontbind($self);

            $.lrCustmerFormDesigner.renderTabs($self);
            $.lrCustmerFormDesigner.renderComponts($self);
        },
        // 绑定表单设计器的全局事件
        bind: function ($self) {

            var dfop = $self[0].zCustmerFormDesigner.dfop;
            // 优化滚动条
            $('#lr_custmerform_compont_list_' + dfop.id).mCustomScrollbar({
                theme: "minimal-dark"
            });
            $('#lr_custmerform_designer_tabs_' + dfop.id).mCustomScrollbar({
                axis: "x",
                theme: "minimal-dark"
            });
            $('#lr_custmerform_designer_layout_area_' + dfop.id).mCustomScrollbar({
                theme: "minimal-dark"
            });
            $('#lr_custmerform_compont_property_' + dfop.id).mCustomScrollbar({
                theme: "minimal-dark"
            });
            $('#lr_custmerform_designer_layout_area_' + dfop.id + ' .mCSB_container')[0].dfop = dfop;

            // 预览表单
            $self.find('#lr_custmerform_preview_btn_' + dfop.id).on('click', function () {
                $.lrCustmerFormDesigner.saveComponts($self);
                var url = "/FormDesigner/PreviewForm?key=" + window.keyValue;
                layer.open({
                    type: 2,
                    title: '预览表单',
                    shadeClose: true,
                    shade: 0.4,
                    area: ['80%', '80%'],
                    content: url
                });
            });
        },
        // 组件初始化
        compontinit: function ($self) {// 组件初始化
            var dfop = $self[0].zCustmerFormDesigner.dfop;
            var $compontList = $self.find('#lr_custmerform_compont_list_' + dfop.id + ' .mCSB_container');
            $.each($.formComponents, function (i, component) {
                var $component = component.init();
                $compontList.append($component);
            });
            $compontList.find('.z-custmerform-component').draggable({
                connectToSortable: '#lr_custmerform_designer_layout_area_' + dfop.id + ' .mCSB_container',
                helper: "clone",
                revert: "invalid"
            });

            $('#lr_custmerform_designer_layout_area_' + dfop.id + ' .mCSB_container').sortable({
                opacity: 0.4,
                delay: 300,
                cursor: 'move',
                placeholder: "ui-state-highlight",
                stop: function (event, ui) {
                    var $compont = $(ui.item[0]);
                    var componttype = $compont.attr('data-type');
                    if (!!componttype) {//如果是第一次移入，需要对单元项进行初始化处理
                        $compont.addClass('z-compont-item').css({ 'width': '100%' });
                        $compont.removeClass('z-custmerform-component');
                        $compont.removeAttr('data-type');
                        $.formComponents[componttype].render($compont);
                        $compont[0].dfop.id = zou.newGuid();
                        $compont.trigger("click");
                    }
                    else {
                        $compont.trigger("click");
                    }
                },
                start: function (event, ui) {
                    $self.find(".z-custmerform-designer-layout-center-bg").hide();
                    var $highlight = $self.find(".ui-state-highlight");
                    $highlight.html('拖放控件到这里');
                    var $compont = $(ui.item[0]);
                    var componttype = $compont.attr('data-type');
                    if (!componttype) {
                        $highlight.css({ width: ((100 / $compont[0].dfop.proportion) + "%") });
                    }
                },
                out: function (event, ui) {
                    if (ui.helper != null) {
                        var $componts = $('.z-custmerform-designer-layout-area .mCSB_container .z-compont-item');
                        if ($componts.length <= 1) {
                            if ($componts.length === 1) {
                                if ($componts.find('.z-compont-value').length === 0) {
                                    $(".z-custmerform-designer-layout-center-bg").show();
                                }
                            }
                            else {
                                $(".z-custmerform-designer-layout-center-bg").show();
                            }
                        }
                    }
                }
            });
        },
        // 组件事件注册
        compontbind: function ($self) {
            $self.delegate('.z-compont-item', 'click', function () {
                var $this = $(this);
                if (!$this.hasClass('active')) {
                    $('.z-custmerform-designer-layout-area .mCSB_container .z-compont-item').removeClass('active');
                    $this.addClass('active');
                    if ($('.z-custmerform-designer-layout').css('padding-right') === '0px') {
                        $('.z-custmerform-designer-layout').animate({ 'padding-right': '240px', speed: 2000 });
                        $('.z-custmerform-designer-layout-right').animate({ right: 0, speed: 2000 });
                    }
                    setTimeout(function () {
                        $.formComponents[$this[0].dfop.type].property($this);
                    }, 150);
                }
            });
            $self.delegate('.z-compont-remove i', 'click', function () {
                var $compont = $(this).parents('.z-compont-item');
                $compont.remove();
                if ($('.z-custmerform-designer-layout-area .mCSB_container .z-compont-item').length === 0) {
                    $('.z-custmerform-designer-layout-right').animate({ right: '-240px', speed: 2000 });
                    $('.z-custmerform-designer-layout').animate({ 'padding-right': '0px', speed: 2000 });
                    $(".z-custmerform-designer-layout-center-bg").show();
                }
                else {
                    $('.z-custmerform-designer-layout-area .mCSB_container .z-compont-item').eq(0).trigger('click');
                }
            });
        },
        // 渲染选项卡
        renderTabs: function ($self) {// 渲染选项卡
            var dfop = $self[0].zCustmerFormDesigner.dfop;
            var $tabs = $('#lr_custmerform_designer_tabs_' + dfop.id + ' ul');
            var tabsLength = dfop.data.length;
            var index = 0;
            $tabs.html("");
            for (var i = 0; i < tabsLength; i++) {
                var tabItem = dfop.data[i];
                $tabs.append('<li data-value="' + tabItem.id + '"><a>' + tabItem.text + '</a></li>');
                if (dfop._currentTabId === tabItem.id) {
                    index = i;
                }
            }
            // 获取当前选项卡的组件数据并渲染
            if (dfop._currentTabId !== dfop.data[index].id) {
                dfop._currentTabId = dfop.data[index].id;
                dfop._currentComponts = dfop.data[index].columns;
                dfop._isRenderComponts = true;
                $.lrCustmerFormDesigner.renderComponts($self);
            }

            if (tabsLength <= 1) {
                $self.find('.z-custmerform-designer-layout-center').removeClass('hasTab');
            }
            else {
                $self.find('.z-custmerform-designer-layout-center').addClass('hasTab');
                $tabs.find('li').eq(index).addClass('active');
            }
        },
        // 渲染数据
        renderData: function ($self) {
            var dfop = $self[0].zCustmerFormDesigner.dfop;
            var $tabs = $('#lr_custmerform_designer_tabs_' + dfop.id + ' ul');
            var tabsLength = 1;
            $tabs.html("");
            for (var i = 0; i < tabsLength; i++) {
                var tabItem = dfop.data[i];
                $tabs.append('<li data-value="' + tabItem.id + '"><a>' + tabItem.text + '</a></li>');
                if (i === 0) {
                    dfop._currentTabId = tabItem.id;
                    dfop._currentComponts = dfop.data[0].columns;
                    dfop._isRenderComponts = true;
                    $.lrCustmerFormDesigner.renderComponts($self);
                }
            }
            if (tabsLength <= 1) {
                $self.find('.z-custmerform-designer-layout-center').removeClass('hasTab');
            }
            else {
                $self.find('.z-custmerform-designer-layout-center').addClass('hasTab');
                $tabs.find('li').eq(0).addClass('active');
            }
        },
        // 保存当前选项卡的组件数据
        saveComponts: function ($self) {
            var dfop = $self[0].zCustmerFormDesigner.dfop;
            var columns = [];
            var compontsLayout = $('#lr_custmerform_designer_layout_area_' + dfop.id + ' .mCSB_container');
            compontsLayout.find('.z-compont-item').each(function () {
                var column = $(this)[0].dfop;
                columns.push(column);
            });
            for (var i = 0, l = dfop.data.length; i < l; i++) {
                if (dfop.data[i].id === dfop._currentTabId) {
                    dfop.data[i].columns = columns;
                    break;
                }
            }
        },
        // 渲染组件
        renderComponts: function ($self) {
            var dfop = $self[0].zCustmerFormDesigner.dfop;
            if (dfop._isRenderComponts) {
                var compontsLayout = $('#lr_custmerform_designer_layout_area_' + dfop.id + ' .mCSB_container');
                compontsLayout.html('');
                //console.log(JSON.stringify(dfop._currentComponts));
                if (dfop._currentComponts.length > 0) {
                    $self.find(".z-custmerform-designer-layout-center-bg").hide();
                    for (var i = 0, l = dfop._currentComponts.length; i < l; i++) {
                        var compontItem = dfop._currentComponts[i];
                        var $column = $('<div class="z-compont-item" ></div>');
                        $column[0].dfop = compontItem;
                        $column.css({ 'width': 100 / parseInt(compontItem.proportion) + '%' });
                        $.formComponents[compontItem.type].render($column);
                        compontsLayout.append($column);

                        if (i === 0) {
                            $column.trigger("click");
                        }
                    }
                }
                else {
                    $('.z-custmerform-designer-layout-right').animate({ right: '-240px', speed: 2000 });
                    $('.z-custmerform-designer-layout').animate({ 'padding-right': '0px', speed: 2000 });
                    $(".z-custmerform-designer-layout-center-bg").show();
                }
                dfop._isRenderComponts = false;
            }
        },
        // 判定所有组件数据是否输入完整（主要是数据库绑定信息）
        validData: function ($self) {
            var dfop = $self[0].zCustmerFormDesigner.dfop;
            var _data = {};
            var res = true;
            for (var i = 0, l = dfop.data.length; i < l; i++) {
                for (var j = 0, jl = dfop.data[i].columns.length; j < jl; j++) {
                    if (dfop.data[i].columns[j].type !== 'label') {
                        var table = dfop.data[i].columns[j].table;
                        var field = dfop.data[i].columns[j].field;
                        var title = dfop.data[i].columns[j].title;
                        if (table !== '' && field !== '' && (table !== undefined && field !== undefined)) {
                            //console.log(JSON.stringify(_data));
                            if (!!_data[table + '_' + field]) {
                                layer.alert('【' + title + '】绑定数据表字段与【' + _data[table + '_' + field] + '】重复！');
                                res = false;
                            }
                            else {
                                _data[table + '_' + field] = title;
                            }
                        }
                        else {
                            if (dfop.data[i].columns[j].type === 'girdtable') {
                                if (table === '' || table === undefined) {
                                    layer.alert('【' + title + '】请绑定数据表！');
                                    res = false;
                                }
                            } else {
                                if (table === '' || table === undefined) {
                                    layer.alert('【' + title + '】请绑定数据表！');
                                    res = false;
                                }
                                else if (field === '' || field === undefined) {
                                    layer.alert('【' + title + '】请绑定数据字段！');
                                    res = false;
                                }
                            }
                        }
                    }
                }
            }
            return res;
        }
    };

    //对外暴露接口
    $.fn.lrCustmerFormDesigner = function (type, op) {
        var $this = $(this);
        if (!$this.attr('id')) {
            return false;
        }
        var dfop;
        switch (type) {
            // 初始化设计器
            case "init":
                $.lrCustmerFormDesigner.init($this, op);
                break;
                // 判定所有组件数据是否输入完整（主要是数据库绑定信息）
            case 'valid':
                $.lrCustmerFormDesigner.saveComponts($this);
                return $.lrCustmerFormDesigner.validData($this);
            case "get":
                $.lrCustmerFormDesigner.saveComponts($this);
                dfop = $this[0].zCustmerFormDesigner.dfop;
                var $json = dfop.data[0].columns;
                $.each($json, function (i, item) {
                    if (item != null && item != undefined && item.type === "girdtable") {//指标
                        dfop.data[0].columns.splice(i, 1);
                        json.children = item;
                    }
                });
                json.maindata = dfop.data;
                return json;
            case "set":
                dfop = $this[0].zCustmerFormDesigner.dfop;
                dfop.data = op.data;
                $.lrCustmerFormDesigner.renderData($this);
                break;
        }
    };

})(jQuery, top.zou);