/**
 * Created by ct on 2016/8/13.
 */
require.config({
    baseUrl: 'resources/js',
    paths: {
        "formatData": "lib/charts/formatData",
        "jquery": "lib/bootstrap/js/jquery-2.1.4.min",
        "bootstrap": "lib/bootstrap/js/bootstrap.min",
        "jquery-ui": "lib/jquery-ui.min",
        "lodash": "lib/gridstack/js/lodash.min",
        "underscore": "lib/underscore/underscore-min",
        "spectrum": "lib/bootstrap/js/spectrum",
        "renderMenu" : 'app/renderMenu',
        "domReady" : 'lib/domReady',
        "zrender": "lib/zrender/zrender",
        "zrender/shape/Rectangle": "lib/zrender/zrender",
        "zrender/shape/Image": "lib/zrender/zrender",
        "zrender/tool/color": "lib/zrender/zrender",
        "zrender/Storage" : "lib/zrender/zrender",
        "CanvasTag" : "customModule/CanvasTag/CanvasTag",
        "CanvasTagOfImage" : "customModule/CanvasTag/CanvasTagOfImage",
        "confirmModal": "lib/confirm/confirm-bootstrap",
        "vue": "lib/vue/vue",
        "bootstrapFileStyle": "lib/bootstrapFileStyle/fileinput.min",
        "interact": "lib/interact/interact",
        "echarts": "lib/charts/echarts",
        "theme": "lib/charts/theme",
        "nicescroll": "lib/nicescroll/jquery.nicescroll.min",
        "tableExport": "lib/tableExport/tableexport.min",
        "file-saverjs": "lib/tableExport/FileSaver",
        "blobjs": "lib/tableExport/Blob",
        "xlsx": "lib/tableExport/xlsx",
        "jzip": "lib/tableExport/jszip",
        "tooltipster": "lib/gridly/tooltipster.bundle.min",
        "generateTableHtml": "app/generateTableHtml",
        "commonModule" : 'app/commonModule',
        "thenBy": "lib/thenBy",
        "jquery-confirm": "lib/confirm/jquery-confirm.min",
        "jquery-loading": "lib/jqueryLoading/jquery.loading"
    },
    shim : {
        "bootstrap" : { "deps" :['jquery'] },
        "confirmModal" : { "deps" :['jquery'] },
        "bootstrapFileStyle" : { "deps" :['bootstrap'] },
        "tableExport": { "deps" :['blobjs', 'file-saverjs', 'xlsx', 'jzip'] }
    },
    waitSeconds: 30
});

require(['jquery','domReady','vue','CanvasTagOfImage','renderMenu','echarts','interact','formatData','CanvasTag','zrender','theme','commonModule',
        'bootstrapFileStyle','spectrum','confirmModal','nicescroll','tableExport'],
    function ($,domReady,vue,CanvasTagOfImage,renderMenu,echarts,interact,formatData,CanvasTag,zrender,theme,commonModule) {
        domReady(function () {
            //charts配置双向绑定组件
            vue.component('chart-option-component',{
                template: formatData.tableAndConfigOfBarAndLine(),
                props: ['chartOption'],
                data: function(){
                    return {
                        option: '',
                        myChart: '',
                        optionSetting: {
                            titleContent: '',
                            titleTop: '',
                            titleX: '',
                            titleFontFamily: '',
                            titleFontSize: '',
                            titleFontWeight: '',
                            titleFontStyle: '',
                            titleFontColor: '',
                            subtitleContent: '',
                            subtitleFontFamily: '',
                            subtitleFontSize: '',
                            subtitleFontWeight: '',
                            subtitleFontStyle: '',
                            subtitleFontColor: '',
                            tooltipShow: '',
                            tooltipBorderColor: '',
                            tooltipBorderWidth: '',
                            tooltipBackgroundColor: '',
                            tooltipFontFamily: '',
                            tooltipFontSize: '',
                            tooltipFontWeight: '',
                            tooltipFontColor: '',
                            backgroundOpacity: ''
                            // xRotate: '',
                            // yAxisContent: ''
                        }
                    }
                },
                watch: {
                    chartOption: function(){
                        var self  = this;
                        //颜色选择器初始化
                        $("#titleFontColor").spectrum({
                            showInput: true,
                            allowEmpty:true,
                            color: this.chartOption.title[0].textStyle.color,
                            change: function(color){
                                self.optionSetting.titleFontColor = color.toHexString();
                            }
                        });
                        $("#subtitleFontColor").spectrum({
                            showInput: true,
                            allowEmpty:true,
                            color: this.chartOption.title[0].subtextStyle.color,
                            change: function(color) {
                                self.optionSetting.subtitleFontColor = color.toHexString();
                            }
                        });
                        $("#tooltipBorderColor").spectrum({
                            showInput: true,
                            allowEmpty:true,
                            color: this.chartOption.tooltip[0].borderColor,
                            change: function(color) {
                                self.optionSetting.tooltipBorderColor = color.toHexString();
                            }
                        });
                        $("#tooltipBackgroundColor").spectrum({
                            showInput: true,
                            allowEmpty:true,
                            color: this.chartOption.tooltip[0].backgroundColor,
                            change: function(color) {
                                self.optionSetting.tooltipBackgroundColor = color.toHexString();
                            }
                        });
                        $("#tooltipFontColor").spectrum({
                            showInput: true,
                            allowEmpty:true,
                            color: this.chartOption.tooltip[0].textStyle.color,
                            change: function(color) {
                                self.optionSetting.tooltipFontColor = color.toHexString();
                            }
                        });
                        if(JSON.stringify(this.chartOption.backgroundColor).split(",").length<4){
                            this.chartOption.backgroundColor = 'rgba(255,255,255,1)';
                        }
                        if(this.chartOption.title[0] || this.chartOption.tooltip[0]){
                            var settings = {
                                titleContent: this.chartOption.title[0].text,
                                titleTop: this.chartOption.title[0].top,
                                titleX: this.chartOption.title[0].left,
                                titleFontFamily: this.chartOption.title[0].textStyle.fontFamily,
                                titleFontSize: this.chartOption.title[0].textStyle.fontSize,
                                titleFontWeight: this.chartOption.title[0].textStyle.fontWeight,
                                titleFontStyle: this.chartOption.title[0].textStyle.fontStyle,
                                titleFontColor: this.chartOption.title[0].textStyle.color,
                                subtitleContent: this.chartOption.title[0].subtext,
                                subtitleFontFamily: this.chartOption.title[0].subtextStyle.fontFamily,
                                subtitleFontSize: this.chartOption.title[0].subtextStyle.fontSize,
                                subtitleFontWeight: this.chartOption.title[0].subtextStyle.fontWeight,
                                subtitleFontStyle: this.chartOption.title[0].subtextStyle.fontStyle,
                                subtitleFontColor: this.chartOption.title[0].subtextStyle.color,
                                tooltipShow: this.chartOption.tooltip[0].show,
                                tooltipBorderColor: this.chartOption.tooltip[0].borderColor,
                                tooltipBorderWidth: this.chartOption.tooltip[0].borderWidth,
                                tooltipBackgroundColor: this.chartOption.tooltip[0].backgroundColor,
                                tooltipFontFamily: this.chartOption.tooltip[0].textStyle.fontFamily,
                                tooltipFontSize: this.chartOption.tooltip[0].textStyle.fontSize,
                                tooltipFontWeight: this.chartOption.tooltip[0].textStyle.fontWeight,
                                tooltipFontColor: this.chartOption.tooltip[0].textStyle.color,
                                backgroundOpacity: JSON.stringify(this.chartOption.backgroundColor).split(",")[3].replace(')"','')*100,
                                // xRotate: this.chartOption.xAxis[0].axisLabel.rotate ? this.chartOption.xAxis[0].axisLabel.rotate : 0,
                                // yAxisContent: ''
                            };
                            this.optionSetting = settings;
                        }
                        this.option = this.chartOption;
                        $("#optionModal").unbind("shown.bs.modal");
                        $("#optionModal").on("shown.bs.modal", function (e) {
                            self.myChart = echarts.init(document.getElementById("optionContainer"));
                            self.myChart.setOption(self.option,true);
                        });
                    },
                    optionSetting: {
                        handler: function(val, oldVal){
                            this.chartOption.title[0].text = this.optionSetting.titleContent;
                            this.chartOption.title[0].top = this.optionSetting.titleTop;
                            this.chartOption.title[0].left = this.optionSetting.titleX;
                            this.chartOption.title[0].textStyle.fontFamily = this.optionSetting.titleFontFamily;
                            this.chartOption.title[0].textStyle.fontSize = this.optionSetting.titleFontSize;
                            this.chartOption.title[0].textStyle.fontWeight = this.optionSetting.titleFontWeight;
                            this.chartOption.title[0].textStyle.fontStyle = this.optionSetting.titleFontStyle;
                            this.chartOption.title[0].textStyle.color = this.optionSetting.titleFontColor;
                            this.chartOption.title[0].subtext = this.optionSetting.subtitleContent;
                            this.chartOption.title[0].subtextStyle.fontFamily = this.optionSetting.subtitleFontFamily;
                            this.chartOption.title[0].subtextStyle.fontSize = this.optionSetting.subtitleFontSize;
                            this.chartOption.title[0].subtextStyle.fontWeight = this.optionSetting.subtitleFontWeight;
                            this.chartOption.title[0].subtextStyle.fontStyle = this.optionSetting.subtitleFontStyle;
                            this.chartOption.title[0].subtextStyle.color = this.optionSetting.subtitleFontColor;
                            this.chartOption.tooltip[0].show = 'false' == this.optionSetting.tooltipShow ? false : true;
                            this.chartOption.tooltip[0].borderColor = this.optionSetting.tooltipBorderColor;
                            this.chartOption.tooltip[0].borderWidth = this.optionSetting.tooltipBorderWidth;
                            this.chartOption.tooltip[0].backgroundColor = this.optionSetting.tooltipBackgroundColor;
                            this.chartOption.tooltip[0].textStyle.fontFamily = this.optionSetting.tooltipFontFamily;
                            this.chartOption.tooltip[0].textStyle.fontSize = this.optionSetting.tooltipFontSize;
                            this.chartOption.tooltip[0].textStyle.fontWeight = this.optionSetting.tooltipFontWeight;
                            this.chartOption.tooltip[0].textStyle.color = this.optionSetting.tooltipFontColor;
                            if(JSON.stringify(this.chartOption.backgroundColor).split(",").length == 4){
                                this.chartOption.backgroundColor = this.chartOption.backgroundColor.split(",")[0]+","+this.chartOption.backgroundColor.split(",")[1]+","+this.chartOption.backgroundColor.split(",")[2]+","+this.optionSetting.backgroundOpacity*0.01+")";
                            }
                            // this.chartOption.xAxis[0].axisLabel.rotate = this.optionSetting.xRotate;
                            // this.chartOption.yAxis[0].name = this.optionSetting.yAxisContent;
                            if(this.myChart != ''){
                                this.myChart.setOption(this.option,true);
                            }
                        },
                        deep: true
                    }
                }
            });
            //text配置双向绑定组件
            vue.component('text-option-component',{
                template: formatData.tableAndConfigOfText(),
                props: ['textOption'],
                data: function(){
                    return {
                        option: '',
                        optionSetting: {
                            text: '',
                            textColor: '',
                            fontSize: '',
                            color: '',
                            strokeColor: ''
                        }
                    }
                },
                watch: {
                    textOption: function(){
                        var self = this;
                        $("#textColor").spectrum({
                            showInput: true,
                            allowEmpty:true,
                            color: self.textOption.textColor,
                            change: function(color) {
                                self.optionSetting.textColor = color.toHexString();
                            }
                        });

                        $("#tagColor").spectrum({
                            showInput: true,
                            allowEmpty:true,
                            color: self.textOption.color,
                            showAlpha: true,
                            change: function(color) {
                                var c = color.toRgb();
                                self.optionSetting.color = "rgba(" + c.r + ", " + c.g + ", " + c.b + ", " + c.a + ")";
                            }
                        });


                        $("#tagStrokeColor").spectrum({
                            showInput: true,
                            allowEmpty:true,
                            color: self.textOption.strokeColor,
                            showAlpha: true,
                            change: function(color) {
                                var c = color.toRgb();
                                self.optionSetting.strokeColor = "rgba(" + c.r + ", " + c.g + ", " + c.b + ", " + c.a + ")";
                            }
                        });
                        self.optionSetting.text = self.textOption.text;
                        self.optionSetting.textColor = self.textOption.textColor;
                        self.optionSetting.fontSize = self.textOption.textFont.split(" ")[1].replace("px","");
                        self.optionSetting.color = self.textOption.color;
                        self.optionSetting.strokeColor = self.textOption.strokeColor;
                        self.option = self.textOption;
                        $("#textOptionModal").unbind("shown.bs.modal");
                        $("#textOptionModal").on("shown.bs.modal", function (e) {
                            CanvasTag().render("textOptionContainer",self.option);
                        });

                    },
                    optionSetting: {
                        handler: function(){
                            this.option.text = this.optionSetting.text;
                            this.option.textColor = this.optionSetting.textColor;
                            this.option.textFont = this.textOption.textFont.split(" ")[0] + " " +this.optionSetting.fontSize + "px " + this.textOption.textFont.split(" ")[2];
                            this.option.color = this.optionSetting.color;
                            this.option.strokeColor = this.optionSetting.strokeColor;
                            CanvasTag().render("textOptionContainer",this.option);
                        },
                        deep: true
                    }
                }
            });
            //image配置双向绑定组件
            vue.component('img-option-component',{
                template: formatData.tableAndConfigOfSubGroup(),
                props: ['subGroupOption'],
                data: function(){
                    return {
                        option: '',
                        optionSetting: {
                            subGroupText: '',
                            subGroupTextColor: '',
                            subGroupFontSize: ''
                        }
                    }
                },
                watch: {
                    subGroupOption: function(){
                        var self = this;
                        $("#subGroupTextColor").spectrum({
                            showInput: true,
                            allowEmpty:true,
                            color: self.subGroupOption.textColor,
                            change: function(color){
                                self.optionSetting.subGroupTextColor = color.toHexString();
                            }
                        });
                        self.optionSetting.subGroupText = self.subGroupOption.text;
                        self.optionSetting.subGroupTextColor = self.subGroupOption.textColor;
                        self.optionSetting.subGroupFontSize = self.subGroupOption.textFont.split(" ")[1].replace("px","");
                        self.option = self.subGroupOption;
                        $("#textOptionModal").unbind("shown.bs.modal");
                        $("#textOptionModal").on("shown.bs.modal", function (e)  {
                            CanvasTagOfImage().render("textOptionContainer",'',self.option,false);
                        });
                    },
                    optionSetting: {
                        handler: function(){
                            this.option.text = this.optionSetting.subGroupText;
                            this.option.textColor = this.optionSetting.subGroupTextColor;
                            this.option.textFont = this.subGroupOption.textFont.split(" ")[0] + " " +this.optionSetting.subGroupFontSize+ "px " + this.subGroupOption.textFont.split(" ")[2];
                            CanvasTagOfImage().render("textOptionContainer",'',this.option,false);
                        },
                        deep: true
                    }
                }
            });

            var app = new vue({
                el: '#app',
                data: {
                    backgroundClass: 'background-default',
                    isExpanded: false,
                    isLoader: false,
                    isSaveLoader: 'none',
                    currentActiveIndex: -1,
                    currentSelectedIndex: -1,
                    dangerIndex: -1,
                    helpTip: '请上传组件图片.',
                    isImgLoad: 'none',
                    isChartsLoad: 'none',
                    hideImg: '',
                    isShowImgSetting: false,
                    order: 0,
                    //自定义组件option属性
                    myWidgetOption: '',
                    subGroupText: '',
                    subGroupTextColor: '',
                    subGroupFontSize: '',
                    subGroupImageWidth: '',
                    subGroupImageHeight: '',
                    subGroupFontLocation: '',
                    //“我的图表”和“我的组件”所需动态渲染的数据
                    myCharts: [],
                    mySubGroup: [],
                    //可拖拽模块的配置
                    widgets: [],
                    //选中渲染是否失败
                    // isRenderFail: false,
                    //当前页是否保存
                    isSave:true,
                    //组件参数
                    chartOption: '',
                    textOption: '',
                    subGroupOption: '',
                    //当前渲染组件
                    currentView: '',
                    //是否全屏
                    isAllScreen: false,
                    //自定义组件图片base64编码
                    subGroupBase64: '',
                    //获取从哪一个图表或者组件菜单进入细节设置模态框
                    domId: 0,
                    chartType: '',
                    //是否切换了主题
                    currentTheme: '',
                    renderFailList: [],
                    //每一个图表container的overflow属性
                    scrollType: 'visible',
                    tableCurrentPage: {},
                    currentPage: 1,
                    allSubGroupPage: 0
                },
                methods: {
                    //背景样式切换
                    saveCurrentBackground: function(event){
                        var target = $(event.target);
                        var targetClass = event.target.className.replace("img-thumbnail", "").trim();
                        $.each(target.parent().siblings().find('span'),function (index,obj) {
                            var sibClass = $(obj).attr("class").replace("img-thumbnail", "").trim() || "";
                            if(app.backgroundClass == sibClass){
                                app.backgroundClass = '';
                            }
                        });
                        app.backgroundClass = targetClass;
                        var deferred = $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            url: 'myPanel/crud',
                            data : {
                                exportId : $("#exportId").val(),
                                backgroundClass : targetClass
                            },
                            headers :{
                                oper : 'update'
                            },
                            success: function(){
                                app.isSave = false;
                            }
                        });
                    },
                    //侧边菜单栏显示/隐藏
                    toggleSideMenu: function(){
                        if(app.isExpanded == false){
                            app.isExpanded = true
                        }else {
                            app.isExpanded = false
                        }
                    },
                    //标记当前菜单所选项
                    toggleSecondMenu: function(index){
                        this.currentActiveIndex = index;
                        $(".side-menu .nav .dropdown .collapse").collapse('hide');
                    },
                    //顶部菜单划过动画
                    topMenuMouseEnter: function(index){
                        app.dangerIndex = index;
                    },
                    //自定义控件
                    makeSelfWidget: function(){
                        if($("[name='imgFile']").val() == ""){
                            app.helpTip = '请先选择您要上传的控件背景图';
                        }else {
                            app.isImgLoad = 'block';
                            $.ajax({
                                type: 'POST',
                                url: 'imgToBase64',
                                data: new FormData($("#imgFile")[0]),
                                async: false,
                                cache: false,
                                contentType: false,
                                processData: false,
                                success: function(data){
                                    if(data.imgBase64 == "noFile"){
                                        app.helpTip = "请先选择您要上传的控件背景图";
                                        app.isImgLoad = 'none';
                                    }else if(data.imgBase64 == "noImage"){
                                        app.helpTip = "请上传图片类型文件";
                                        app.isImgLoad = 'none';
                                    }else{
                                        app.hideImg = ['<img src=\'data:image/jpg;base64,'+data.imgBase64+'\' onerror="this.src=\'resources/img/white.jpg\'">'].join("");
                                        setTimeout(function(){
                                            if($("#subGroupContainer").parent().find("img")[0]){
                                                app.isImgLoad = 'none';
                                                var canvasTagOfImage = CanvasTagOfImage().render("subGroupContainer",$("#subGroupContainer").parent().find("img")[0]);
                                                app.isShowImgSetting = true;
                                                app.myWidgetOption = canvasTagOfImage.getOption();
                                                app.subGroupBase64 = data.imgBase64;
                                                //初始化
                                                app.subGroupText = app.myWidgetOption.text;
                                                app.subGroupTextColor = app.myWidgetOption.textColor;
                                                app.subGroupFontSize = app.myWidgetOption.textFont.split(" ")[1].replace('px','');
                                                app.subGroupFontLocation = app.myWidgetOption.textPosition;
                                            }
                                        }, 0);
                                    }
                                },
                                error: function(){
                                    alert("上传失败，请重试！");
                                }
                            });
                        }
                    },
                    //获取所有图表和控件
                    getAllCharts: function(tag){
                        app.allSubGroupPage++;
                        //先置空以防止vue就地复用
                        if(tag == 'init'){
                            app.myCharts = [];
                            app.mySubGroup = [];
                            app.allSubGroupPage = 1;
                        }
                        this.currentSelectedIndex = -1;
                        this.isChartsLoad = 'block';
                        $.ajax({
                            type: 'POST',
                            url: 'selectChartInfo',
                            data: {
                                page: app.allSubGroupPage,
                                pageSize: 10
                            },
                            success: function(response){
                                app.isChartsLoad = 'none';
                                // var myCharts = [];
                                // var mySubGroup = [];
                                for(var i=0;i<response.data.length;i++){
                                    var dataType;
                                    if(parseInt(response.data[i].isRealTime) == 0){
                                        dataType = "引用当前数据库";
                                    }else if(parseInt(response.data[i].isRealTime) == 1){
                                        dataType = "实时获取";
                                    }
                                    if(response.data[i].chartType == 'text:subGroupOfImage'){
                                        app.mySubGroup.push({ chartId: response.data[i].id, base64: "data:image/jpg;base64,"+JSON.parse(response.data[i].jsCode).image});
                                    }else if($.inArray(response.data[i].chartType,['bar','line','pie','table']) != -1){
                                        app.myCharts.push({ chartId: response.data[i].id,chartType: response.data[i].chartType, chartName: response.data[i].chartName, dataType: dataType, imgSrc: "resources/img/"+response.data[i].chartType+"_chart.png" });
                                    }
                                }
                                // app.myCharts = myCharts;
                                // app.mySubGroup = mySubGroup;
                                /**
                                 * 注册图表删除事件
                                 */
                                setTimeout(function(){
                                    $('.deleteOneChart').click(function (event) {
                                        event.stopPropagation();//屏蔽父元素select样式选择
                                    });
                                    $('.deleteOneChart').confirmModal({
                                        confirmTitle     : '提示',
                                        confirmMessage   : '你确定删除该图表？',
                                        confirmOk        : '是的',
                                        confirmCancel    : '取消',
                                        confirmDirection : 'rtl',
                                        confirmStyle     : 'primary',
                                        confirmCallback  : function (target) {
                                            var cid = target.parent().attr('data-cid');
                                            $.ajax({
                                                type: 'POST',
                                                url: 'authority/checkUserAuthority',
                                                data: {
                                                    chartId: cid
                                                },
                                                success: function(data){
                                                    if(data.haveAuthority == true){
                                                        var deferred = $.ajax({
                                                            type: 'POST',
                                                            dataType: 'json',
                                                            url: 'myChart/deleteOneChart',
                                                            data : {
                                                                "chartId": cid
                                                            },
                                                            headers :{
                                                                oper : 'delete'
                                                            }
                                                        });
                                                        deferred.done(function(data){
                                                            if(data.isDelete == true){
                                                                target.parent().remove();//当前面板的图表类型选择框删除
                                                                $.each($('.draggable'),function (index,target) {//删除panel中该图表的div元素
                                                                    if(cid == $(target).attr("chartid")){
                                                                        $(target).remove();
                                                                    }
                                                                });
                                                            }else{
                                                                alert("部分设计面板中使用了本图表，暂不可删除!");
                                                            }
                                                        })
                                                    }else if(data.haveAuthority == false){
                                                        alert("您没有权限！");
                                                    }
                                                }
                                            });
                                        },
                                        confirmDismiss   : true,
                                        confirmAutoOpen  : false
                                    });
                                },0);
                            }
                        });
                    },
                    //图表和控件是否选中
                    select: function(index){
                        if(index == this.currentSelectedIndex){
                            this.currentSelectedIndex = -1;
                        }else {
                            this.currentSelectedIndex = index;
                        }
                    },
                    //图表，组件选中渲染
                    renderSelected: function(type){
                        if( this.currentSelectedIndex != -1 ){
                            var defer = $.ajax({
                                type: 'POST',
                                url: 'selectOneChartInfo',
                                data: "id=" + this.currentSelectedIndex
                            });
                            defer.done(function(data){
                                app.isSave = false;
                                var $targetDiv;
                                if(data.chartType.indexOf("subGroupOfImage") >= 0){
                                    var imgBase64 = JSON.parse(data.jsCode).image;
                                    var option = JSON.parse(data.jsCode);
                                    app.order = app.order + 1;
                                    app.widgets.push({ chartType: 'text:subGroupOfImage',id: app.order,chartId: data.id,width: option.width + 'px',height: option.height + 'px', hideImg: 'data:image/jpg;base64,'+imgBase64, chartName: '' });
                                    setTimeout(function(){
                                        $targetDiv = $("#"+app.order);
                                        option.image = $targetDiv.parent().find("img")[0];
                                        CanvasTagOfImage().render(app.order,"",option,false);
                                        renderMenu.renderMenu($targetDiv,'',app);
                                    }, 0);
                                }else {
                                    app.order = app.order + 1;
                                    var chartTag;
                                    if(data.chartType == 'table'){
                                        chartTag = 'table';
                                    }else {
                                        chartTag = 'chart';
                                    }
                                    app.widgets.push({ chartType: chartTag,id: app.order,chartId: data.id,width: '400px',height: '400px', chartName: data.chartName });
                                    setTimeout(function(){
                                        if(parseInt(data.isRealTime) == 0){
                                            $targetDiv = $("#"+app.order);
                                            if(data.chartType == 'table'){
                                                app.scrollType = 'auto';
                                                // $targetDiv.html(data.jsCode);
                                                app.tableCurrentPage[data.id] = 1;
                                                renderMenu.renderTableInPanel($targetDiv,data,app);
                                            }else {
                                                echarts.init($targetDiv[0]).setOption(JSON.parse(data.jsCode));
                                                app.$nextTick(function(){
                                                    renderMenu.renderMenu($targetDiv, data.chartName, app);
                                                });
                                            }
                                        }else if(parseInt(data.isRealTime) == 1){
                                            $.ajax({
                                                async: false,
                                                type: 'POST',
                                                contentType: "application/json; charset=utf-8",
                                                url: 'render',
                                                data: JSON.stringify({
                                                    'chartType': data.chartType,
                                                    'dataRecordId': data.sqlRecordingId,
                                                    'builderModel': JSON.parse(data.buildModel)
                                                }),
                                                success: function(option){
                                                    $targetDiv = $("#"+app.order);
                                                    var newOption = JSON.parse(data.jsCode);
                                                    newOption.series[0].data = option.series[0].data;
                                                    if('legend' in option){
                                                        newOption.legend.data = option.legend.data;
                                                    }
                                                    if('xAxis' in option){
                                                        newOption.xAxis[0].data = option.xAxis[0].data;
                                                    }
                                                    echarts.init($targetDiv.get(0)).setOption(newOption);
                                                    renderMenu.renderMenu($targetDiv, data.chartName, app);
                                                },
                                                error: function(){
                                                    app.renderFailList.push(app.order);
                                                }
                                            });
                                        }
                                        $(".draggable").niceScroll();
                                    }, 0);
                                }
                            });
                        }
                        if(type == 'mySubGroup'){
                            $("#mySubGroup").modal('toggle');
                        }else if( type == 'myChart' ){
                            $("#myChart").modal('toggle');
                        }
                    },
                    //全屏/取消全屏
                    allScreen: function(){
                        this.isAllScreen = this.isAllScreen == false ? true : false;
                    },
                    //保存并渲染自定义组件
                    renderMySubGroup: function(){
                        if($("#subGroupContainer").attr("zid")){
                            var pzr = zrender.getInstance($("#subGroupContainer").attr("zid"));//原控件
                            var option = $.extend(true, {}, pzr.storage.getShapeList()[0].style);
                            //保存时只能保存图片的base64编码
                            option.image = app.subGroupBase64;
                            var deffer = $.ajax({
                                type: 'POST',
                                url: 'addCharts',
                                data : {
                                    'chartType': "text:subGroupOfImage",
                                    'sqlRecordingId': "0",
                                    'buildModel': JSON.stringify({}),
                                    'jsCode': JSON.stringify(option),
                                    'chartName': "自定义组件"
                                }
                            });
                            deffer.done(function(result){
                                app.order++;
                                app.widgets.push({ id: app.order, chartId: result, chartType: 'text:subGroupOfImage', width: option.width + 'px', height: option.height + 'px', hideImg: 'data:image/jpg;base64,'+app.subGroupBase64 });
                                app.isSave = false;
                                setTimeout(function(){
                                    var $target  = $("#"+app.order);
                                    option.image = $target.parent().find("img")[0];
                                    //渲染时
                                    CanvasTagOfImage().render(app.order,"",option,false);
                                    renderMenu.renderMenu($target,'',app);
                                    //重置模态框
                                    app.isShowImgSetting = false;
                                    $(".fileinput-remove").trigger("click");
                                    $('#subGroupContainer').replaceWith('<div id="subGroupContainer" class="thumbnail" style="width:45%;height:410px;float:left;overflow: auto;border:1px dashed rgb(238,238,238);"></div>');
                                }, 0);
                            });
                        }
                        $("#subGroupModal").modal('toggle');
                    },
                    //主题切换递归运算
                    overloadItemStyle: function(optItem, theme) {
                        for(k in theme) {
                            if(optItem[k] && (typeof theme[k] !== 'object')){
                                delete optItem[k];
                            } else if(typeof theme[k] == 'object') {
                                this.overloadItemStyle(optItem, theme[k]);
                            }
                        }
                    },
                    //修改图表，组件细节后保存
                    saveOptionChange: function(){
                        var domOption;
                        if(this.chartType.indexOf('text') >= 0){
                            //id为domId div的zid
                            var domZid = $("#"+this.domId).attr("zid");
                            var domPzr = zrender.getInstance(domZid);//原控件
                            domOption = $.extend(true, {}, domPzr.storage.getShapeList()[0].style);
                            //id为textOptionContainer div的zid
                            var zid = $("#textOptionContainer").attr("zid");
                            var pzr = zrender.getInstance(zid);//原控件
                            var option = $.extend(true, {}, pzr.storage.getShapeList()[0].style);
                            if(this.chartType.indexOf("subGroupOfImage") < 0){
                                domOption.text =  option.text;
                                domOption.textColor = option.textColor;
                                domOption.textFont = option.textFont;
                                domOption.color = option.color;
                                domOption.strokeColor = option.strokeColor;
                                //文字组件不存在复用，不保存到T_MY_CHARTS表中
                                var index= this.order - 1;
                                this.widgets[index].option = domOption;
                                // domPzr.storage.getShapeList()[0].style = domOption;
                                CanvasTag().render(this.domId,domOption);
                                renderMenu.renderMenu($("#" + this.domId),'',app);
                                // domPzr.refresh();
                            }else {
                                domOption.text = option.text;
                                domOption.textColor = option.textColor;
                                domOption.textFont = option.textFont;
                                //不能直接把option给domPzr实例，有些属性不能同步，例如画布宽高
                                // domPzr.storage.getShapeList()[0].style = domOption;
                                CanvasTagOfImage().render(this.domId,'',domOption,false);
                                renderMenu.renderMenu($("#"+this.domId),'',app);
                                // domPzr.refresh();
                                // domOption.image = option.image.currentSrc.split(',')[1];
                            }
                        }else if(this.chartType.indexOf('chart') >= 0){
                            var instance = echarts.getInstanceByDom(document.getElementById("optionContainer"));
                            echarts.getInstanceByDom(document.getElementById(this.domId)).setOption(instance.getOption());
                            domOption = instance.getOption();
                        }
                        if(this.chartType.indexOf('subGroupOfImage') >= 0 || this.chartType.indexOf('chart') >= 0){
                            $.ajax({
                                type: 'POST',
                                url: 'updateChartInfo',
                                headers: {
                                    imgBase64: domOption.image.currentSrc.split(',')[1]
                                },
                                data: {
                                    'id': $("#"+this.domId).attr("chartId"),
                                    'jsCode': JSON.stringify(domOption)
                                },
                                success: function(){
                                    app.isSave = false;
                                },
                                error: function(){
                                    alert("保存时失败，请重试!");
                                }
                            });
                        }
                    },
                    //保存当前面板图表
                    saveCurrentPanel: function(){
                        this.isLoader = true;
                        this.isSaveLoader = 'block';

                        var arr = window.location.href.split("/");
                        var exportId = $("#exportId").val();
                        var shareHref = arr[0]+"//"+arr[2]+"/"+arr[3]+"/share.page?exportId="+exportId;

                        var widgets = this.widgets;
                        var chartIds = [];          //保存图表id
                        var containerIds = [];           //保存容器id
                        for(var i=0;i<widgets.length;i++) {
                            var chartId = widgets[i].chartId;
                            var containerId = widgets[i].id;
                            if(widgets[i].chartType.indexOf('rectangle') < 0){
                                chartIds.push(chartId);
                                containerIds.push(containerId);
                            }

                            var target = $('#'+containerId);
                            if(widgets[i].width == 0 && widgets[i].height == 0){     //如果已删除，height和width为0
                                this.widgets[i].datax = 0;
                                this.widgets[i].datay = 0
                            }else {
                                if(target.css('transform').toString() == 'none'){     //如果未拖动，css属性transform属性为none
                                    this.widgets[i].datax = 0;
                                    this.widgets[i].datay = 0;
                                }else {
                                    this.widgets[i].datax = typeof($(target).attr('data-x')) == 'undefined' ? target.css('transform').toString().split(',')[4] : $(target).attr('data-x');
                                    this.widgets[i].datay = typeof($(target).attr('data-y')) == 'undefined' ? target.css('transform').toString().split(',')[5].replace(')','') : $(target).attr('data-y');
                                }
                                this.widgets[i].width = target.css('width');
                                this.widgets[i].height = target.css('height');
                            }
                            if(this.currentTheme != '' && widgets[i].chartType.indexOf('text') < 0 && widgets[i].chartType.indexOf('table') < 0){
                                this.widgets[i].themeName = this.currentTheme;
                            }
                        }

                        $.ajax({
                            type: 'POST',
                            url: "panelChartsWrapper/updateWrapper",
                            data: "chartIds="+chartIds+"&containerIds="+containerIds+"&exportId="+exportId
                        });

                        $.ajax({
                            type: 'POST',
                            url: "export",
                            data: {
                                "htmlCode": JSON.stringify(this.widgets),
                                "exportId": exportId,
                                "extraMsg": shareHref
                            },
                            success : function(){
                                app.isSave = true;                           //点击导出后表明已保存
                                app.isLoader = false;
                                app.isSaveLoader = 'none';
                                // location.reload();
                            },
                            error : function(){
                                app.isLoader = false;
                                app.isSaveLoader = 'none';
                                alert("保存失败，请重试！");
                            }
                        });
                    },
                    //改变图表主题
                    changeTheme: function(themeName){
                        this.isSave = false;
                        this.currentTheme = themeName;
                        var widgets = this.widgets;
                        for(var i=0;i<widgets.length;i++) {
                            var target = $("#" + widgets[i].id);
                            var chartName = $(target).find('#chartTitle').text();
                            if (widgets[i].chartType.indexOf("text") < 0 && widgets[i].chartType.indexOf('table') < 0) {
                                var chartOption = echarts.getInstanceByDom($(target)[0]).getOption();
                                echarts.dispose($(target)[0]);
                                echarts.registerTheme(themeName, theme[themeName]);
                                var exportChart = echarts.init($(target)[0], themeName);
                                app.overloadItemStyle(chartOption, theme[themeName]);       // 主题与图表option合并
                                if(chartOption.series[0].type == 'line' || chartOption.series[0].type == 'bar'){
                                    chartOption.xAxis[0].axisLine.lineStyle.color = '#999999';
                                    chartOption.yAxis[0].axisLine.lineStyle.color = '#999999';
                                    chartOption.xAxis[0].axisTick.lineStyle.color = '#999999';
                                    chartOption.yAxis[0].axisTick.lineStyle.color = '#999999';
                                    chartOption.xAxis[0].axisLabel.textStyle.color = '#999999';
                                    chartOption.yAxis[0].axisLabel.textStyle.color = '#999999';
                                }
                                exportChart.setOption(chartOption);
                                renderMenu.renderMenu($(target), chartName, app);
                            }
                        }
                    }
                },
                mounted: function () {
                    //初始化设计面板背景
                    var deferred = $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        url: 'myPanel/crud',
                        data : {
                            exportId : $("#exportId").val()
                        },
                        headers :{
                            oper : 'query'
                        }
                    });
                    deferred.done(function(data){
                        if(data.myPanel.backgroundClass){
                            app.backgroundClass = data.myPanel.backgroundClass;
                        }
                    });
                    //fileInput初始化
                    $("#input-id").fileinput({
                        language: 'zh',
                        showUpload: false,
                        allowedFileExtensions : ['jpg', 'png','gif']
                    });
                    //颜色选择器初始化(自定义组件)
                    $("#subGroupTextColorMounted").spectrum({
                        showInput: true,
                        allowEmpty:true,
                        color: 'black',
                        change: function(color){
                            app.subGroupTextColor = color.toHexString();
                        }
                    });
                    //初始化拖拽
                    interact('.draggable')
                        .draggable({
                            inertia: true,
                            restrict: {
                                restriction: "#app",
                                endOnly: true,
                                elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
                            },
                            onmove: function(event){
                                app.isSave = false;
                                var target = event.target,
                                    // keep the dragged position in the data-x/data-y attributes
                                    x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
                                    y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

                                // translate the element
                                target.style.webkitTransform =
                                    target.style.transform =
                                        'translate(' + x + 'px, ' + y + 'px)';

                                // update the posiion attributes
                                target.setAttribute('data-x', x);
                                target.setAttribute('data-y', y);
                            }
                        })
                        .resizable({
                            preserveAspectRatio: false,
                            edges: { left: true, right: true, bottom: true, top: true }
                        })
                        .on('resizemove', function (event) {
                            var target = event.target,
                                x = (parseFloat(target.getAttribute('data-x')) || 0),
                                y = (parseFloat(target.getAttribute('data-y')) || 0);

                            // update the element's style
                            target.style.width  = event.rect.width + 'px';
                            target.style.height = event.rect.height + 'px';

                            // translate when resizing from top or left edges
                            x += event.deltaRect.left;
                            y += event.deltaRect.top;

                            target.style.webkitTransform = target.style.transform =
                                'translate(' + x + 'px,' + y + 'px)';

                            target.setAttribute('data-x', x);
                            target.setAttribute('data-y', y);

                            //自适应容器变化
                            app.isSave = false;
                            var chartType = target.getAttribute('charttype');
                            var id = target.getAttribute('id');
                            var zid = target.getAttribute('zid');
                            if(chartType.indexOf("text") >= 0){
                                var zrInstance = zrender.getInstance(zid);
                                var width = parseInt($(target).css('width').replace('px',''));
                                var height = parseInt($(target).css('height').replace('px',''));
                                if(chartType.indexOf("subGroup") >= 0){
                                    zrInstance.storage.getShapeList()[0].style.height = height;
                                    zrInstance.storage.getShapeList()[0].style.width = width;
                                }else {
                                    zrInstance.storage.getShapeList()[0].style.height = height - (height / 4);
                                    zrInstance.storage.getShapeList()[0].style.width = width - (width / 4);
                                }
                                zrInstance.resize();
                            }else if( chartType == 'chart' ){
                                echarts.getInstanceByDom(document.getElementById(id)).resize();
                            }else if( chartType == 'table' ){
                                width = parseInt($(target).css('width').replace('px',''));
                                height = parseInt($(target).css('height').replace('px',''))*0.77;
                                $(target).find('table').css('width', width);
                                $(target).find('table').css('height', height);
                            }
                        });
                    //文字组件初始化
                    $('.background-text-pick-block').draggable({
                        cursor: "move",
                        opacity: 0.7,
                        appendTo :'#app',
                        helper: function (event) {
                            var target = $(this).clone();
                            target.zIndex( 100000000 );
                            target.css('position','absolute');
                            return target;
                        }
                    });
                    $(".app-container").droppable({
                        drop : function (event,ui) {
                            //屏蔽重复拖拽
                            if(ui.draggable.hasClass("background-text-pick-block")) {
                                app.order ++;
                                app.widgets.push({ chartType: 'text:rectangle',id: app.order,width: '400px',height: '100px',datax: (ui.position.left),datay:(ui.position.top) });
                                setTimeout(function(){
                                    CanvasTag().render(app.order);
                                    renderMenu.renderMenu($("#" + app.order),'',app);
                                    $("#"+app.order).css('background-color', 'unset');
                                }, 0);
                            }
                        }
                    });
                    //domId,chartType初始化
                    $("#optionModal").on("show.bs.modal",function(e){
                        app.domId = e.relatedTarget.parentNode.parentNode.parentNode.getAttribute('id');
                        app.chartType = e.relatedTarget.parentNode.parentNode.parentNode.getAttribute('charttype');
                    });
                    $("#textOptionModal").on("show.bs.modal",function(e){
                        app.domId = e.relatedTarget.parentNode.parentNode.parentNode.getAttribute('id');
                        app.chartType = e.relatedTarget.parentNode.parentNode.parentNode.getAttribute('charttype');
                    });
                    //显示面板
                    var chartIds = [];
                    var containerIds = [];
                    // var textIds = [];
                    var initCharts = $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        url: 'myPanel/crud',
                        data : {
                            exportId : $("#exportId").val()
                        },
                        headers :{
                            oper : 'query'
                        }
                    });
                    initCharts.done(function(data){
                        if(data.myPanel.htmlCode){
                            app.widgets = JSON.parse(data.myPanel.htmlCode);
                            app.$nextTick(function(){
                                app.order = app.widgets.length;
                                for(item in app.widgets){
                                    if(app.widgets[item].chartId){
                                        chartIds.push(app.widgets[item].chartId);
                                        containerIds.push(app.widgets[item].id);
                                    }else {
                                        // textIds.push(app.widgets[item].id);
                                        CanvasTag().render(app.widgets[item].id,app.widgets[item].option);
                                        renderMenu.renderMenu($('#'+app.widgets[item].id),'',app);
                                        $('#'+app.widgets[item].id).css('background-color', 'unset');
                                    }
                                }
                                //查询所有chart的option
                                var defer = $.ajax({
                                    type: 'POST',
                                    url: 'getShareOptions',
                                    data: 'cids='+chartIds
                                });
                                defer.done(function(data) {
                                    var themeName;
                                    var chartNames = [];
                                    for (var i = 0; i < chartIds.length; i++) {
                                        if(app.widgets[i].themeName){
                                            themeName = app.widgets[i].themeName;
                                        }
                                        var target = $('#'+containerIds[i]);
                                        if (data[i].chartType.indexOf("text") < 0) {
                                            var exportChart = echarts.init($(target)[0]);
                                            if (parseInt(data[i].isRealTime) == 0) {
                                                if(data[i].chartType == 'table'){
                                                    app.scrollType = 'auto';
                                                    // $("#"+containerIds[i]).html(data[i].jsCode);
                                                    app.tableCurrentPage[data[i].id] = 1;
                                                    renderMenu.renderTableInPanel(target,data[i],app);

                                                    var menuInfo = [];
                                                    menuInfo.push(target);
                                                    menuInfo.push(data[i].chartName);
                                                    chartNames.push(menuInfo);
                                                }else {
                                                    exportChart.setOption(JSON.parse(data[i].jsCode));
                                                    renderMenu.renderMenu($(target), data[i].chartName, app);
                                                }
                                            } else if (parseInt(data[i].isRealTime) == 1) {
                                                $.ajax({
                                                    async: false,
                                                    type: 'POST',
                                                    contentType: "application/json; charset=utf-8",
                                                    url: 'render',
                                                    data: JSON.stringify({
                                                        'chartType': data[i].chartType,
                                                        'dataRecordId': data[i].sqlRecordingId,
                                                        'builderModel': JSON.parse(data[i].buildModel)
                                                    }),
                                                    success: function (option) {
                                                        var newOption = JSON.parse(data[i].jsCode);        // 若本图表选择数据获取模式为实时获取，
                                                        newOption.series[0].data = option.series[0].data;  // 在渲染时将数据库中的option中的series部分替换为新生成的option的series部分即可
                                                        if ('legend' in option) {
                                                            newOption.legend.data = option.legend.data;
                                                        }
                                                        if ('xAxis' in option) {
                                                            newOption.xAxis[0].data = option.xAxis[0].data;
                                                        }
                                                        exportChart.setOption(newOption);
                                                        renderMenu.renderMenu($(target), data[i].chartName, app);
                                                    },
                                                    error: function () {
                                                        app.renderFailList.push(app.order);
                                                    }
                                                });
                                            }
                                        } else {
                                            if (data[i].chartType.indexOf("subGroupOfImage") >= 0) {
                                                var option = JSON.parse(data[i].jsCode);
                                                option.image = $(target).find("img")[0];
                                                option.width = app.widgets[i].width.replace('px','');
                                                option.height = app.widgets[i].height.replace('px','');
                                                CanvasTagOfImage().render(containerIds[i],"",option,false);
                                                renderMenu.renderMenu($(target),'',app);
                                            }
                                        }
                                    }
                                    app.$nextTick(function(){
                                        //table的menu渲染
                                        // for(var i=0;i<chartNames.length;i++){
                                        //     renderMenu.renderMenu(chartNames[i][0], chartNames[i][1], app);
                                        // }
                                        $(".draggable").niceScroll();
                                    });
                                    //theme
                                    app.changeTheme(themeName);
                                    app.isSave = true;
                                })
                            });
                        }
                        //保存返回图表渲染
                        if(window.location.href.indexOf("chartId") > 0){
                            var chartId = window.location.href.split("=")[2].replace("#","");
                            var defer01 = $.ajax({
                                type: 'POST',
                                url: 'selectOneChartInfo',
                                data: "id="+chartId
                            });
                            defer01.done(function(data){
                                if(data && $('[chartId='+data.id+']').length <= 0) {
                                    app.isSave = false;
                                    app.order = app.order + 1;
                                    var chartTag;
                                    if(data.chartType == 'table'){
                                        chartTag = 'table';
                                    }else {
                                        chartTag = 'chart';
                                    }
                                    app.widgets.push({ chartType: chartTag,id: app.order,chartId: data.id,width: '400px',height: '400px', chartName: data.chartName });
                                    app.$nextTick(function(){
                                        if(parseInt(data.isRealTime) == 0){
                                            if(data.chartType == 'table'){
                                                app.scrollType = 'auto';
                                                // $("#"+app.order).html(data.jsCode);
                                                app.tableCurrentPage[data.id] = 1;
                                                renderMenu.renderTableInPanel($("#"+app.order),data,app);
                                            }else {
                                                echarts.init($("#"+app.order)[0]).setOption(JSON.parse(data.jsCode));
                                                setTimeout(function(){
                                                    renderMenu.renderMenu($("#"+app.order),data.chartName,app);
                                                }, 0);
                                            }
                                        }else if(parseInt(data.isRealTime) == 1){
                                            $.ajax({
                                                type: 'POST',
                                                contentType: "application/json; charset=utf-8",
                                                url: 'render',
                                                data: JSON.stringify({
                                                    'chartType': data.chartType,
                                                    'dataRecordId': data.sqlRecordingId,
                                                    'builderModel': JSON.parse(data.buildModel)
                                                }),
                                                success: function(option){
                                                    echarts.init($("#"+app.order)[0]).setOption(option);
                                                    renderMenu.renderMenu($("#"+app.order),data.chartName,app);
                                                },
                                                error: function(){
                                                    app.renderFailList.push(app.order);
                                                }
                                            });
                                        }
                                        $(".draggable").niceScroll();
                                    })
                                }
                            });
                        }
                    });
                    //窗口关闭监听
                    //关闭窗口时弹出确认提示
                    $(window).bind('beforeunload', function(){
                        // 只有在标识变量is_confirm不为false时，才弹出确认提示
                        if(app.isSave == false)
                            return '您可能有数据没有保存';
                    });
                },
                watch: {
                    subGroupText: function(){
                        this.myWidgetOption.text = this.subGroupText;
                        CanvasTagOfImage().render("subGroupContainer","",this.myWidgetOption);
                    },
                    subGroupTextColor: function(){
                        this.myWidgetOption.textColor = this.subGroupTextColor;
                        CanvasTagOfImage().render("subGroupContainer","",this.myWidgetOption);
                    },
                    subGroupFontSize: function(){
                        this.myWidgetOption.textFont = this.myWidgetOption.textFont.split(" ")[0] + " " +this.subGroupFontSize+ "px " + this.myWidgetOption.textFont.split(" ")[2];
                        CanvasTagOfImage().render("subGroupContainer","",this.myWidgetOption);
                    },
                    subGroupFontLocation: function(){
                        this.myWidgetOption.textPosition = this.subGroupFontLocation;
                        CanvasTagOfImage().render("subGroupContainer","",this.myWidgetOption);
                    },
                    isSave: function(){
                        if(app.isSave == false){
                            $("title").html("*Infovis-Designer");
                        }else if(app.isSave == true) {
                            $("title").html("Infovis-Designer");
                        }
                    }
                }
            });
        });
    });