{extend name="public/base" /}
{block name="title"}订单列表{/block}
{block name="content"}
<div class="layui-fluid">   
  <div class="layui-card">
    <form class="layui-form layui-card-header layuiadmin-card-header-auto" id="searchForm">
      <div class="layui-form-item asuma-form-item">
        <blockquote class="layui-elem-quote">列表默认显示<span style="color: #F78400;font-weight: bold;"> 待发货 </span>订单；退货以及退款订单请至退货/退款管理列表查看</blockquote>

        <div class="layui-inline">
            <label class="layui-form-label">订单编号</label>
            <div class="layui-input-block">
                <input type="text" name="order_no" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">支付类型</label>
          <div class="layui-input-block">
              <select name="pay_type">
                <option value="">请选择类型</option>
                <option value="1">微信支付</option>
                <option value="2">支付宝</option>
              </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">订单状态</label>
          <div class="layui-input-block">
              <select name="order_status">
                <option value="">全部</option>
                <option value="1" selected="">待发货</option>
                <option value="2">待收货</option>
                <option value="3">已完成</option>
                <option value="dai">待付款</option>
              </select>
          </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-asuma layuiadmin-btn-admin" lay-submit lay-filter="orderSearch">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>
      </div>
    </form>
    
    <div class="layui-card-body">
       
        <table id="order" lay-filter="order"></table>  
    </div>
  </div>
</div>
{/block}
{block name="footjs"}
<script type="text/html" id="statusTpl" data-url="{:route('changeSold')}">
  <input type="checkbox" name="is_sold" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="optstatus" {{d.is_sold == 1 ? 'checked' : ''}}>
</script>

<script type="text/html" id="optTpl">
  <button class="layui-btn layui-btn-asuma layui-btn-xs" lay-event="detail">详情</button>
  {{# if(d.order_status == 1){ }}
  <button class="layui-btn layui-btn-asuma layui-btn-xs" lay-event="delivery">发货</button>
  {{# } }}
</script>

<script>
  layui.config({
    base: '__JS__/layuiext/' //静态资源所在路径
  }).use([ 'table','form','upload'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table
    ,upload = layui.upload;


   var tableIns =  table.render({
      elem: '#order'
      ,url: "{:route('orderList')}"
      ,page: true //开启分页
      ,limit:10
      ,limits:[10,25,50]
      ,defaultToolbar: ['filter', 'print']
      ,where: {order_status: 1}
      ,done:function (res, curr, count) {
        if(count <= this.limit){
          $('.layui-table-page').addClass('layui-hide');//总条数小于每页限制条数时隐藏分页
        }
      }
      ,cols: [[ //表头
        {field: 'create_time', title: '订单时间', sort: true, width: 180, fixed: 'left'}
        ,{field: 'pay_time', title: '支付时间', sort: true, width: 180, fixed: 'left'}
        ,{field: 'order_no', title: '订单编号', width: 180, fixed: 'left'}
        ,{field: 'price', title: '订单价格'} 
        ,{field: 'pay_money', title: '实际支付'} 
        ,{field: 'pay_type', title: '支付类型',templet:function(d){
          var pay_type='';
          if(d.order_status != 0 && d.order_status !=4){
            switch(d.pay_type){
              case 1:  pay_type = '微信支付'; break;
              case 2:  pay_type = '支付宝'; break;
              case 3:  pay_type = '积分'; break;
              default: pay_type = '其他';break;
            }
          }
          return pay_type;
        }} 
        ,{field: 'nickname', title: '用户名'} 
        ,{field: 'receiver_name', title: '收货人姓名'} 
        ,{field: 'receiver_phone', title: '收货人电话'} 
        ,{field: 'order_status', title: '订单状态', templet: function(d){
          var order_status = ''
          switch(d.order_status){
            case 0:  order_status = '待付款' ;break;
            case 1:  order_status = '待发货'; break;
            case 11:  order_status = '申请退款'; break;
            case 2:  order_status = '待收货'; break;
            case 3:  order_status = '已完成'; break;
            case 31:  order_status = '申请退货'; break;
            case 32:  order_status = '已完成'; break;
            case 4:  order_status = '已取消'; break;
            case 5:  order_status = '退款中'; break;
            case 6:  order_status = '已退款'; break;
            default:;break;
          }
          return order_status;
        }}
        ,{title: '操作',toolbar: '#optTpl', fixed: 'right'}
      ]]
    });
   
    table.on('sort(order)',function(obj){
      if(tableIns.config.page.count <= tableIns.config.page.limit){
        $('.layui-table-page').addClass('layui-hide');//总条数小于每页限制条数时隐藏分页
      }
    })

    //监听搜索
    form.on('submit(orderSearch)', function(data){
      let field = data.field;
      //执行重载
      tableIns.reload({
        where: field
        ,page:{curr:1}
      });

      return false;
    });
    
    form.on('switch(optstatus)', function(obj){
      var wish = obj.elem.checked
      var id = obj.value
      $.post($('#statusTpl').data('url'),{id:id, is_sold: wish}, function(res){
        if(res.code != 1){
          layer.tips(res.result, obj.othis, {tips:1});
          obj.elem.checked = !wish;
          form.render('checkbox');
        }
      }, 'json')
    })

    table.on('tool(order)', function(obj){
        switch(obj.event){
          case 'detail':
              var d_index = layer.open({
                type: 2
                ,title: '订单详情：'+obj.data.order_no
                ,content: "{:route('detail')}?order_no="+obj.data.order_no
                ,maxmin: true
                ,area: ['80%', '90%']
                ,success: function (layero, index) {
                   layero.find('input[name=id]').val(obj.data.id)
                }
              });
              layer.full(d_index);
          break;
          case 'delivery':
                layer.open({
                  type: 2
                  ,title: '订单发货: '+ obj.data.order_no
                  ,content: '{:route(\'delivery\')}'
                  ,area: ['420px', '280px']
                  ,btn: ['确定', '取消']
                  ,yes: function(index, layero){
                    var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submitID = 'asuma-admin-submit'
                    ,submit = layero.find('iframe').contents().find('#'+ submitID);

                    //监听提交
                    iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                      var field = data.field;
                      field.order_no = obj.data.order_no
                      
                      $.post('{:route(\'makeDelivery\')}', field, function(res){
                        if(res.code == 1){
                          layer.msg('发货成功', {icon: 1}, function(){
                            table.reload('order');
                            layer.close(index);
                          });
                        }else{
                          layer.msg('操作失败', {icon: 5});
                        }
                      }, 'json')
                    });
                    submit.trigger('click');
                  }
                });
          break;
          case 'del':
              layer.confirm('确定删除？？', function(index){
     
                   $.post("{:route('order/del')}", {uid:obj.data.id}, function(res){
                      if(res.code == 1){
                        layer.msg('删除成功');
                        table.reload('order'); //重载表格
                        layer.close(index); //再执行关闭 
                      }else{
                        layer.msg(res.result, {icon: 5});
                      }
                    },'json');

                }); 
          break;
        };
    });

  });
</script>
{/block}