@extends('agents.app')
@section('content')

    <!-- /.row -->
    <style>
        .searchable-select-dropdown{
            z-index: 9999;
        }

    </style>
    <div style="margin-top: 35px;" class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    派单列表
                </div>
                <!-- /.table-responsive -->
                {{--<div class="well">

                    <div class="row" >
                        <div class="col-xs-6 col-sm-4 col-md-4" style="display:flex;flex-direction: row;justify-content: flex-start;align-items: center;"><label style="line-height:20px;width:150px;">开始时间：</label><input onchange="updateTable()" style="background: #fff;" id="zstart" class="form-control" name="zstart" readonly/></div>
                        <div class="col-xs-6 col-sm-4 col-md-4" style="display:flex;flex-direction: row;justify-content: flex-start;align-items: center;"><label style="line-height:20px;width:150px;">结束时间：</label><input onchange="updateTable()" style="background: #fff;"  id="zend" class="form-control" name="zend" readonly/>&nbsp;</div>

                    </div>
                </div>
--}}
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                        <thead>
                        <tr>
                            <th>派单渠道名</th>
                            <th>预计发送时间</th>
                            <th>推广入口页面</th>

                            <th>新增关注<br/>关注率</th>
                            <th>注册用户<br/>付费用户</th>
                            <th>充值总额</th>
                            <th>成本（元）<br/>盈亏（元）<br/>充值/成本</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    <div id="pagination" style="float:right;" class="m-style">

                    </div>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>
        <!-- /.col-lg-12 -->

    </div>
@endsection
@push('scripts')
    <script>
        var table=null;
        $(function() {

            updateTable();
            $('#search').on('click',function(){
                updateTable();
            })
            //$('.search_select').searchableSelect()


            $('#import-btn').on('click',function(e) {
                e.preventDefault()
                //console.log('123456')
                $('#import-form').ajaxSubmit(function(res){
                    if(res.code==0){
                        layer.msg('导入成功！',{icon:1})
                        updateTable()
                    }else{
                        layer.alert('导入失败. '+res.msg,{icon:5})
                    }
                })
            })
            updateTable();
            $('#search').on('click',function(){
                updateTable();
            })
        });


        function updateTable(page=1,action='update'){
            var index1 = layer.load()
            $.ajax({
                url:'/sendorder/get_list',
                type:'POST',
                data:{
                    'page':page,
                    'pagesize':20,
                    'zstart':$('#zstart').val(),
                    'zend':$('#zend').val(),
                    'channel':$('#channel_select').val()
                },
                success:function(res){
                    console.log(res)
                    layer.close(index1)
                    if(res.data.list.length<=0){
                        res.data = [];
                    }
                    if(table != null) table.destroy();
                    table = $('#dataTables-example').DataTable({
                        data:res.data.list,
                        responsive: true,
                        paging:false,
                        searching:false,
                        retrieve: true,
                        ordering:  false,
                        columns: [
                            { data: 'name' },
                            { data: 'pre_send_date'},
                            { data:'promotion_url'},

                            { data:'fansNum',render:function(data,type,row){
                                return data+'<br/>'+row.fansNum/row.registerNum
                            }},
                            {data:'registerNum',render:function(data,type,row){
                                return data+'<br/>'+row.payUserNum
                            }},
                            {data:'totalChargeAmount'},
                            {data:'cost',render:function(data,type,row){
                                return data+'<br/>'+(parseFloat(row.totalChargeAmount)-parseFloat(row.cost))+'<br/>'+(parseFloat(row.cost)/parseFloat(row.totalChargeAmount))
                            }}
                        ]
                    });

                    $("#pagination").pagination( {
                        pageCount: res.data.meta.last_page,
                        jump: true,
                        coping: true,
                        homePage: '首页',
                        endPage: '末页',
                        prevContent: '上页',
                        nextContent: '下页',
                        callback: function (api) {
                            var current_page = api.getCurrent()
                            updateTable(current_page,'page_change')
                        }
                    });
                }
            })
        }






        //$('.search_select').searchableSelect()



    </script>

   <!-- DataTables JavaScript -->
    <script src="/vendor/datatables/js/jquery.dataTables.min.js"></script>
    <script src="/vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
    <script src="/vendor/datatables-responsive/dataTables.responsive.js"></script>
    <script src="/vendor/pagination/jquery.pagination.js"></script>
    <script src="/vendor/jquery/jquery.searchableSelect.js"></script>
    <script src="http://apps.bdimg.com/libs/layer/2.1/layer.js"></script>
    <script src="/vendor/jquery/jquery.form.js"></script>
    <link rel="stylesheet" type="text/css" href="/vendor/pagination/common/reset.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/vendor/pagination/common/highlight.min.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/vendor/pagination/common/common.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/vendor/pagination/pagination.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/vendor/pagination/pagination.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/vendor/datepick/bootstrap-datepicker.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/vendor/jquery/jquery.searchableSelect.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/layer/2.1/skin/layer.css" rel="stylesheet">

@endpush