<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<%@include file="/WEB-INF/page/header.jsp" %>
<script>changeMenu(2,7);//左边菜单active</script>
<div class="row white-bg border-bottom white-bg page-heading">
    <div class="col-lg-12">
        <h2>保单信息</h2>
        <ol class="breadcrumb">
            <li>主页</li>
            <li><a>保单信息</a></li>
            <li class="active"><strong>退保</strong></li>
        </ol>
    </div>
</div>

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-2">
                            <div class="input-group m-b"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input type="text" class="input-sm form-control" placeholder="选择开始日期" id="startDate">
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="input-group m-b"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input type="text" class="input-sm form-control" placeholder="选择结束日期" id="endDate">
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="input-group"><input type="text" id="keyword" placeholder="订单号、法院" class="form-control m-b-xs"><span class="input-group-btn">
                                <button type="button" style="height:34px;" class="btn btn-sm btn-primary" onclick="search()"> 查询</button> </span></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 jqGrid_wrapper">
                            <table id="gridTable5"></table>
                            <div id="gridPager5"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="modal-failReason" class="modal fade" tabindex="-1">
    <div class="modal-dialog" style="max-width: 400px;">
        <div class="modal-content">
            <div class="modal-header">
                <div class="table-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="white">&times;</span>
                    </button>
                    原因
                </div>
            </div>
            <div class="modal-body">
                <div class="form-group" id="modal-failReasonDetail"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
<div id="modal-updatedetail" class="modal fade" tabindex="-1"
     data-backdrop="static">
    <div class="modal-dialog" style="min-width: 450px;">
        <div class="modal-content">
            <div class="modal-header no-padding" style="margin-top: 10px;margin-left: 10px;">
                <div class="table-header" style="height: 30px;">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">
                        <span class="white">&times;</span>
                    </button>
                    <span>修改订单详情</span>
                </div>
            </div>
            <div class="modal-body" id="modal-updatedetail-body">
                <form id="updateDetail" class="form-horizontal">
                    <input type="hidden" name="orderId" id="mod-updateDetail-orderId" />
                    <div class="form-group">
                        <label class="col-sm-3 control-label">更改状态：</label>
                        <div class="col-sm-9 text-left">
                        <select id='changeStatusFlag' style="margin-top: 6px;">
                            <option value="50" >退保处理中</option>
                            <option value="51" >退保成功</option>
                            <option value="52" >退保失败</option>
                        </select>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-sm-3 control-label">
                            退保失败原因：
                        </label>
                        <div class="col-sm-9 text-left">
                        <textarea id="modal-fail-reason" rows="3" cols="40"
                                  placeholder="如果退保不通过，请输入不通过原因"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer no-margin-top">
                <div class="text-center">
                    <button id="modal-update-submit" type="button"
                            class="btn btn-sm btn-primary">
                        更新
                    </button>
                    <button class="btn btn-sm" data-dismiss="modal">
                        <i class="ace-icon fa fa-share bigger-160" ></i> 关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<%@include file="/WEB-INF/page/order/orderDetail.jsp" %>

<%@include file="/WEB-INF/page/footer.jsp" %>

<link href="${contextPath}/static/css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<link href="${contextPath}/static/css/plugins/jqGrid/ui.jqgrid.css" rel="stylesheet">

<script src="${contextPath}/static/js/plugins/jqGrid/jquery.jqGrid.min.js"></script>
<script src="${contextPath}/static/js/plugins/jqGrid/i18n/grid.locale-cn.js"></script>

<!-- Data picker -->
<script src="${contextPath}/static/js/plugins/datapicker/bootstrap-datepicker.js"></script>

<script type="text/javascript">
    var gridTable1 = null;
    var grid_selector = "#gridTable5";
    var pager_selector = "#gridPager5";
    jQuery(function($) {
        $('#startDate').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true,
            format: "yyyy-mm-dd"
        });
        $('#endDate').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true,
            format: "yyyy-mm-dd"
        });

        initGridTable();
        // resize to fit page size
        $(window).on("resize.jqGrid", function() {
            $(grid_selector).jqGrid("setGridWidth", $(".page-content").width());
        });
        // resize on sidebar collapse/expand
        var parent_column = $(grid_selector).closest("[class*='col-']");
        $(document).on("settings.ace.jqGrid", function(ev, event_name, collapsed) {
            if (event_name === "sidebar_collapsed" || event_name === "main_container_fixed") {
                // setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                setTimeout(function() {
                    $(grid_selector).jqGrid("setGridWidth", parent_column.width());
                }, 0);
            }
        });

        $(document).one('ajaxloadstart.page', function(e) {
            $(grid_selector).jqGrid('GridUnload');
            $('.ui-jqdialog').remove();
        });

        // Add responsive to jqGrid
        $(window).bind('resize', function () {
            var width = $('.jqGrid_wrapper').width();
            gridTable1.setGridWidth(width);
        });
    });

    function initGridTable(){
        gridTable1 = jQuery(grid_selector).jqGrid({
            subGrid : false,
            url : "${contextPath}/order/getOrders?orderServiceType=0&orderState=6",//
            datatype : "json",
            height : "auto",
            autowidth:true,
            colModel : [{
                name : "createDate",
                index : "createDate",
                label : "订单时间",
                width : 90,
                search : false
            },{
                name : "orderId",
                index : "orderId",
                label : "订单号",
                width : 60,
                search : false
            },{
                name : "courtName",
                index : "courtName",
                label : "法院",
                width : 80,
                search : false
            },{
                name : "plaintiff",
                index : "plaintiff",
                label : "原告",
                width : 40,
                search : false
            },{
                name : "sqbd",
                index : "sqbd",
                label : "保全金额",
                width : 60,
                sortable: false,
                search : false
            },{
                name : "sbRate",
                index : "sbRate",
                label : "费率",
                width : 50,
                search : false
            },{
                name : "bf",
                index : "bf",
                label : "保费",
                width : 50,
                search : false
            },{
                name : "sendDate",
                index : "sendDate",
                label : "出函时间",
                width : 70,
                search : false
            },{
                name : "surrenderSeason",
                index : "surrenderSeason",
                label : "退保原因",
                width : 100,
                search : false
            },{
                name : "orderState",
                index : "orderState",
                label : "退保状态",
                width : 100,
                search : changeOrderType
            },{
                name : "remark",
                index : "remark",
                label : "备注",
                width : 60,
                search : false
            },{
                align : "center",
                name : "uploadState",
                index : "uploadState",
                label : "操作",
                width : 200,
                sortable: false,
                fixed:true,
                viewable:false,
                formatter:operationLink
            }],
            sortname : "createDate",
            sortorder : "desc",
            viewrecords : true,
            rowNum : 10,
            rowList : [ 10, 20, 30 ],
            pager : pager_selector,
            altRows : true,
            //toppager : true,
            multiselect : false,
            //multikey : "ctrlKey",
            multiboxonly : true,
            rownumbers:true,
            rownumWidth:30,

        });
    }

    //操作链接
    function operationLink(cellvalue, options, rowObject){
        var result = '<a href="javascript:void(0);" style="color:blue" onclick="showdetail(\''+rowObject.orderId+'\')">详细</a>';
        result += '&nbsp;|&nbsp;<a href="javascript:void(0);" style="color:blue" onclick="showUpdateModel('+ rowObject.orderId +')">修改状态</a>';
        result += '&nbsp;|&nbsp;<a href="javascript:void(0);" style="color:blue" onclick="showRemark(\''+rowObject.remark+'\','+ rowObject.orderId +',\''+grid_selector+'\')">添加备注</a>';
        return result;
    }

    //转义订单状态(退保)
    function changeOrderType(cellvalue, options, rowObject) {
    }

    function reloadGrid(){
        gridTable1.trigger('reloadGrid');
    }

    function search(){
        var keyword =$("#keyword").val();
        var startDate =$("#startDate").val();
        var endDate =$("#endDate").val();
        var orderType = $("#orderType").val();
        gridTable1.setGridParam({postData:{'keyword':keyword,'startDate':startDate,'endDate':endDate,'surrenderType':1,'orderState':6},url : '${contextPath}/order/getOrders',page:1}).trigger('reloadGrid');
    }

    //显示信息
    function showfailReason(msg){
        $('#modal-failReasonDetail').html(msg);
        $("#modal-failReason").modal('toggle');
    }

    function showUpdateModel(id) {
        $("#mod-updateDetail-orderId").val(id);
        $("#modal-updatedetail").modal("toggle");
        $("#modal-fail-reason").val("");
        $.ajax({
            dataType : "json",
            url : "${contextPath}/order/getOrderById",
            type : "post",
            data : {
                'orderId' : id,
            },
            success : function(ret) {
                if(ret != null){
                    $("#changeStatusFlag").val(ret.orderState);

                }
            }
        });
    }

    $("#modal-update-submit").on("click", function(e) {
        //进行跟新
        var id = $("#mod-updateDetail-orderId").val();
        var changeStatusFlag = $("#changeStatusFlag").val();
        var failReason = $("#modal-fail-reason").val();

        $.ajax({
            dataType : "json",
            url : "${contextPath}/order/updateOrder",
            type : "post",
            data : {
                'id' : id,
                'orderState' : changeStatusFlag ,
                'failReason' : failReason
            },
            success : function(ret) {
                if(ret.success){
                    $("#modal-updatedetail").modal("toggle");
                    jQuery("#gridTable5").trigger("reloadGrid");
                } else {
                    alert("更新失败");
                }
            }
        });


    });
</script>
