/**
 +----------------------------------------------------------------------------------------------------------------------
 * 自定义 echarts 控件：需要和模板绑定进行使用
 +----------------------------------------------------------------------------------------------------------------------
 *
 * @copyright Copyright(C),2019-2020,yangzi1028@163.com
 * @author    Richer
 * @date      ‎‎    2019年8月1日10:31:28
 * @version   ‎‎1.0.0
 * @link
    */
(function ($) {
    $.fn.extend(
        {
            // 初始化 echarts 控件
            initECharts:function (option) {
                let defaults = {
                    'url':'',                // 数据请求基础地址：需要的时候组
                    'data':{},                // 数据请求附加参数
                    'theme':'',                // eachrts主题
                    'type':'GET',                // ajax请求类型
                    'callback':null,                // 数据请求成功回调函数
                    'minDate':'2019-07-01',                // 查询时间范围最小日期
                    'queryType':'last-week',                // 查询的方式：默认为最近一周 last-week
                };
                let opts = $.extend(defaults,option);
                let that = this;
                // 生成ECharts 对象
                let myChart = echarts.init(this[0],opts.theme);

                // 当当前div大小变化时
                $(this).resize(
                    function () {
                        myChart.resize();
                    }
                );

                this.drawEChartsAjax(myChart, opts);

                // 初始化筛选条件
                this.initFilter(myChart, opts);
            },
            // 初始化筛选条件
            initFilter:function (chart, option) {
                // 初始化
                this.initDateRangeFilter(chart, option);
                // 初始化其按钮筛选条件
                let that = this;
                // 当前对象的id
                let id = $(this).attr("id");
                // // 特定的时间选择控件绑定事件：本周、本月
                // $(".time-limit-"+id).find(".btn-link").off('click').on(
                //     'click',
                //     function () {
                //         // 设置查询的类型
                //         option['queryType'] = $(this).data('type');
                //         // 查询数据
                //         that.drawEChartsAjax(chart,option);
                //
                //         // 增加选中样式，并去除其他同级元素的选中样式
                //         $(this).addClass("active").attr("disabled","disabled").siblings().removeClass("active").removeAttr("disabled");
                //         // 将时间控件清空
                //         // $('input[name="daterange"]').val('');
                //         // $(this).closest(".col-sm-8").find('input[name="daterange"]').val('')
                //         // $(this).closest("col-sm-8 right").find('input[name="enddate"]').val('');
                //         // //清空日期
                //         // $(this).closest(".col-sm-8").find('input[name="daterange"]').on('cancel.daterangepicker', function (ev, picker) {
                //         //     $('#createdOn').val('');
                //         //     searchModel.Start = null;
                //         //     searchModel.End = null;
                //         // })
                //     }
                // );
            },
            // 初始化时间范围筛选条件
            initDateRangeFilter:function (chart, option) {
                var that = this;
                // 当前对象的id
                var id = $(this).attr("id");
                //$('input[name="daterange"]').daterangepicker({
                // $('#daterange-'+id).daterangepicker(
                //     {
                //         locale: {
                //             format: 'YYYY-MM-DD',
                //             applyLabel: '确定', //确定按钮文本
                //             cancelLabel: '取消', //取消按钮文本
                //             daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                //             monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                //                 '七月', '八月', '九月', '十月', '十一月', '十二月'],
                //             firstDay: 1
                //         },
                //         minDate: '2019/01/01',    //最小时间
                //         // showDropdowns: true,
                //         // showWeekNumbers: false, //是否显示第几周
                //         // dateLimit: {days: 300}, //起止时间的最大间隔
                //         // timePicker: true,
                //         // timePickerIncrement: 1, //时间的增量，单位为分钟
                //         // timePicker12Hour: false,
                //         opens: 'right', //日期选择框的弹出位置
                //         // buttonClasses: ['btn btn-default'],
                //         applyClass: 'btn-small btn-primary',
                //         // cancelClass: 'btn-small',
                //         //autoUpdateInput: false,
                //     },
                //     function (start, end, label) {
                //         // 获取开始和结束日期
                //         start =  start.format('YYYY-MM-DD');
                //         end =  end.format('YYYY-MM-DD');
                //         // console.log(start)
                //         // console.log(end)
                //         // alert("A new date range was chosen: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
                //
                //         // 设置查询的类型
                //         option['queryType'] = 'timerange';
                //         option['startdate'] = start;
                //         option['enddate'] = end;
                //         // 查询数据
                //         that.drawEChartsAjax(chart,option);
                //         // 将时间控件清空
                //         $(".init-chart").removeClass("active").removeAttr("disabled")
                //     }
                // );
            },
            // 通过ajax异步获取数据并绘制图表
            drawEChartsAjax : function (chart, option) {
                let that = this;

                // 显示加载中状态
                chart.showLoading(
                    {
                        text: '数据正在努力加载...',
                        textStyle: { fontSize : 30 , color: '#000' },
                        effectOption: {backgroundColor: 'rgba(0, 0, 0, 0.7)'}
                    }
                );

                // 组合查询的url
                let url = option.url;
                // 判断是否需根据不同的条件进行组合
                let queryType = option.queryType;
                if (queryType) {
                    url += "?sort="+$(this).attr("id") +"_" + option.queryType
                }
                // 当前对象的id
                let id = $(this).attr("id");
                // 获取开始时间和结束时间
                let startdate   =  option.startdate || '';
                let enddate     =  option.enddate || '';
                url +="&startdate="+startdate+"&enddate="+enddate;
                console.log(url);

                // ajax 请求数据
                $.ajax(
                    {
                        type: option.type,
                        url:  url,
                        data: option.data,
                        dataType : "json",
                        success: function (data) {
                            // 关闭加载中状态
                            chart.hideLoading();
                            // 转换数据
                            if (typeof data=='string') {
                                data = eval('(' + data + ')');
                                if (typeof data =='string') {
                                    data = eval('(' + data + ')');
                                }
                            }

                            // 执行回调函数
                            if (option.callback) {
                                // 自定义回调处理
                                func(chart,data);
                            } else {
                                // 直接绘制图表（推荐）
                                that.drawECharts(chart, option, data);
                            }

                        },
                        error: function (data) {
                            // console.log('err:');
                            // console.log(data);
                            // 关闭加载中状态
                            chart.hideLoading();
                            // swal(
                            //     {
                            //         type: 'error',
                            //         title: '图表加载失败，请刷新页面重新加载',
                            //         showConfirmButton: false,
                            //         timer: 2000
                            //     }
                            // );
                        }
                    }
                );
            },
            // 依据数据单独绘制图表
            drawECharts : function (chart, opts, data) {
                //console.log(data);
                // 从返回值中获取当前图表的类型
                var $chartType = data['chartType'] ;
                // 根据不同的类型渲染不同的图表
                switch ($chartType) {
                    case 'pie_inner':
                        // 渲染 pie 嵌套环形图
                        this.renderPieInner(chart, data);
                        break;
                    case 'pie':
                        // 渲染 pie 饼状图
                        this.renderPie(chart, data);
                        break;
                    case 'bar':
                        // 渲染 pie 嵌套环形图
                        this.renderBar(chart, data);
                        break;

                    default:
                        this.renderLine(chart,data);
                        break;
                }
            },
            // 渲染生成 折线图
            renderLine:function (chart, data) {
                let $chartName  = data['chartName'];
                let $xAxisData  = data['xAxisData'];
                let $seriesData = data['seriesData'];
                let $symbolColor = data['symbolColor'];//
                let $yAxisName = data['yAxisName'];//
                let $rotate = 0;
                if ($xAxisData.length > 15) {
                    $rotate = 60;
                }
                let $series = data['series'];
                console.log($series)
                let $legendData = data['legendData'];

                // 指定图表的配置项和数据
                let option = {
                    color: ["#15ebc9", "#2ab7fe"],
                    xAxis :
                    {
                        type : 'category',
                        boundaryGap: false,
                        data: $xAxisData ,
                        axisLabel: {
                            // interval:0,//横轴信息全部显示
                            rotate: $rotate,//60度角倾斜显示
                            color: "#2ab7fe",
                        }
                    },
                    yAxis : {
                        name: $yAxisName,
                        nameLocation: "end",
                        nameTextStyle: {
                            color: "#2ab7fe",
                        },
                        //data: $seriesData,
                        type: "value",
                        axisLabel: {
                            color: "#2ab7fe",
                        },
                    },
                    series : [{
                        //name: name,
                        type:'line',
                        data: $seriesData
                    }]
                };

                if (option && typeof option === "object") {
                    chart.setOption(option, true);
                }
            },
            // 渲染生成 饼状图
            renderPie:function (chart, data) {
                let $chartName  = data['chartName'];
                let $legendData  = data['legendData'];
                let $seriesData = data['seriesData'];
                let $yAxisName = data['yAxisName'];//
                // 指定图表的配置项和数据
                let option = {
                    color: [
                        "#503eff",
                        "#74c9ff",
                        "#2b8fff",
                        "#ff7e28",
                        "#15e6a2",
                        "#fb0942",
                    ],
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                    },
                    legend: {
                        orient: "vertical", //垂直显示
                        y: "center", //延Y轴居中
                        x: "right", //居右显示
                        data: $legendData,
                        textStyle: {
                            color: "#2ab7fe",
                        },
                    },
                    series: [
                        {
                            name: $chartName,
                            type: "pie",
                            radius: ["30%", "60%"],
                            labelLine: {
                                length: 30,
                            },
                            data: $seriesData,
                    },
                    ],
                };

                if (option && typeof option === "object") {
                    chart.setOption(option, true);
                }
            },
            // 渲染生成 柱状图
            renderBar:function (chart, data) {
                let $chartName  = data['chartName'];
                let $xAxisData  = data['xAxisData'];
                let $seriesData = data['seriesData'];
                let $symbolColor = data['symbolColor'];//
                let $yAxisName = data['yAxisName'];//
                let $rotate = 0;
                if ($xAxisData.length > 15) {
                    $rotate = 60;
                }
                let $series = data['series'];
                let $legendData = data['legendData'];

                // console.log('$xAxisData')
                // console.log($xAxisData)
                // console.log('$series')
                // console.log($series)
                // console.log('$legendData')
                // console.log($legendData)

                // 指定图表的配置项和数据
                let option = {
                    // title: {
                    //     text: $chartName,
                    //     left: 'right',
                    //     top: 0
                    // },
                    color: ["#2ab7fe", "#15ebc9"],
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data: $legendData,
                        left: 'left',
                        textStyle: {
                            color: "#2ab7fe",
                        },
                    },
                    // calculable : true,
                    // xAxis :{
                    //     data: $xAxisData,
                    //     axisLabel: {
                    //         color: "#2ab7fe",
                    //     },
                    // },
                    xAxis :
                        {
                            type : 'category',
                            boundaryGap: false,
                            data: $xAxisData ,
                            axisLabel: {
                                // interval:0,//横轴信息全部显示
                                rotate: $rotate,//60度角倾斜显示
                                color: "#2ab7fe",
                            }
                    },
                    yAxis : {
                        name:$yAxisName,
                        nameLocation: "end",
                        nameTextStyle: {
                            color: "#2ab7fe",
                        },
                        axisLabel: {
                            color: "#2ab7fe",
                        },
                    },
                    series: $series,
                };

                if (option && typeof option === "object") {
                    chart.setOption(option, true);
                }
            },
            // 渲染生成 pie 嵌套环形图
            renderPieInner:function (chart, data) {
                var $chartName = data['chartName'];
                var $xAxisData = data['xAxisData'];
                var $legendData = data['legendData'];
                var $seriesData = data['seriesData'];
                var $data1 = data['pie_data1'];
                var $data2 = data['pie_data2'];
                var option = {
                    title: {
                        text: $chartName,
                        left: 'right',
                        top: 0
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        y: '5px',
                        data:$legendData
                    },
                    series: [
                        {
                            name:$seriesData[0]['name'],
                            type:'pie',
                            selectedMode: 'single',
                            radius: [0, '45%'], // 饼图的大小
                            center:["50%","50%"],// 图位置
                            label: {
                                normal: {
                                    position: 'inner'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: $seriesData[0]['data']
                    },
                        {
                            name:$seriesData[1]['name'],
                            type:'pie',
                            radius: ['60%', '80%'],
                            label: {
                                normal: {
                                    formatter: '{a|{b}}\n{hr|}\n{per|{d}%}',
                                    rich: {
                                        a: {
                                            fontSize: 16,
                                            lineHeight: 20,
                                            align: 'center'
                                        },
                                        hr: {
                                            width: '100%',
                                            height: 0,
                                            alien:'center'
                                        },
                                        per: {
                                            color: '#000000',
                                            align: 'center',
                                            fontSize: 15,
                                        }
                                    }
                                }
                            },
                            data:$seriesData[1]['data']
                    }
                    ]
                };;
                if (option && typeof option === "object") {
                    chart.setOption(option, true);
                }
            },
            // 增加其他类型的图表
        }
    );
})(jQuery);