define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts', 'echarts-theme'], function ($, undefined, Backend, Table, Form, Template, Echarts) {

    var Controller = {
        index: function () {
            //这句话在多选项卡统计表时必须存在，否则会导致影响的图表宽度不正确
            $(document).on("click", ".charts-custom a[data-toggle=\"tab\"]", function () {
                var that = this;
                setTimeout(function () {
                    var id = $(that).attr("href");
                    var chart = Echarts.getInstanceByDom($(id)[0]);
                    chart.resize();
                }, 0);
            });

            // 基于准备好的dom，初始化echarts实例
            var lineChart = Echarts.init(document.getElementById('line-chart'), 'walden');

            // 指定图表的配置项和数据
            var option = {
                legend: {
                    data: Config.equipment, //['ns_csiqcs', 'ns_lbi', 'ns_cap', 'ns_spider'],
                    type: "scroll",
                    // orient: "vertical",
                    left:60,
                    right: 60,
                    // x:"center",
                    // top: 5,
                    bottom: 0,
                    // pageIconColor: "#2f4554",//激活的分页按钮颜色
                    // pageIconInactiveColor: "#2f4554",//没激活的分页按钮颜色
                    selected: {
                        //'邮件营销' : false
                    },
                },
                title: {
                    // subtext: 'GB/日',
                    left: 'center',
                    top: '10px',
                    // text: 'nameSpace Top5',
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        axis: 'auto',
                        snap: true // 坐标轴指示器是否自动吸附到点上
                    },
                    renderMode: 'html',
                    backgroundColor: 'rgba(255,255,255,0.7)',
                    borderColor: '#333',
                    borderWidth: 0,
                    padding: 5,
                    textStyle: {
                        color: '#333',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontFamily: 'sans-serif',
                        fontSize: 12
                    },
                    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
                    confine: false,
                    // formatter: '{b} 的成绩是 {c}'
                    formatter: function(arg) {
                        if (arg[1] != null) {
                            return "设备："+arg[0].seriesName+ '<br />' +'时间：' + arg[0].name + '<br />' + '渗压：' + arg[0].data + 'kPa' + '<br />' + '浸润性深度：' + arg[1].data + '米'
                        } else {
                            return "设备："+arg[0].seriesName+ '<br />' +'时间：' + arg[0].name + '<br />' + '渗压：' + arg[0].data + 'kPa'
                        }
                    }
                },
                xAxis: {
                    data: Config.date,
                },
                yAxis: [
                    {
                        name: '渗压值/kPa',
                        type: 'value',
                        show: true,
                        min: function(value) {
                            return value.min
                        }
                    },
                    {
                        name: '浸润性深度/米',
                        type: 'value',
                        show: true,
                        min: function(value) {
                            return value.min
                        }
                    }
                ],
                series: Config.warter_series

            };

            //js动态加载
            var selected_item = {};
            for(i =0; i < Config.equipment.length; i++){
                var key_name = Config.equipment[i];
                if(i >0){
                    selected_item[key_name] = false;
                }else{
                    selected_item[key_name] = true;
                }
            };
            option.legend.selected = selected_item;

            //自动切换顺序
            var j=0;
            setInterval(function () {
                let selected = {};
                var lengendArr = option.legend.data;
                for(let i=0;i<lengendArr.length;i++){
                    // this.legendData是legend中data的值，上面是写死的值，做自动切换时不要写死
                    if(j==i){
                        selected[lengendArr[i]] = true;
                    }else{
                        selected[lengendArr[i]] = false;
                    }

                };
                // console.log(selected);
                // lineChart.clear();
                // console.log(option.legend,'lend---------------')
                // 清空原来的折线图
                option.legend.selected = selected;
                //更改legend里的selected
                lineChart.setOption(option);
                //重绘
                j += 1;

                if(j == lengendArr.length){
                    j = 0;
                };
            }, 3500);

            if (option && typeof option === "object") {
                lineChart.setOption(option, true);
                //点击legeng显示点击的属性下的所有的值
                lineChart.on('legendselectchanged', function(params) {
                    // console.log(params.name)选中的legend
                    var lengendArr = option.legend.data;
                    for (var i = 0; i < lengendArr.length; i++) {
                        option.legend.selected[lengendArr[i]] = false; //所有的都不选中
                    }
                    option.legend.selected[params.name] = true; //选中点击的那个元素
                    lineChart.setOption(option, true); //重新绘制
                });
            }

            // 使用刚指定的配置项和数据显示图表。
            // lineChart.setOption(option);

            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'reservoir/dam/isotonic/index' + location.search,
                    add_url: 'reservoir/dam/isotonic/add',
                    edit_url: 'reservoir/dam/isotonic/edit',
                    del_url: 'reservoir/dam/isotonic/del',
                    multi_url: 'reservoir/dam/isotonic/multi',
                    import_url: 'reservoir/dam/isotonic/import',
                    table: 'reservoir_dam_isotonic',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'createtime',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'equipment_id', title: __('Equipment_id')},
                        {field: 'equipment.name', title: __('设备名称')},
                        {field: 'value', title: __('Value'), operate: 'LIKE'},
                        {field: 'dx_value', title: __('浸润性深度（单位：米）'), operate: 'LIKE'},
                        {field: 'equipment.hole_depth', title: __('孔深（单位：米）')},
                        {field: 'equipment.orifice_elevation', title: __('孔口高程（单位：米）')},
                        {field: 'orifice_water_surface_distance', title: __('孔口到水面（单位：米）'), operate: 'LIKE'},
                        {field: 'water_elevation', title: __('水面高程（单位：米）'), operate: 'LIKE'},
                        {field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},
                        {field: 'reservoir.name', title: __('Reservoir_id')},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});