{extend name="basebx"}
{block name="style"}
<link href="__STATIC__/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="__CSS__/dialog.css" rel="stylesheet">
{/block}
{block name="content"}
<div class="page-title">

    <div class="breadcrumb-env pull-left">

        <ol class="breadcrumb bc-1">
            <li class="active">
                <strong>保单列表</strong>
            </li>
        </ol>

    </div>
</div>




<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <!-- searach -->
                <div class="btn-toolbar">

                    <form class="form-inline" style="margin-bottom:15px;" class="search-tool">
                        <fieldset>
                            <!-- 保单号，订单号，投保人，被保险人，投保日期，保险起期，保险止期，产品名称，保费，保险公司和保单状态就可以 -->
                            <div class="input-daterange input-group" id="datepicker" style="margin-left:10px;">

                                <input type="text" placeholder="开始时间" class="form-control" name="start_time"
                                    id="start_time" value="{$Think.get.start_time|default=''}" autocomplete="off" />
                                <span class="input-group-addon">至</span>
                                <input type="text" placeholder="结束时间" class="form-control" name="end_time" id="end_time"
                                    value="{$Think.get.end_time|default=''}" autocomplete="off" />
                            </div>

                            <input type="text" class="form-control" placeholder="保单号" name="bx_num"
                                value="{$Request.get.bx_num}">
                            <input type="text" class="form-control" placeholder="投保人" name="applicant"
                                value="{$Request.get.applicant}">
                            <!-- <input type="text" class="form-control" placeholder="被保人" name="assured"
                                value="{$Request.get.assured}"> -->
                            <input type="text" class="form-control" placeholder="被保人姓名" name="name"
                                value="{$Request.get.name}">
                            <input type="text" class="form-control" placeholder="证件号" name="user_id"
                                value="{$Request.get.user_id}">

                            <!-- <select class="form-control" name="state">
                                <option value="" {eq name="Request.get.state" value=" " } selected="selected" {/eq}>状态
                                </option>
                                <option value="1" {eq name="Request.get.state" value="1" } selected="selected" {/eq}>成功
                                </option>
                                <option value="2" {eq name="Request.get.state" value="2" } selected="selected" {/eq}>失败
                                </option>
                                <option value="3" {eq name="Request.get.state" value="3" } selected="selected" {/eq}>退保
                                </option>
                            </select> -->
                            <button class="btn btn-default btn-primary" type="submit" style="margin-top:10px;">
                                <span class="fa-search"></span> 搜 索
                            </button>
                        </fieldset>

                    </form>
                </div>
                <table class="table table-bordered table-striped" id="example-2">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <!-- <th>订单号</th> -->
                            <th>保单号</th>
                            <th>投保人</th>
                            <th>保人姓名</th>
                            <th>保费</th>
                            <th>证件号</th>
                            <th>生效日期</th>
                            <th>失效日期</th>
                            <th>投保时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody class="middle-align">
                        {volist name='list' id='user'}
                        <tr>
                            <td style="white-space:nowrap;"> {$user.id} </td>
                            <!-- <td> {$user.order_num} </td> -->
                            <td> {$user.bx_num} </td>
                            <td> {$user.applicant} </td>
                            <td> {$user.name} </td>
                            <td> {$user.price} </td>
                            <td> {$user.user_id} </td>
                            <td> {$user.start_time|time_format='Y-m-d'} </td>
                            <td> {$user.end_time|time_format='Y-m-d'} </td>
                            <td> {$user.bx_time} </td>
                            <!-- <td>
                                {eq name="user.state" value="3"}
                                <span class="badge badge-info">退保</span>
                                {/eq}
                                {eq name="user.state" value="1"}
                                <span class="badge badge-success">成功</span>
                                {/eq}
                                {eq name="user.state" value="2"}
                                <span class="badge badge-danger">失败</span>
                                {/eq}

                            </td> -->

                            <td>
                                <a href="javascript:;" class="btn btn-secondary btn-sm btn-icon icon-left"
                                    onclick="infoAjaxModal('{:url('/bx/info/id/'.$user.id)}')">
                                    详情
                                </a>
                            </td>

                        </tr>
                        {/volist}
                    </tbody>
                </table>

                <div class="row">
                    <div class="col-xs-6">
                        <div class="dataTables_info" id="example-3_info" role="status" aria-live="polite">
                            共{$list->total()} 行数据</div>
                    </div>
                    <div class="col-xs-6">
                        <div class="dataTables_paginate paging_simple_numbers" id="example-3_paginate">
                            {$list->render()}
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<div class="modal fade " id="modal-info">
    <div class="modal-dialog" style="width: 700px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">详情</h4>
            </div>
            <div class="modal-body">
                Content is loading...
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>


{/block}
{block name="script"}
<!-- Imported scripts on this page -->
<script src="__STATIC__/js/datatables/js/jquery.dataTables.min.js"></script>

<!-- <link rel="stylesheet" href="__STATIC__/css/xenon-forms.css"> -->

<!-- Imported scripts on this page -->
<script src="__STATIC__/js/datatables/dataTables.bootstrap.js"></script>
<script src="__STATIC__/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<script src="__STATIC__/js/datatables/tabletools/dataTables.tableTools.min.js"></script>

<script src="__STATIC__/js/table-export/xlsx.core.min.js"></script>
<script src="__STATIC__/js/table-export/blob.js"></script>
<script src="__STATIC__/js/table-export/FileSaver.min.js"></script>
<script src="__STATIC__/js/table-export/tableexport.js"></script>

<link rel="stylesheet" type="text/css" href="__STATIC__/css/webuploader/webuploader.css">
<link href="__STATIC__/css/custom.css" rel="stylesheet">
<link rel="stylesheet" href="__STATIC__/js/dist/bootstrap-tagsinput.css">
<link rel="stylesheet" href="__STATIC__/js/dist/app.css">
<link rel="stylesheet" href="__STATIC__/js/dist/bootstrap-theme.min.css">

<script src="__STATIC__/js/webuploader/webuploader.min.js"></script>
<script src="__STATIC__/js/iCheck/icheck.min.js"></script>
<script src="__STATIC__/js/dist/bootstrap-tagsinput.min.js"></script>

<!--<script src="__STATIC__/jquery/jquery.min.js" type="text/javascript"></script>-->
<!--<link   href="__STATIC__/jquery-select2/3.4/select2.min.css" rel="stylesheet">-->
<!--<script src="__STATIC__/jquery-select2/3.4/select2.min.js" type="text/javascript"></script>-->
<script src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
    charset="UTF-8"></script>


<script type="text/javascript">
    $(function () {
        nav_show();
    });
    function infoAjaxModal(url) {
        jQuery.ajax({
            url: url,
            success: function (response) {
                if (typeof response != 'string') {
                    toastr.error(response.msg);
                    return false;
                }
                jQuery('#modal-info').modal('show', { backdrop: 'static' });
                jQuery('#modal-info .modal-body').html(response);
            },
            error: function (xhr, textStatus, txt) {
                toastr.error(txt);
            }
        });

    }
    $("#start_time").datetimepicker({
        language: 'zh-CN',
        format: "yyyy-mm-dd",
        minView: "month",//选择日(不用选时间)
        todayHighlight: true,
        dateFormat: 'yyyy-mm-dd',//日期显示格式
        timeFormat: 'HH:mm:ss',//时间显示格式
        todayBtn: 1,
        autoclose: 1,
        // minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
        // minuteStep: 1,//分钟间隔1分钟
    }).on("click", function (ev) {
        var today = new Date().Format("yyyy-mm-dd");
        var end_time = $("#end_time").val();
        end_time = end_time ? reduceDate(end_time, 0) : reduceDate(today, 0);
        $("#start_time").datetimepicker(
            "setEndDate", end_time
        );
        start_time = reduceDate(end_time, 30);

        $("#start_time").datetimepicker(
            'setStartDate', start_time
        );
    });
    $("#end_time").datetimepicker({
        language: 'zh-CN',
        format: "yyyy-mm-dd",
        minView: "month",//选择日(不用选时间)
        todayHighlight: true,
        dateFormat: 'yyyy-mm-dd',//日期显示格式
        timeFormat: 'HH:mm:ss',//时间显示格式
        todayBtn: 1,
        autoclose: 1,
        // minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
        // minuteStep: 1,//分钟间隔1分钟
    }).on("click", function (ev) {
        var today = new Date().Format("yyyy-mm-dd");
        $("#end_time").datetimepicker(
            "setEndDate", today
        );
        var start_time = $("#start_time").val();
        start_time = reduceDate(start_time, -1);
        $("#end_time").datetimepicker(
            "setStartDate", start_time
        );
    });
</script>
{/block}