$(() => {
    $(".datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        format: 'yyyy-mm-dd hh:mm:ss',
        showButtonPanel: true,
        showOtherMonths: true,
        //selectOtherMonths: true,
        showSecond: true
    });
    $("#DateFromOptDate").val(page.ValueDate);
    $("#DateToOptDate").val(page.ValueDate);
    initGrid();
    initEvent();
});

var i = 0;
var colModelGrid = [
    {
        name: 'id',
        label: 'id',
        index: 'id',
        sortIndex: i++,
        width: 70,
        align: 'center',
        hidden: true,
        optionHide: true
    },
    {
        name: 'ClientNumber',
        label: '客户编号',
        index: 'ClientNumber',
        sortIndex: i++,
        width: 150,
        align: 'center',
        sortable: false
    }, {
        name: 'ClientName',
        label: '客户名称',
        index: 'ClientName',
        sortIndex: i++,
        width: 300,
        align: 'center',
        sortable: false
    }, {
        name: 'OptType',
        label: '操作类型',
        index: 'OptType',
        sortIndex: i++,
        width: 120,
        align: 'center',
        sortable: false,
        //formatter: (cellValue, options, rowObject) => { return cellValue == "Modified" ? "信息修改": "信息删除"}
    }, {
        name: 'OptDate',
        label: '变更时间',
        index: 'OptDate',
        sortIndex: i++,
        width: 180,
        align: 'center',
        // formatter: (cellValue, options, rowObject) => { return cellValue.replace(/\//g, "-") },
        sortable: false
    }, {
        name: 'OptName',
        label: '操作人',
        index: 'OptName',
        sortIndex: i++,
        width: 120,
        align: 'center',
        sortable: false
    },
    {
        name: '',
        label: '变更详情',
        index: '',
        sortIndex: i++,
        width: 120,
        align: 'center',
        sortable: false,
        formatter: showToolName
    },
    {
        name: 'DataInfo2',
        label: '变更字段',
        index: 'DataInfo2',
        sortIndex: i++,
        width: 1000,
        align: 'left',
        sortable: false,
        formatter: formatDataInfo
    },
    {
        name: 'DataInfo',
        label: '变更字段',
        index: 'DataInfo',
        sortIndex: i++,
        width: 1,
        align: 'left',
        sortable: false,
        hidden: true
    },
    {
        name: 'IsClosed',
        label: 'IsClosed',
        index: 'IsClosed',
        sortIndex: i++,
        width: 10,
        align: 'left',
        hidden: true,
        optionHide: true
    },
]

function showToolName(cellValue, options, rowObject) {
    if (rowObject.DataInfo == "" || rowObject.DataInfo == null) {
        return "";
    }
    var html =
        "<input type=\"button\" class=\"wentiEdit\" title='查看' data-id='{0}' value=\"{1}\" data-toggle=\"modal\" data-target=\"#modalClientInfoChange\" />"
            .template(rowObject.id, "查看");
    return html;
}

function formatDataInfo(cellValue, options, rowObject) {
    var html = "";
    if (rowObject.DataInfo != null) {
        var strResult = rowObject.DataInfo.split("；");
        for (var i = 0; i < strResult.length; i++) {
            var finallyResult = strResult[i].split("：");
            if (finallyResult[0] != "" && finallyResult[0] != null) {
                if ((i + 1) == strResult.length) {
                    html += finallyResult[0];
                } else {
                    html += finallyResult[0] + "；";
                }
            }
        }

        if (html.length > 0) {
            html = html.substring(0, html.length - 1);
        }
    }


    return html;
}

function showDetail(value, $modal) {
    var data = jQuery('#listGrid').getRowData(value);
    var html = HeaderMethod(data);
    html += ContentMethod(data.DataInfo);
    $modal.find('.modal-body').html(html)
}

function HeaderMethod(data) {
    return [
        '<h6 class="text-right"><small>变更时间: ' + data.OptDate + '</small></h6>',
        '<h6>',
        '<small class="item">客户编号: ' + data.ClientNumber + '</small>',
        '<small class="item">客户名称: ' + data.ClientName + '</small>',
        '</h6>'
    ].join('');
}

function ContentMethod(dataInfo) {

    var html = '<table class="table table-bordered"><tr>';
    html += '<th style="min-width:99px;">变更字段</th><th style="min-width:99px;">变更前</th><th style="min-width:99px;">变更后</th></tr>';


    if (dataInfo != null) {
        var strResult = dataInfo.split("；");
        for (var i = 0; i < strResult.length; i++) {
            var fields = strResult[i].split("：");
            if (fields[0] != "" && fields[0] != null && fields[0] != undefined) {
                html += '<tr><td class="tdField">' + fields[0] + '</td>';
                if (fields[1] != "" && fields[1] != null && fields[1] != undefined) {
                    var values = fields[1].split("->");
                    if (values.length == 2) {
                        html += '<td class="tdField2">' + (values[0] == "“  ”" ? "空" : values[0]) + '</td><td class="tdField3">' + (values[1] == "“  ”" ? "空" : values[1]) + '</td>';
                    }
                }
                html += '</tr>';
            }
        }
    }
    html += '</table>';
    return html;
}


function closePopover(value) {
    $("#clientInfoChange_" + value).popover("hide");
}


function initGrid() {
    var postData = {}
    var obj = {
        url: "/Datatrace/ClientInfoChangeSearch",
        datatype: 'local',
        //multiselect: true,
        height: 'auto',
        width: '96%',
        autowidth: false,
        shrinkToFit: false,
        viewrecords: true,
        multiselect: true,
        jsonReader: { repeatitems: false },
        cmTemplate: { align: 'center', width: 120 },
        caption: '',
        mtype: 'POST',
        postData: postData,
        colModel: colModelGrid,
        ondblClickRow: rowdblclick,
        pager: jQuery('#pagerGrid'),
        pagerpos: 'left',
        rowNum: 200,
        rowList: [20, 30, 50, 200, 10000],
        viewrecords: false,
        loadComplete: function () {
            $("#listGrid").setGridWidth($("#infopage").width() - 30);
            //var grid = $("#listGrid");
            //var ids = grid.getDataIDs();
            //for (var i = 0; i < ids.length; i++) {
            //    grid.setRowData(ids[i], false, { height: 35 + i * 2 });
            //}
        },
        footerrow: false,
        gridComplete: function () {
            var ids = $("#listGrid").getDataIDs();
            for (var i = 0; i < ids.length; i++) {
                var rowData = $("#listGrid").getRowData(ids[i]);
                if (rowData.IsClosed == "true") {//如果天数等于0，则背景色置灰显示
                    $('#' + ids[i]).find("td").css("background-color", "#bdbebf");
                }
            }
        },
        beforeRequest: function () {
            $('[data-toggle="popover"]').popover("hide");
        }
    };
    var g_grid = jQuery('#listGrid').jqGrid(obj);
    SearchClick(true);
}

function SearchClick(isSearchclick) {
    $('[data-toggle="popover"]').popover("hide");
    var listGrid = $('#listGrid');

    listGrid.appendPostData({ OptDateStart: $("#DateFromOptDate").val() });
    listGrid.appendPostData({ OptDateEnd: $("#DateToOptDate").val() });
    var optTypes = $("#OptTypes").val();
    listGrid.appendPostData({ OptTypes: optTypes });
    listGrid.appendPostData({ ClientIds: !$("#ClientId").val() ? null : $("#ClientId").val() });
    listGrid.appendPostData({ ClientNumber: $("#ClientNumber").val() });
    listGrid.appendPostData({ OptNames: !$("#OptNames").val() ? null : $("#OptNames").val() });
    listGrid.appendPostData({ Ids: null });

    if (typeof isSearchclick !== "undefined" && isSearchclick) {
        //点击搜索时默认第一页
        listGrid.jqGrid('setGridParam',
            {
                page: 1
            });
    }

    listGrid.jqGrid('setGridParam', { datatype: 'json' });
    listGrid.trigger('reloadGrid');
}


function exportClientInfoChange() {
    var req;
    var selectedIds = $('#listGrid').jqGrid('getGridParam', 'selarrrow');
    if (selectedIds.length > 0) {
        var ors = [];
        for (var i = 0; i < selectedIds.length; i++) {
            var or = $('#listGrid').getRowData(selectedIds[i]).id;
            ors.push(or);
        }
        req = { Ids: ors };
    } else {
        req = {
            Ids: null,
            OptDateStart: $("#DateFromOptDate").val(),
            OptDateEnd: $("#DateToOptDate").val(),
            OptTypes: $("#OptTypes").val(),
            ClientIds: !$("#ClientId").val() ? null : $("#ClientId").val(),
            ClientNumber: $("#ClientNumber").val(),
            OptNames: !$("#OptNames").val() ? null : $("#OptNames").val()
        };
    }
    exportSubmit("/Datatrace/ExportClientInfoChange", req);
}

function exportSubmit(url, query_data) {
    var $form = $('#exportForm').html('');
    $form.attr("action", url)
    _.each(query_data, (val, key) => {
        if (!val) {
            val = '';
        } else if (_.isArray(val)) {
            _.each(val, x => {
                $form.append(`<input type="hidden" name="${key}" value="${x}">`);
            });
            return;
        }
        $form.append(`<input type="hidden" name="${key}" value="${val}">`);
    });
    $form.submit();
}

function rowdblclick(rowid) {
}


function initEvent() {
    $('#modalClientInfoChange').on('show.bs.modal', function (evt) {
        var id = $(evt.relatedTarget).data('id');
        showDetail(id, $(this));
    })
}