define("main", [
    "sortable"
], function () {
    var main = (function () {
        var config = {
            $el: $(".f-config"),
            sortable: function () {
                $(".f-plugin", this.$el).draggable({
                    connectToSortable: $(".f-viewport .f-com-wrapper"),
                    helper: "clone",
                    revert: "invalid",
                    revertDuration: 0,
                    appendTo: ".f-config .f-com-wrapper > ul",
                    stop: function (e, ui) {
                        if (!ui.helper.parents(".f-viewport").length) return;

                        var type = $(e.target).data('type');
                        var tmpl = viewport.getCompTmpl(type);
                        var $com = $(tmpl);
                        
                        ui.helper.after($com).remove();
                        $com.trigger("click");
                        setCharts(type);
                        chartId = chartId - 1;
                    }
                });
            },
            onPropsChange: function(type,chartId) {
                var $props = $(".f-com-props", this.$el);
                
                // TODO 组件props模板
                $props.find("h4").text("组件属性(" + type + ")");
                viewDetailByChart(chartId,type);
            },
            onWidthChange: function(v) {
                this.$el.css({
                    paddingRight: v
                });
            },
            bindEvent: function() {
                var baseinfo = this.baseinfo;

                this.$el.on("input", "[data-change]", function(e) {
                    var type = $(this).data("change");
                    
                    baseinfo["on" + type + "Change"].call(this, e);
                });
            },
            baseinfo: {
                onTitleChange: function() {
                    $(".f-title", viewport.$el).text(this.value);
                },
                onDescChange: function() {
                    $(".f-desc", viewport.$el).text(this.value);
                },
                onWidthChange: function() {
                    var v = parseInt(this.value);
                    config.onWidthChange(v);
                    viewport.onWidthChange(v);
                    $(".f-viewport .f-com-wrapper > .f-plugin").css('margin-right',v-500);
                }
            }
        };
        var viewport = {
            $el: $(".f-viewport"),
            sortable: function () {
                $(".f-com-wrapper", this.$el).sortable({
                    revert: false,
                    axis: "y",
                    items: ".f-plugin",
                    placeholder: "ul-state-highlight",
                }).disableSelection();
            },
            bindEvent: function () {
                this.$el.on("click", ".f-plugin", function () { // 选择组件
                    var $com = $(this);
                    var type = $com.data("type");
                    var chartId = $com.children(".f-plugin-view").children(".chartDiv").attr("id");
                    $com.addClass("selected").siblings().removeClass("selected");
                    config.onPropsChange(type,chartId);
                }).on("click", ".f-actions > a", function () { // 删除
                    var chartId = $(this).parents(".f-plugin").children(".f-plugin-view").children(".chartDiv").attr("id");
                    delChart(chartId);
                    //$(this).parents(".f-plugin").remove();
                });
            },
            getCompTmpl: function (type) {
                // TODO 组件viewport模板
                //var template = "<div>新增的组件:" + type + " </div>";
                var template = "<div id="+chartId+" class='chartDiv' ></div>";
                return "\
                    <div class='f-plugin' data-type='" + type + "'> \
                        <div class='f-actions'><a>删除</a></div> \
                        <div class='f-plugin-view'>"+ template + "<div> \
                    </div> \
                ";
            },
            onWidthChange: function(v) {
                this.$el.css({
                    width: v,
                    marginLeft: -v
                });
            }
        };

        return {
            sortable: function () {
                config.sortable();
                viewport.sortable();

                return this;
            },
            bindEvent: function () {
                config.bindEvent();
                viewport.bindEvent();
            }
        }
    })();

    main.sortable().bindEvent();
});

var chartId = -100;
function setCharts(type) {
    var myChart = echarts.init(document.getElementById(chartId));
    var option ="{}";
    if("PieChart" == type){ //饼图
       // option = "{\"series\":{\"center\":[\"60%\",\"50%\"],\"itemStyle\":{\"normal\":{\"label\":{\"formatter\":\"{b}:{c}\",\"show\":true},\"labelLine\":{\"show\":true}},\"emphasis\":{\"label\":{\"position\":\"center\",\"textStyle\":{\"fontSize\":\"12\"},\"show\":true}}},\"name\":\"合同进度\",\"data\":[{\"name\":\"\",\"value\":0.0},{\"name\":\"\",\"value\":0.0},{\"name\":\"\",\"value\":0.0},{\"name\":\"\",\"value\":0.0},{\"name\":\"\",\"value\":0.0},{\"name\":\"\",\"value\":0.0},{\"name\":\"\",\"value\":0.0}],\"radius\":\"50%\",\"selectedMode\":\"single\",\"type\":\"pie\"},\"title\":{\"text\":\"标题\",\"textStyle\":{\"fontWeight\":\"bold\",\"fontStyle\":\"normal\",\"fontSize\":15}},\"tooltip\":{\"formatter\":\"{a} <br/>{b} : {c} ({d}%)\",\"trigger\":\"item\"}}";
    } else if("BarChart" == type){ //柱状图
       // option = "{\"series\":{\"itemStyle\":{\"normal\":{\"label\":{\"position\":\"top\",\"formatter\":\"{c}\",\"textStyle\":{\"fontWeight\":\"normal\",\"fontStyle\":\"normal\",\"fontSize\":12},\"show\":true}}},\"name\":\"合同金额\",\"data\":[300000.0,0.0],\"markLine\":{\"data\":[{\"name\":\"平均值\",\"type\":\"average\"}]},\"type\":\"bar\"},\"yAxis\":[{\"type\":\"value\"}],\"title\":{\"text\":\"标题\",\"textStyle\":{\"fontWeight\":\"bold\",\"fontStyle\":\"normal\",\"fontSize\":15}},\"color\":\"#30b5ff\",\"grid\":{\"bottom\":\"10%\",\"left\":\"15%\",\"right\":\"5%\"},\"xAxis\":[{\"data\":[\"\",\"\"],\"boundaryGap\":\"false\",\"type\":\"category\"}],\"tooltip\":{\"trigger\":\"axis\"}}\n";
    } else if("LineChart" == type){ //折线图
       // option = "{\"series\":{\"itemStyle\":{\"normal\":{\"label\":{\"position\":\"top\",\"formatter\":\"{c}\",\"textStyle\":{\"fontWeight\":\"normal\",\"fontStyle\":\"normal\",\"fontSize\":12},\"show\":true}}},\"name\":\"合同金额\",\"data\":[4000.0,40000.0,150000.0],\"markLine\":{\"data\":[{\"name\":\"平均值\",\"type\":\"average\"}]},\"type\":\"line\"},\"yAxis\":[{\"type\":\"value\"}],\"title\":{\"text\":\"标题\",\"textStyle\":{\"fontWeight\":\"bold\",\"fontStyle\":\"normal\",\"fontSize\":15}},\"color\":\"#30b5ff\",\"grid\":{\"bottom\":\"10%\",\"left\":\"15%\",\"right\":\"5%\"},\"xAxis\":[{\"data\":[\"2007-12\",\"2008-01\",\"2018-05\"],\"boundaryGap\":\"false\",\"type\":\"category\"}],\"tooltip\":{\"trigger\":\"axis\"}}";
    } else if("RoundChart" == type){ //环形图
       // option = "{\"series\":{\"center\":[\"65%\",\"50%\"],\"itemStyle\":{\"normal\":{\"label\":{\"formatter\":\"{b}:{c}\",\"show\":true},\"labelLine\":{\"show\":true}},\"emphasis\":{\"label\":{\"position\":\"center\",\"textStyle\":{\"fontSize\":\"12\"},\"show\":true}}},\"name\":\"合同金额\",\"data\":[{\"name\":\"\",\"value\":5},{\"name\":\"\",\"value\":1},{\"name\":\"\",\"value\":4},{\"name\":\"\",\"value\":8},{\"name\":\"\",\"value\":1},{\"name\":\"\",\"value\":6},{\"name\":\"\",\"value\":0}],\"radius\":[\"30%\",\"60%\"],\"selectedMode\":\"single\",\"type\":\"pie\"},\"title\":{\"text\":\"标题\",\"textStyle\":{\"fontWeight\":\"bold\",\"fontStyle\":\"normal\",\"fontSize\":15}},\"tooltip\":{\"formatter\":\"{a} <br/>{b} : {c} ({d}%)\",\"trigger\":\"item\"}}";
    }
    myChart.setOption(JSON.parse(option));
}

function doSave() {
    var tabsType = window.parent.tabs;
    $.post('ChartsOperate.jsp', {
        'type':tabsType,
        'customid': $("#customid").val(),
        'chartId': $("#chartId").val(),
        'title': $("#title").val(),
        'descripion': $("#descripion").val(),
        'width': $("#width").val(),
        'isEnable': $("#isEnable").val(),
        'name': $("#name").val(),
        'chartsType': $("#chartType").val(),
        'dataFrom': $("#dataFrom").val(),
        'xAxis': $("#xAxis").val(),
        'yAxis': $("#yAxis").val(),
        'calculateType': $("#calculateType").val(),
        'customSql': encodeURI(encodeURI($("#customSql").val())),
        'action':'add'
    }, function () {
        parent.$("#indexFrame").attr('src','/formmode/charts/index.jsp?customid='+$("#customid").val()+'&type='+tabsType);
    });
}

/**
 * 删除图表
 * @param chartId
 */
function delChart(chartId) {
    var tabsType = window.parent.tabs;
    $.post('ChartsOperate.jsp', {
        'type':tabsType,
        'chartId': chartId,
        'action':'del'
    }, function () {
        $("#"+chartId).parents(".f-plugin").remove();
        $("#chartId").val("");
        $("#dataFrom").val("");
        $("#xAxis").val("");
        $("#yAxis").val("");
        $("#name").val("");
        $("#customSql").val("");

    });
}

/**
 * 点击图表查询详细信息
 * @param chartId
 */
function viewDetailByChart(chartId,type) {
    if(chartId < 0){
        if("PieChart" == type){
            $("#chartType").val("3");
        }else if("BarChart" == type){
            $("#chartType").val("2");
        }else if("LineChart" == type){
            $("#chartType").val("1");
        }else if("RoundChart" == type){
            $("#chartType").val("4");
        }
        $("#name").val("");
        $("#xAxis").val("");
        $("#yAxis").val("");
        $("#chartId").val("");
    }else{
        $.post('ChartsOperate.jsp', {
            'chartId': chartId,
            'action':'viewDetail'
        }, function (data) {
            var datas = JSON.parse(data);
            $("#name").val(datas.name);
            $("#chartType").val(datas.chartsType);
            $("#dataFrom").val(datas.dataFrom);
            $("#customSql").val(datas.customSql);
            $("#xAxis").val(datas.xAxis);
            $("#yAxis").val(datas.yAxis);
            $("#chartId").val(datas.id);
        });
    }

}

/**
 * 数据来源切换change事件
 */
$("#dataFrom").change(function () {
    changeView();
});

/**
 * 数据来源切换
 */
function changeView(){
    if ($("#dataFrom option:selected").val() == 1) {
        $("#customSql").parent().parent().hide();
        $("#xAxis").parent().parent().show();
        $("#yAxis").parent().parent().show();
        $("#groupField").parent().parent().show();
        $("#calculateType").parent().parent().show();
    } else {
        $("#xAxis").parent().parent().hide();
        $("#yAxis").parent().parent().hide();
        $("#groupField").parent().parent().hide();
        $("#calculateType").parent().parent().hide();
        $("#customSql").parent().parent().show();
    }
};

$("#eg").click(function () {
    $("#customSql").val($("#eg").attr('title'));
})

$(function () {
    changeView();
    if($("#title").val() == "" || $("#title").val() == null){
        $("#title").val("统计图表");
        $(".f-title").html("统计图表");
    }
    if($("#description").val() == "" || $("#description").val() == null){
        $("#description").val("描述");
        $(".f-desc").html("描述");
    }
    $("#eg").attr('title','SELECT \'周一\' AS name,11 AS "最高温度" UNION ALL SELECT \'周二\' AS name, 7 AS "最高温度" UNION ALL SELECT \'周三\' AS name,15 AS "最高温度" UNION ALL SELECT \'周四\' AS name,17 AS "最高温度" UNION ALL SELECT \'周五\' AS name,20 AS "最高温度" UNION ALL SELECT \'周六\' AS name,12 AS "最高温度" UNION ALL SELECT \'周日\' AS name,10 AS "最高温度"')
})