@extends('layouts.app')
@section('title')入库管理@endsection

@section('content')
    <span id="nav2">
        @component('store.menu')@endcomponent
        @component('store.inStorage.menu')@endcomponent
    </span>
    <div class="d-none container-fluid" id="list">
        <div id="form_div"></div>
        <table class="table table-striped table-sm text-nowrap table-hover td-min-width-80" id="table">
            <tr v-for="(store,i) in stores" :id="'data-'+store.id" @click="selectTableRow(i,$event)">
                <td>
                    <input class="checkItem" type="checkbox" :value="store.id">
                </td>
                <td>
                    <button class="btn btn-sm btn-outline-info" v-if="!store.isOpenStoreItem" @click="openStoreItems(store,i,$event);store.isOpenStoreItem=true">查看明细</button>
                    <button v-if="store.isOpenStoreItem"  @click="closeStoreItems();store.isOpenStoreItem=false" class="btn btn-sm btn-dark">收起明细</button>
                </td>
                <td><span>@{{ i+1  }}</span></td>
                <td><span>@{{store.asn_code}}</span></td>
                <td class="text-muted"><span>@{{store.warehouse.name}}</span></td>
                <td><span>@{{store.owner.name}}</span></td>
                <td><span>@{{store.stored_method}}</span></td>
                <td><span>@{{store.status}}</span></td>
                <td><span>@{{store.remark}}</span></td>
                <td class="text-muted"><span>@{{store.created_at}}</span></td>
            </tr>
                        <tr id="showStoreItem" v-show="store.store_items">
                            <td colspan="2"></td>
                            <td colspan="16">
                                <table class="table-sm table-bordered table-condensed">
                                    <tr>
                                        <th>行号</th>
                                        <th>商品名称</th>
                                        <th>商品编码</th>
                                        <th>商品条码</th>
                                        <th>数量</th>
                                        <th>质量</th>
                                        <th>状态</th>
                                        <th>创建时间</th>
                                    </tr>
                                    <tr v-for="storeItem in store.store_items">
                                        <td>@{{ storeItem.asn_line_code }}</td>
                                        <td>@{{ storeItem.name }}</td>
                                        <td>@{{ storeItem.sku }}</td>
                                        <td>@{{ storeItem.barcode }}</td>
                                        <td>@{{ storeItem.amount }}</td>
                                        <td>@{{ storeItem.quality }}</td>
                                        <td>@{{ storeItem.status }}</td>
                                        <td class="text-muted">@{{ storeItem.created_at }}</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
        </table>
        <div class="text-info h5 btn btn">{{$stores->count()}}/{{$stores->total()}}</div>
        <div>{{$stores->appends($paginateParams)->links()}}</div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        let vue = new Vue({
            el:'#list',
            data:{
                stores:[
                    @foreach($stores as $store)
                    {!! $store !!},
                    @endforeach
                ],
                owners:[
                        @foreach($owners as $owner)
                    {name:'{{$owner->id}}',value:'{{$owner->name}}'},
                    @endforeach
                ],
                warehouses:[
                        @foreach($warehouses as $warehouse)
                    {name:'{{$warehouse->id}}',value:'{{$warehouse->name}}'},
                    @endforeach
                ],
                store:{},
                selectTr:''
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $('#list').removeClass('d-none');
                let _this = this;
                let data=[
                    [
                        {name:'created_at_start',type:'dateTime',tip:'选择显示指定日期的起始时间'},
                        {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的货主'],
                            placeholder:['货主','定位或多选货主'],data:this.owners},
                        {name:'warehouse_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的仓库'],
                            placeholder:['仓库','定位或多选仓库'],data:this.warehouses},
                        {name:'remark',type:'input',tip:'备注：可在两侧增加百分号(%)进行模糊搜索',placeholder: '备注'},
                    ],
                    [
                        {name:'created_at_end',type:'dateTime',tip:'选择显示指定日期的结束时间'},
                        {name:'asn_code',type:'input',tip:'可支持多asn编号:支持15天内模糊搜索，15天外精确搜索，模糊搜索可在两侧增加百分号(%)进行',placeholder: 'ASN单号'},
                        {name:'status',type:'select',placeholder: '订单状态',data:[{name:'完全收货',value:'完全收货'},{name:'部分收货',value:'部分收货'},
                                {name:'已码盘',value:'已码盘'},{name:'订单创建',value:'订单创建'},{name:'ASN关闭',value:'ASN关闭'},{name:'等待释放',value:'等待释放'},{name:'收货取消',value:'收货取消'}]},
                        {name:'stored_method',type:'select',placeholder: '入库类型',data:[{name:'采购入库',value:'采购入库'},{name:'笕尚退货入库单',value:'笕尚退货入库单'},
                                {name:'笕尚进仓入库单',value:'笕尚进仓入库单'},{name:'笕尚移仓入库单',value:'笕尚移仓入库单'},{name:'笕尚调整入库单',value:'笕尚调整入库单'},
                                {name:'B2B入库',value:'B2B入库'},{name:'换货入库',value:'换货入库'}, {name:'初始化库存',value:'初始化库存'},{name:'调拨入库',value:'调拨入库'},
                                {name:'虚拟入库',value:'虚拟入库'}, {name:'退货入库',value:'退货入库'}, {name:'其他入库',value:'其他入库'},
                            ]},
                    ],
                ];
                this.form = new query({
                    el:"#form_div",
                    condition:data,
                });
                this.form.init();
                let column = [
                    {name:'',value: '操作', neglect: true},
                    {name:'index',value: '序号', neglect: true},
                    {name:'asn_code',value: 'ASN编号'},
                    {name:'warehouse_name',value: '仓库'},
                    {name:'owner_name',value: '货主'},
                    {name:'stored_method',value: '入库类型'},
                    {name:'status',value: '状态'},
                    {name:'remark',value: '备注'},
                    {name:'created_at',value: '生成时间'},
                ];
                new Header({
                    el: "table",
                    name: "storeInStorage",
                    column: column,
                    data: this.stores,
                }).init();
            },
            methods:{
                selectTableRow(id,e){
                    $('#headerParent tr[class=focusing]').removeClass('focusing')
                    if (id === this.selectTr) {
                        this.selectTr = '';
                        return;
                    }
                    this.selectTr = id;
                    $(e.target).parent('tr').addClass('focusing')
                },
                openStoreItems(store,i,e){
                    let _this=this;
                    let id=store.id;
                    _this.store=store;
                    let showStoreItem=$('#showStoreItem');
                    $("#data-" + id).after(showStoreItem);
                },
                closeStoreItems(){
                    let _this=this;
                    _this.store={};
                },
            }
        });
    </script>
@endsection