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

@section('content')
    <span id="nav2">
        @component('store.menu')@endcomponent
        @component('store.fast.menu')@endcomponent
    </span>
    <div class="d-none" id="fast">
        <div class="container-fluid">
            <label for="all" class="d-none" id="cloneCheckAll">
                <input id="all" type="checkbox" @click="checkAll($event)">全选
            </label>
            <table class="table table-sm text-nowrap table-bordered d-none" id="headerRoll"></table>
            <table class="table table-striped table-sm text-nowrap table-hover" id="headerParent">
                <tr id="header"></tr>
                <tr v-for="(store,i) in stores">
                    <td>
                        <input class="checkItem" type="checkbox" :value="store.id" v-model="checkData">
                    </td>
                    <td>@{{ i+1  }}</td>
                    <td class="text-muted">@{{store.asn_code}}</td>
                    <td>@{{store.warehouse.name}}</td>
                    <td class="text-muted">@{{store.owner.name}}</td>
                    <td class="text-muted">@{{store.stored_method}}</td>
                    <td class="text-muted">@{{store.status}}</td>
                    <td>@{{store.remark}}</td>
                    <td class="text-muted">@{{store.created_at}}</td>
                </tr>
            </table>
            <div class="text-info h5 btn btn">{{$stores->count()}}/{{$stores->total()}}</div>
            {{$stores->links()}}
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
    <script>
        let vue = new Vue({
            el:'#fast',
            data:{
                stores:[
                @foreach($stores as $store)
                {!! $store !!},
                @endforeach
                ],
                checkData:[]
            },
            mounted:function(){
                $('#fast').removeClass('d-none');
                let _this = this;
                let column = [
                    {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
                        dom:$('#cloneCheckAll').removeClass('d-none'), 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: '生成时间'},
                ];
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.stores,
                        restorationColumn: 'id',
                        vue:vue,
                    });
                    header.init();
                },0);
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.stores.length){
                            document.querySelector('#all').checked = true;
                            document.querySelector('#all_temp').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                            document.querySelector('#all_temp').checked = false;
                        }
                    },
                    deep:true
                }
            },
            methods:{
                checkAll(e){
                    if (e.target.checked){
                        this.stores.forEach((el,i)=>{
                            if (this.checkData.indexOf(el.id) == '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
            }
        });
    </script>
@endsection