{extend name='pub/modal'}
{block name='content'}
<div class="layui-fluid layui-anim layui-anim-upbit" >
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space8" id="ajaxForm" method="get" action="costListJson">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="card_no" placeholder="请输入卡号" autocomplete="off" class="layui-input"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <a class="layui-btn lotus-search-btn"  lay-filter="search">
                                <i class="layui-icon">&#xe615;</i></a>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table id="lotus-table"  lay-data="{page:true,limits:[10,20,100],loading:true,toolbar:'#toolbarDemo',url:'costListJson',hash:'',totalRow:true}"  class="layui-table layui-hide" lay-filter="recharge">
                        <thead>
                        <tr>
                            <th lay-data="{field:'id',type:'radio'}"></th>
                            <th lay-data="{field:'id',sort: true,width:'6%',totalRowText:'合计'}">ID</th>
                            <th lay-data="{field:'card_no',sort:true,width:'15%'}">会员卡号</th>
                            <th lay-data="{field:'member_name'}">会员名称</th>
                            <th lay-data="{field:'money',width:'10%',templet:'#moneyTpl',totalRow:true,align:'center'}">消费金额</th>
                            <th lay-data="{field:'or_id',width:'15%',align:'center'}">来源订单</th>
                            <th lay-data="{field:'time',templet:'<div>{{ layui.util.toDateString(d.time * 1000) }}</div>',width:'15%'}">消费日期</th>
                        </tr>
                        </thead>
                    </table>

                    <script type="text/html" id="toolbarDemo">
                        <div class = "layui-btn-container" >
                            <button class="layui-btn layui-btn-sm" lay-event="getRecharge"><i class="layui-icon"></i>增加消费</button>
                        </div >
                    </script>
                    <script type="text/html" id="moneyTpl">
                        <span>￥{{d.money}}</span>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //头工具栏事件
  table.on('toolbar(recharge)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
    switch(obj.event){
      case 'getRecharge':
        var data = checkStatus.data;  //获取选中行数据
        xadmin.open('增加会员消费','cardCost.html?card_no='+data[0].card_no,720);
      break;
    };
  });
});
</script>
<script>
    $('.lotus-search-btn').on('click',function () {
        var where = {
            start:$('input[name=start]').val(),
            card_no:$('input[name=card_no]').val(),
            end:$('input[name=end]').val(),
        };
        lotus.table(where);
    })
</script>
{/block}