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

    var Controller = {
        dashboard: function () {
            Controller.api.getData();
            Controller.datetime();
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            },

            getData:function (){
                // 获取日期范围值
                var daterange = $('#daterange').val();

                // 构建查询参数
                var params = {
                    'daterange': daterange
                };
                console.log(params);

                Fast.api.ajax({
                    url: 'orderplan/data',
                    data: params,
                    method:'get'
                }, function (data, ret) {
                    Controller.echarts.top(data.top);
                    Controller.echarts.order(data.order);
                    Controller.echarts.orderdoing(data.order_doing);
                    Controller.echarts.ordercount(data.order_count);
                    Controller.echarts.orderrank(data.order_rank);
                    Controller.echarts.orderItemRank(data.item_rank);
                    Controller.echarts.money_line(data.lines);
                    Controller.echarts.cancel_order_pie(data.pie.cancel);
                    Controller.echarts.item_pie(data.pie.item);
                    Controller.echarts.area_pie(data.pie.area);
                    Controller.echarts.source_pie(data.pie.source);
                    return;
                });
            }
        },

        datetime:function () {
            var form = $("#chart-filter");
            var ranges = {};
            ranges[__('Today')] = [Moment().startOf('day'), Moment().endOf('day')];
            ranges[__('Yesterday')] = [Moment().subtract(1, 'days').startOf('day'), Moment().subtract(1, 'days').endOf('day')];
            ranges[__('Last 7 Days')] = [Moment().subtract(6, 'days').startOf('day'), Moment().endOf('day')];
            ranges[__('Last 30 Days')] = [Moment().subtract(29, 'days').startOf('day'), Moment().endOf('day')];
            ranges[__('This Month')] = [Moment().startOf('month'), Moment().endOf('month')];
            ranges[__('Last Month')] = [Moment().subtract(1, 'month').startOf('month'), Moment().subtract(1, 'month').endOf('month')];
            ranges[__('今年')] = [Moment().startOf('year'), Moment()];
            var options = {
                timePicker: false,
                autoUpdateInput: false,
                timePickerSeconds: true,
                timePicker24Hour: true,
                autoApply: true,
                locale: {
                    format: 'YYYY-MM-DD',
                    customRangeLabel: __("Custom Range"),
                    applyLabel: __("Apply"),
                    cancelLabel: __("Clear"),
                },
                ranges: ranges,
            };

            var callback = function (start, end) {
                $(this.element).val(start.format(options.locale.format)
                    + " - " + end.format(options.locale.format));
            };
            require(['bootstrap-daterangepicker'], function () {
                $(".datetimerange", form).each(function () {
                    $(this).on('apply.daterangepicker', function (ev, picker) {
                        callback.call(picker, picker.startDate, picker.endDate);
                        var label = picker.chosenLabel;
                        $(picker.element).data('label', label).trigger("change");
                    });
                    $(this).on('cancel.daterangepicker', function (ev, picker) {
                        $(this).val('');
                    });
                    $(this).daterangepicker($.extend({}, options), callback);
                });
            });
            // 绑定查询按钮的点击事件
            $('#filter-btn').on('click', function() {
                Controller.api.getData();
            });
        },
        echarts: {
            top: function(data){
                let map = [
                    'count','performance','total','worker'
                ];
                $('.myplan-num').each(function(index) {
                    if (index === 1 || index === 2){
                        $(this).html('¥' + data[map[index]]);
                    }else {
                        $(this).html(data[map[index]]);

                    }
                });
            },
            order: function(data){
                let map = [
                    'abnormal','check','auditing','check','review','invoice'
                ];
                $('.todo-plan-num').each(function(index) {
                        $(this).html(data[map[index]]);
                });
            },

            orderdoing: function(data){
                const text = `${data.dispatch} / ${data.toget} / ${data.plan} / ${data.doing}`;
                $('.order-count-num ').html(text);
            },
            ordercount: function(data){
                let map = [
                    'total',
                    'month_total',
                    'count',
                    'month_count',
                    'worker',
                    'month_worker',
                    'after_sale',
                    'month_after_sale',
                    'cancel',
                    'month_cancel'
                ];
                $('.static-text-num').each(function(index) {
                    $(this).html(data[map[index]]);
                });
            },
            orderrank: function(data){

                $('#order_rank .rank-name').each(function(index) {
                    $(this).html(data.dispatch[index]?.name ?? '虚位以待');
                });
                $('#order_rank .rank-num').each(function(index) {
                    $(this).html((data.dispatch[index]?.count ?? 0) + '单');
                });

                $('#order_worker .rank-name').each(function(index) {
                    $(this).html(data.doing[index]?.name ?? '虚位以待');
                });
                $('#order_worker .rank-num').each(function(index) {
                    $(this).html((data.doing[index]?.count ?? 0) + '单');
                });

            },
            orderItemRank: function(data){

                $('#hot_item_rank .service-content-title').each(function(index) {
                    $(this).html(data.item[index]?.name ?? '虚位以待');
                });
                $('#hot_item_rank .service-content-sub').each(function(index) {
                    let text = data.item[index]?.count ?? '';
                    if (text !== ''){
                        text ='订单' + text + '('+ (data.item[index]?.rate ?? '0') + '%)';
                    }
                    $(this).html(text);
                });

                $('#hot_item_rank .progress .bg-pink').each(function(index) {
                    let width = data.item[index]?.rate ?? 0;
                    $(this).css('width',width+'%');
                });


                $('#hot_area_rank .service-content-title').each(function(index) {
                    $(this).html(data.area[index]?.name ?? '虚位以待');
                });
                $('#hot_area_rank .service-content-sub').each(function(index) {
                    let text = data.area[index]?.count ?? '';
                    if (text !== ''){
                        text ='订单' + text + '('+ (data.area[index]?.rate ?? '0') + '%)';
                    }
                    $(this).html(text);
                });

                $('#hot_area_rank .progress .bg-pink').each(function(index) {
                    let width = data.area[index]?.rate ?? 0;
                    $(this).css('width',width+'%');
                });

            },
            item_pie: function(data){
                // 基本的饼图配置
                var myChart = echarts.init(document.getElementById('item_pie'));
                var option = {
                    title: {
                        text: '订单项目类型',
                        subtext: '',
                        left: 'right'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    color: [
                        "#18d1b1",
                        "#3fb1e3",
                        "#626c91",
                        "#a0a7e6",
                        "#c4ebad",
                        "#96dee8"
                    ],
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        type: 'scroll', // 启用分页
                        data: data.map(item => item.name)
                    },
                    series: [
                        {
                            name: '服务项目',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '60%'],
                            data: data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart.setOption(option);

                // 监听窗口大小变化，自动重新绘制图表
                window.addEventListener('resize', function() {
                    myChart.resize();
                });
            },
            area_pie: function(data){
                // 基本的饼图配置
                var myChart = echarts.init(document.getElementById('area_pie'));

                var option = {
                    title: {
                        text: '订单区域',
                        subtext: '',
                        left: 'right'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    color: [
                        "#18d1b1",
                        "#3fb1e3",
                        "#626c91",
                        "#a0a7e6",
                        "#c4ebad",
                        "#96dee8"
                    ],
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        type: 'scroll', // 启用分页
                        data: data.map(item => item.name)
                    },
                    series: [
                        {
                            name: '订单区域',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '60%'],
                            data: data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart.setOption(option);

                // 监听窗口大小变化，自动重新绘制图表
                window.addEventListener('resize', function() {
                    myChart.resize();
                });
            },
            source_pie: function(data){
                // 基本的饼图配置
                var myChart = echarts.init(document.getElementById('source_pie'));

                var option = {
                    title: {
                        text: '来源店铺',
                        subtext: '',
                        left: 'right'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    color: [
                        "#18d1b1",
                        "#3fb1e3",
                        "#626c91",
                        "#a0a7e6",
                        "#c4ebad",
                        "#96dee8"
                    ],
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        type: 'scroll', // 启用分页
                        data: data.map(item => item.name)
                    },
                    series: [
                        {
                            name: '来源店铺',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '60%'],
                            data: data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart.setOption(option);

                // 监听窗口大小变化，自动重新绘制图表
                window.addEventListener('resize', function() {
                    myChart.resize();
                });
            },
            cancel_order_pie: function(data){
                // 基本的饼图配置
                var myChart = echarts.init(document.getElementById('cancel_order_pie'));

                var option = {
                    title: {
                        text: '异常订单占比',
                        subtext: '',
                        left: 'right'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    color: [
                        "#18d1b1",
                        "#3fb1e3",
                        "#626c91",
                        "#a0a7e6",
                        "#c4ebad",
                        "#96dee8"
                    ],
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        type: 'scroll', // 启用分页
                        data: data.map(item => item.name)
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '60%'],
                            data: data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart.setOption(option);

                // 监听窗口大小变化，自动重新绘制图表
                window.addEventListener('resize', function() {
                    myChart.resize();
                });
            },
            money_line: function (data){
                var myChart = echarts.init(document.getElementById('money_line'));

                var option = {
                    title: {
                        text: '总业绩',
                        subtext: '数据',
                        left: 'right'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    color: [
                        "#18d1b1",
                        "#3fb1e3",
                        "#626c91",
                        "#a0a7e6",
                        "#c4ebad",
                        "#96dee8"
                    ],
                    legend: {
                        data: ['订单量', '营销额', '收益','收益率'],
                        left: 'left'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: data.xAxis,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额',
                            position: 'left'
                        },
                        {
                            type: 'value',
                            name: '单量/百分比',
                            position: 'right',
                            min: 0,  // 设置右侧y轴的最小值
                            max: 100   // 设置右侧y轴的最大值
                        }
                    ],
                    series: [
                        {
                            name: '订单量',
                            type: 'bar',
                            data: data.series.count,
                            emphasis: {
                                focus: 'series'
                            },
                            yAxisIndex: 1,
                            barGap: '10%' // 调整柱状图1与柱状图2之间的间距
                        },
                        {
                            name: '营销额',
                            type: 'bar',
                            data: data.series.total,
                            emphasis: {
                                focus: 'series'
                            },
                            barGap: '10%' // 调整柱状图1与柱状图2之间的间距
                        },
                        {
                            name: '收益',
                            type: 'bar',
                            data: data.series.performance,
                            emphasis: {
                                focus: 'series'
                            },
                            barGap: '10%' // 调整柱状图1与柱状图2之间的间距
                        },
                        {
                            name: '收益率',
                            type: 'line',
                            yAxisIndex: 1,
                            data: data.series.rate,
                            smooth: true,
                            lineStyle: {
                                color: '#ff6600'
                            }
                        }
                    ]
                };

                myChart.setOption(option);

                // 监听窗口大小变化，自动重新绘制图表
                window.addEventListener('resize', function() {
                    myChart.resize();
                });
            }
        }

    };
    return Controller;
});