{extend name="public/container"}
{block name="content"}
<style>
    .backlog-body {
        padding: 10px 15px;
        background-color: #f8f8f8;
        color: #999;
        border-radius: 2px;
        transition: all .3s;
        -webkit-transition: all .3s;
        overflow: hidden;
        max-height: 84px;
    }

    .backlog-body h3 {
        margin-bottom: 10px;
    }

    .right-icon {
        position: absolute;
        right: 10px;
    }

    .backlog-body p cite {
        font-style: normal;
        font-size: 17px;
        font-weight: 300;
        color: #009688;
    }

    .layuiadmin-badge, .layuiadmin-btn-group, .layuiadmin-span-color {
        position: absolute;
        right: 15px;
    }

    .layuiadmin-badge {
        top: 50%;
        margin-top: -9px;
        color: #01AAED;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">


        <div class="layui-tab-content" id="content">
            <div class="layui-tab-item layui-show">
                <table class="layui-table" lay-skin="line" v-cloak="">
                    <thead>
                    <tr>
                        <th>商品图片</th>
                        <th style="width: 35%;">商品名称</th>
                        <th>入库数据</th>
                        <th>入库时间</th>
                        <th>审核状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in orderList">
                        <td class="text-center"><img :src="item.image" style="width:80px;height: 80px;">
                        </td>
                        <td>{{item.store_name}}</td>
                        <td>{{item.in_stock}}</td>
                        <td>{{item.add_time}}</td>
                        <td>状态:{{item.status}}<br>审核时间:{{item.audit_time}}</td>
                    </tr>
                    <tr v-show="orderList.length<=0" style="text-align: center">
                        <td colspan="6">暂无数据</td>
                    </tr>
                    </tbody>
                </table>
                <div ref="page_order" v-show="count.order_count > limit" style="text-align: right;"></div>
            </div>


        </div>
    </div>
    <script src="{__ADMIN_PATH}js/layuiList.js"></script>
    <script>

        require(['vue'], function (Vue) {
            new Vue({
                el: "#content",
                data: {
                    limit: 10,
                    product_id: {$product_id},
                    store_id:{$store_id},
                    orderList: [],
                    count: {$count},
                    page: {
                        order_page: 1,
                    },
                },
                watch: {
                    'page.order_page': function () {
                        this.getOneorderList();
                    },
                },
                methods: {
                    getOneorderList: function () {
                        this.request('bill_view_lst', this.page.order_page, 'orderList');
                    },
                    request: function (action, page, name) {
                        var that = this;
                        layList.baseGet(layList.U({
                            a: action,
                            p: {page: page, limit: this.limit, product_id: this.product_id,store_id:this.store_id}
                        }), function (res) {
                            that.$set(that, name, res.data.data)
                        });
                    }
                },
                mounted: function () {
                    this.getOneorderList();
                    var that = this;
                    layList.laypage.render({
                        elem: that.$refs.page_order
                        , count: that.count
                        , limit: that.limit
                        , theme: '#1E9FFF',
                        jump: function (obj) {
                            that.page.order_page = obj.curr;
                        }
                    });

                }
            });
        });
    </script>
    {/block}