<!DOCTYPE html>
<html lang="zh">
<#include "/include/header.html">
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <#include "/include/left.html">
        <!--End 左侧导航-->
        <!--头部信息-->
        <#include "/include/topbar.html">
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="panel" style="margin-bottom: auto">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        组合条件筛选
                                    </h3>
                                </div>
                                <!--组合条件组件-->
                                <#include "/include/table/table-query.html">
                            </div>
                            <!--操作按钮栏-->
                            <div class="card-toolbar clearfix" style="padding: 0px 24px 0px 24px">
                                <div class="toolbar-btn-action" id="toolBar">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            账户控制 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#!" onclick="setColumn('courier_status','正常');">设置正常</a></li>
                                            <li><a href="#!"onclick="setColumn('courier_status','禁止接单');">禁止接单</a></li>
                                            <li><a href="#!" onclick="setColumn('courier_status','禁止登陆');">禁止登陆</a></li>
                                        </ul>
                                    </div>
                                    <#include "/include/table/table-batch.html">
                                </div>
                            </div>
                            <!--快速搜索框-->
                            <div class="card-body" style="padding: 10px 15px">
                                <div class="pull-right" id="id_search_column"
                                     style="position: absolute;right: 295px;margin-top: 10px;">
                                    <input type="hidden" name="search_field" id="search-field" value="">
                                    <button class="btn btn-default dropdown-toggle" id="search-btn"
                                            data-toggle="dropdown" type="button" aria-haspopup="true"
                                            aria-expanded="false">
                                        全部 <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" style="min-width: auto">
                                        <li><a tabindex="-1" href="javascript:void(0)" data-field="">全部</a></li>
                                        <#list pageTemplate.tableSearch as search>
                                        <li><a tabindex="-1" href="javascript:void(0)" data-field="${search.key!}">${search.name}</a></li>
                                    </#list>
                                    </ul>
                                </div>
                                <!--Bootstarp Table插入-->
                                <#include "/include/table/table-data.html">

                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<#include "/include/footer.html">
<#include "/include/table/table-event.html">
<#include "/include/table/table-model.html">
<div>
    <div class="modal fade bs-example-modal-lg" id="id_order_model" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document" style="width:1200px;">
            <div class="modal-content" >
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">任务面板</h4>
                       <!-- 派送员姓名:<input  id="id_courier_name" value="" disabled="disabled">  &nbsp;&nbsp;&nbsp;&nbsp;</h4>-->
                </div>
                <div class="modal-body">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">设置查询条件</h3>
                        </div>
                        <div class="panel-body">
                            <div class="col-lg-6">
                                <div class="input-group">
                                    <span class="input-group-addon">统计时间范围：</span>
                                    <input type="text" class="form-control" id="id_chart_time_input">
                                    <span class="input-group-btn">
                                        <button class="btn btn-primary" type="button" onclick="refreshCards()">
                                            查询
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-primary">
                        <div class="panel-body" id="id_courier_cards">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

</div>


<!--以下为业务流程处理-->
<script>
    /**
     * 指派订单
     */
    function showCourierMod() {
        let column=getTableSelectOne();
        refreshCards(column.courierId);
        $("#myLargeModalLabel").text("派送员任务面板："+column.courierName);
        $("#id_order_model").modal("show");
    }

    /**
     * 轨迹跟踪
     */
    function onlineBack(){
        let column=getTableSelectOne();
        window.location.href="${ctx}/views/map/gaode/line?courierId="+column.courierId;
    }
    /**
     * 刷新数据
     **/
    function refreshCards(courierId){
        document.getElementById("js_load").style.display = "inline";
        if(!courierId){
            courierId=getTableSelectOne().id;
        }
        runAjax("${ctx}/courier/chart/get/block","GET",
            {
                courierId:courierId,
                time:$("#id_chart_time_input").val()
            },
            function (data) {
            $("#id_courier_cards").html(data);
            document.getElementById("js_load").style.display = "none";
        });
    }

    /**
     * 初始化时间选择控件
     */
    $(function () {
        $('#id_chart_time_input').val(moment().startOf('month').format('YYYY-MM-DD') + '至' + moment().endOf('month').format('YYYY-MM-DD'));
        $('#id_chart_time_input').daterangepicker(
            {
                autoUpdateInput: false,
                startDate: moment().startOf('month'), //设置开始日期
                endDate: moment().endOf('month'),
                opens: 'right', // 日期选择框的弹出位置
                ranges: {
                    '今天': [moment(), moment()],
                    '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '近7天': [moment().subtract(6, 'days'), moment()],
                    '近30天': [moment().subtract(29, 'days'), moment()],
                    '本周': [moment().startOf('week'), moment().endOf('week')],
                    '上周': [moment().week(moment().week() - 1).startOf('week'), moment().week(moment().week() - 1).endOf('week')],
                    '本月': [moment().startOf('month'), moment().endOf('month')],
                    '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    '本季度': [moment().startOf('quarter'), moment().endOf('quarter')],
                    '上季度':[moment().quarter(moment().quarter() - 1).startOf('quarter'),moment().quarter(moment().quarter() - 1).endOf('quarter')],
                    '本年': [moment().startOf('year'), moment().endOf('year')],
                    '去年': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
                },
                showWeekNumbers: true,
                separator: ' to ',
                locale: {
                    format: "YYYY-MM-DD", //设置显示格式
                    applyLabel: '确定', //确定按钮文本
                    cancelLabel: '取消', //取消按钮文本
                    customRangeLabel: '自定义',
                    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月'
                    ],
                    firstDay: 1
                },
            },
        );
    });
    $('#id_chart_time_input').on('apply.daterangepicker', function (ev, picker) {
        timeRangeChange = [picker.startDate.format('YYYY-MM-DD')] + '至' + [picker.endDate.format('YYYY-MM-DD')];
        $('#id_chart_time_input').val(timeRangeChange);
    });
</script>

</body>
</html>