<div class="layui-fluid" id="VIEW-list-table" lay-title="表格列表">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md10">
      <div class="layui-card">
        <div class="layui-card-body nepadmin-table-full">
          <div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
            <div class="layui-btn layui-btn-sm">添加商品</div>
            <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="lower">下架</div>
            <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="del">删除</div>
            <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="move">移动分类</div>
            <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="refresh">刷新页面</div>
            <div class="layui-btn layui-btn-sm layui-btn-primary action-more">
              <i class="layui-icon">&#xe875;</i>
            </div>
            <div class="layui-btn layui-btn-sm layui-btn-primary">
              URL信息：
              <script type="text/html" template>
                {{ JSON.stringify(layui.router()) }}
              </script>
            </div>
          </div>
          <table id="list-table" lay-filter="list-table"></table>
        </div>
      </div>
    </div>
    <div class="layui-col-md2">
      <div class="layui-card">
        <div class="layui-card-header">筛选数据</div>
        <div class="layui-card-body">
          <div class="layui-row layui-col-space10 layui-form">
            <div class="layui-col-md12 layui-col-xs4">
              <select name="type">
                <option value="">销售状况</option>
                <option value="1">出售中</option>
                <option value="2">已售罄</option>
                <option value="3">仓库中</option>
              </select>
            </div>
            <div class="layui-col-md12 layui-col-xs4">
              <select name="status">
                <option value="">商品类型</option>
                <option value="1">实物商品</option>
                <option value="2">虚拟商品</option>
                <option value="3">电子卡券</option>
                <option value="4">付费会员卡</option>
                <option value="5">酒店商品</option>
              </select>
            </div>
            <div class="layui-col-md12 layui-col-xs4">
              <select name="group">
                <option value="">商品分组</option>
                <option value="1">最新商品</option>
                <option value="2">最热商品</option>
              </select>
            </div>
            <div class="layui-col-md12">
              <div class="layui-row layui-col-space10">
                <div class="layui-col-md6 layui-col-xs6">
                  <input type="text" class="layui-input" placeholder="最高销量" />
                </div>
                <div class="layui-col-md6 layui-col-xs6">
                  <input type="text" class="layui-input" placeholder="最低销量" />
                </div>
              </div>
            </div>
            <div class="layui-col-md12 layui-col-xs12">
              <div class="layui-row layui-col-space10">
                <div class="layui-col-xs6">
                  <div class="layui-btn layui-btn-sm layui-btn-fluid">筛选</div>
                </div>
                <div class="layui-col-xs6">
                  <div class="layui-btn layui-btn-sm layui-btn-fluid layui-btn-primary">重置</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="layui-card nepadmin-font-12">
        <div class="layui-card-header">
          <i class="layui-icon">&#xe78c;</i> 帮助中心</div>
        <div class="layui-card-extra">
          <a>进入</a>
        </div>
        <div class="layui-card-body">
          <p>商品在出售中列表找不到？</p>
          <p class="nepadmin-c-gray">商品售罄库存为0，在已售罄列表中，提醒您该添加库存了。待付款订单也会占据库存，其超时关闭后库存才会释放。</p>
          <hr/>
          <p>
            <a>如何新建／发布商品？</a>
          </p>
          <p>
            <a>如何管理商品？</a>
          </p>
          <p>
            <a>商品如何排序？</a>
          </p>
          <p>
            <a>商品销量找不到对应的订单？</a>
          </p>
          <p>
            <a>商品二维码使用说明</a>
          </p>
          <p>
            <a>商品可以设置用积分兑换吗？</a>
          </p>
        </div>
      </div>

    </div>
  </div>
  <script type="text/html" id="TPL-list-table-params">
        {{# layui.each(d.params,function(i,item){ }}
        <span class="layui-badge-rim">{{ item.val }}</span>
        {{# }) }}
    </script>
  <script type="text/html" id="TPL-list-table-status">
        {{#
            var status = {
                WAIT_PAY:{title:'待付款',color:'blue'},
                WAIT_DELIVER:{title:'待发货',color:'orange'},
                WAIT_REFUND:{title:'待退款',color:'red'},
            }[d.status];
        }}
        <span class="layui-badge layui-bg-{{status.color}}">{{ status.title }}</span>
    </script>
</div>
<script>
  layui.use(['admin', 'table', 'form', 'dropdown', 'jquery'], function (admin, table, form, dropdown, $) {
    var view = $('#VIEW-list-table');

    var tableFilter = 'list-table';
    form.render();
    table.render({
      elem: '[lay-filter="' + tableFilter + '"]',
      api: 'getGoods',
      height: 'full-165',
      cols: [[
        { title: '', type: 'checkbox', fixed: true, width: 60 },
        { title: '状态', templet: '#TPL-list-table-status', width: 80 },
        { title: '商品名称', field: 'title', minWidth: 300 },
        { title: '商品参数', templet: '#TPL-list-table-params', minWidth: 240 },
        { title: '商品单价', templet: '<p><b class="nepadmin-c-red">￥{{d.price}}</b></p>', align: 'center', width: 90 },
        { title: '购买数量', templet: '<p><b>{{d.buycount}}</b> <span class="nepadmin-c-gray">件</span></p>', align: 'center', width: 90 },
        { field: 'time', title: '操作时间', templet: '<p><span title="{{d.time}}" class="nepadmin-c-gray">{{ layui.util.timeAgo(d.time)}}</span></p>', align: 'center', width: 170 }
      ]]
    });


    dropdown.render({
      elem: view.find('.action-more'),
      click: function (name, elem, event) {
        console.log('点击了' + name);
      },
      options: [{
        name: 'action1',
        title: 'Menu 1'
      }, {
        name: 'action2',
        title: 'Menu 2',
        options: [{
          name: 'action3',
          title: 'Menu 3',
        }, {
          name: 'action4',
          title: 'Menu 4',
        }]
      }]
    });

    view.find('.table-action').click(function () {
      var type = $(this).attr('data-type')
      if (type == 'refresh') {
        //刷新当前页
        layui.view.tab.refresh()

        //刷新一个指定页，不用传入页面的参数
        //layui.view.tab.refresh('/index')

        return false;
      }
      var checkedCount = table.checkStatus(tableFilter).data.length;
      if (checkedCount == 0) {
        layer.msg('请先选择某行');
      } else {
        layer.msg($(this).html() + checkedCount + '项');
      }
    })


  })
</script>