{layout name="layout" /}

<div class="layui-row layui-col-space12">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layuimini-container location-index-page">
            <div class="layuimini-main">
                <fieldset class="table-search-fieldset">
                    <legend>搜索信息</legend>
                    <div style="margin: 10px 10px 10px 10px">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">关键词</label>
                                    <div class="layui-input-block">
                                        <input class="layui-input" name="keyword" placeholder="支持模糊查询">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                                    <button type="reset" class="layui-btn layui-btn-primary" ><i class="layui-icon"></i> 重 置</button>
                                </div>
                            </div>
                            <div class="layui-word-aux">
                                1. 添加日志，直接新增对应商品库存<br>
                                2. 删除日志，不会扣除已添加库存<br>
                                3. 修改日志，只能修改总价和进货日期<br>
                                4. 大包可拆分小包数量=当时商品的可拆分数量，如仅记录当时1大包可以拆分成10小包，后期改包装后1大包可以拆分20包不影响<br>
                                5. 小包进货单价=大包单价➗大包可拆分小包数量<br>
                            </div>
                        </form>
                    </div>
                </fieldset>
                <div class="image-table">
                    <table id="table-container" class="layui-table" data-url="/goods/apiGetReceiptList" lay-filter="table-container-filter"></table>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 隐藏列 -->
<!-- 编辑单元格提交url -->
<input type="hidden" id="row-modify" data-url="/manager.goodsReceiptLog/modify">

<!-- 操作列 -->
<script type="text/html" id="row-operate">
    <a class="layui-btn layui-btn-primary layui-btn-xs" data-href="/goods/editReceipt?id={{d.id}}" data-title="编辑" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" data-href="/goods/delReceipt.html" lay-event="del">删除</a>
</script>

<!-- toolbar -->
<script type="text/html" id="toolbar-tpl">
    <a class="layui-btn layui-btn-primary layui-btn-sm" data-table-refresh lay-event="refresh"><i class="fa fa-refresh"></i></a>
    <a class="layui-btn layui-btn-normal layui-btn-sm" data-href="/manager.goodsReceiptLog/add.html" data-title="添加" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" data-href="/manager.goodsReceiptLog/del.html" lay-event="del">删除</a>
</script>

<script>
    layui.use(['laytpl', 'table', 'jquery', 'form', 'laydate'], function () {
    let $ = layui.jquery,
        table       = layui.table,
        laydate     = layui.laydate,
        form        = layui.form;

    /**** index begin ***/
    if ($('.location-index-page').length > 0) {

        // 渲染表格
        let listUrl = $('#table-container').data('url');
        let insTb = table.render({
            elem: '#table-container',
            title: '列表',
            defaultToolbar: ['filter', 'exports', {
                title: '搜索' //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                , layEvent: 'search'
                , icon: 'layui-icon-search'
            }],
            toolbar: '#toolbar-tpl',
            //method: 'POST',
            url: listUrl,
            page: true,
            limit: 20,
            limits: [20,50,100,200,500,1000],
            request: {
                pageName: 'page',
                limitName: 'size',
            },
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.receiptList.total, //解析数据长度
                    "data": res.receiptList.data //解析数据列表
                };
            },
            cols: [[
                {type: 'checkbox'},
                {field: 'id', title: '#'},
                {field: 'goods_name', title: '商品名称'},
                {field: 'total_price', title: '总价'},
                {field: 'num', title: '大包数量'},
                {field: 'cost_price', title: '大包进货单价'},
                {field: 'small_cost_price', title: '小包进货单价'},
                {field: 'split_to_small', title: '大包可拆分小包数量'},
                {field: 'bought_at', title: '进货日期'}
                ,{templet: '#row-operate', minWidth: 180, align: 'center', title: '操作'}
            ]],
            done: function () {
                //Tools.setInsTb(insTb);
            }
        });

        //监听工具条 注意区别toolbar和tool  toolbar是表头上的工具条 tool是行中的工具条
        table.on('toolbar(table-container-filter)', function (obj) {
            let layEvent = obj.event;
            //let insTb = Tools.getInsTb();
            let url = $($(this).context).data('href')
            let title = $($(this).context).data('title')
            let width = $($(this).context).data('width') ? $($(this).context).data('width') : '100%';
            let height = $($(this).context).data('height') ? $($(this).context).data('height') : '100%';

            let checkStatus = table.checkStatus('table-container');
            let selected = checkStatus.data;
            let ids = [];

            switch (layEvent) {
                // toolbar 删除
                case 'del':
                    if (checkStatus.data.length <= 0) {
                        layer.msg('请先选择数据');
                        return false;
                    }
                    // let selected = checkStatus.data;
                    // let ids = [];

                    $.each(selected, function (index, val) {
                        ids.push(val.id);
                    })
                    //delRow(url, ids, insTb);
                    return false;
                // toolbar 刷新
                case 'refresh':
                    //refreshTab(insTb);
                    return false;
                // toolbar 搜索
                case 'search':
                    let search = $('.table-search-fieldset');
                    if (search.hasClass('div-show')) {
                        search.css('display', 'none').removeClass('div-show');
                    } else {
                        search.css('display', 'block').addClass('div-show');
                    }
                    return false;
                // 其他 默认为打开弹出层
                default:
                    if (layEvent !== 'LAYTABLE_COLS' && layEvent !== 'LAYTABLE_EXPORT') {
                        layerAlert('get', '添加', '/goods/addReceipt');
                        //openLayer(url, title, width, height);
                        return false;
                    }
            }
        });

        //监听行工具条
        table.on('tool(table-container-filter)', function (obj) {
            let data = obj.data;
            let layEvent = obj.event;
            let url = $($(this).context).data('href');
            console.log($(this).data('href'));
            console.log(data.id);
            let title = $($(this).context).data('title');
            let width = $($(this).context).data('width') ? $($(this).context).data('width') : '100%';
            let height = $($(this).context).data('height') ? $($(this).context).data('height') : '100%';
            //let insTb = Tools.getInsTb();

            switch (layEvent) {
                // 行 删除
                case 'del':
                    let url = '/goods/apiDelReceipt';
                    $.post(url, {id: data.id}, function (res) {
                        if (res.code === 0) {
                            insTb.reload();
                        }
                        layer.msg(res.msg);
                    });
                    return false;
                //其他 默认为打开弹出层
                default:
                    layerAlert('get', title, url);
                    //openLayer(url, title, width, height);
                    return false;
            }
        });

        // 监听


        let modifyUrl = $('#row-modify').data('url');

        table.on('edit(table-container)', function (obj) {
            let id = obj.data.id;
            $.ajax(modifyUrl, {
                data: {"id": id, "field": obj.field, "value": obj.value}
                ,dataType : 'json'
                ,type: 'POST'
            })
            .done(function (res) {
                if (res.code === 0) {
                    insTb.reload();
                }
            })
        });

        // switch变更
        function changeSwitch(filter) {
            form.on('switch(' + filter + ')', function (obj) {
                let val = obj.elem.checked ? 1 : 0;
                $.post(modifyUrl, {id: this.value, field: this.name, value: val}, function (res) {
                    layer.msg(res.msg)
                    if (res.code !== 0) {
                        //操作不成功则刷新页面
                        insTb.reload();
                    }
                })
            });
        }

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            table.reload('table-container', {
                page: {curr: 1}
                , where: data.field
            }, 'data');

            return false;
        });

    }
    /*** index end ***/

    if ($('.location-operate-page').length > 0) {
        let parentCategory = $('#parent-category');
        let categoryList = parentCategory.data('list') ? parentCategory.data('list') : [];

        laydate.render({
            elem: '#published-at',
            type: 'datetime',
        });

        laydate.render({
            elem: '#bought_at'
        });
    }
});
</script>