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

    var Controller = {

        index: function () {

            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var $targetPanel = $($(this).attr("href"));
                var tabVal = $(this).data('val');
                if (tabVal === 'first') {
                    Controller.api.first();
                }else if (tabVal === 'second') {
                    Controller.api.second();
                }
            });
            Controller.api.first();
            Controller.api.datepicker();
        },

        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            },
            first: function (){
                Table.api.init();
                // 表格2
                var table = $("#table1");
                table.bootstrapTable({
                    url: 'statistics/aftersale/dispatch',
                    sortName: 'id',
                    search: false,
                    commonSearch: false,
                    visible: false,
                    showToggle: false,
                    showColumns: false,
                    showExport: true,
                    searchFormVisible: true,
                    columns: [
                        [
                            {field: 'nickname', title: '项目类型', operate: false},
                            {field: 'order_total', title: '订单总数', operate: false},
                            {field: 'after_total', title: '退款订单数', operate: false},
                            {field: 'after_total', title: '退款率', operate: false},

                        ]
                    ]
                });
                // 为表格2绑定事件
                Table.api.bindevent(table);

                $('#first-search').on('click', function () {

                    const range = $('#daterange-table').val();
                    let data = '';
                    if (range !== ''){
                        data += 'range=' + range;
                    }
                    // data = encodeURIComponent(data);
                    $("#table1").bootstrapTable('refresh',{
                        url:'statistics/aftersale/dispatch?' + data,
                    });
                });

            },
            second: function (){
                Table.api.init();
                // 表格2
                var table = $("#table2");
                table.bootstrapTable({
                    url: 'statistics/aftersale/dispatch',
                    sortName: 'id',
                    search: false,
                    commonSearch: false,
                    visible: false,
                    showToggle: false,
                    showColumns: false,
                    showExport: true,
                    searchFormVisible: true,
                    columns: [
                        [
                            {field: 'nickname', title: '项目类型', operate: false},
                            {field: 'order_total', title: '订单总数', operate: false},
                            {field: 'after_total', title: '退款订单数', operate: false},
                            {field: 'after_total', title: '退款率', operate: false},

                        ]
                    ]
                });
                // 为表格2绑定事件
                Table.api.bindevent(table);

                $('#first-search').on('click', function () {

                    const range = $('#daterange-table').val();
                    let data = '';
                    if (range !== ''){
                        data += 'range=' + range;
                    }
                    // data = encodeURIComponent(data);
                    $("#table1").bootstrapTable('refresh',{
                        url:'statistics/aftersale/dispatch?' + data,
                    });
                });

            },
            datepicker: function () {
                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().endOf('year')];
                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").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);
                    });
                });
            },
        }
    };
    return Controller;
});