@extends('layouts.app')
@section('title')退件记录列表@endsection

@section('content')
    <div class="container-fluid d-none" id="container">
        <div id="form_div"></div>
        <div>
            <div class="dropdown">
                <button class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget"
                        data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">
                    导出Excel
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" @click="exportExcel(false)" href="javascript:">导出勾选内容</a>
                    <a class="dropdown-item" @click="exportExcel(true)" href="javascript:">导出所有页</a>
                </div>
            </div>
        </div>
        <table class="table table-striped table-bordered table-hover text-nowrap table-body td-min-width-80"  style="background: #fff;" id="table">
            <tr v-for="(record,i) in records">
                <td>
                    <label><input type="checkbox" :value="record.logistic_number"></input></label>
                </td>
                <td>@{{ i+1 }}</td>
                <td>@{{ record.logistic_number }}</td>
                <td>@{{ record.logistic ? record.logistic.name : '未知' }}</td>
                <td>@{{ record.warehouse ? record.warehouse.name : '未知' }}</td>
                <td>@{{ record.record_at }}</td>
                <td>@{{ record.location_at }}</td>
                <td>@{{ delayed[record.delayed] }}</td>
            </tr>
        </table>
        {{$records->appends($paginateParams)->links()}}
    </div>
@stop
@section('lastScript')
<script src="{{mix('js/queryForm/export.js')}}"></script>
<script src="{{mix('js/queryForm/queryForm.js')}}"></script>
<script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
<script>
    let vue = new Vue({
        el:"#container",
        data:{
            records:[@foreach($records as $record)@json($record),@endforeach],
            status:[@foreach($status as $index=>$s){name:"{{$index}}",value:"{{$s}}"},@endforeach],
            delayed:[@foreach($status as $s)"{{$s}}",@endforeach],
            logistics:[
                    @foreach($logistics as $logistic)
                {name:'{{$logistic->id}}', value: '{{$logistic->name}}'},
                @endforeach
            ],
            warehouses: [
                    @foreach( $warehouses as $item )
                {
                    name: '{{ $item->id }}', value: '{{ $item->name }}'
                },
                @endforeach
            ],
        },
        mounted:function(){
            $('#container').removeClass('d-none');
            let data=[
                [
                    {name:'record_at_start',type:'time',tip:'选择显示本地记录日期的起始时间'},
                    {name:'logistic_number',type:'input',tip:'可支持多单号，糊模查找需要在右边打上%符号',placeholder:'快递单号'},
                    {name:'logistic_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的物流公司'],
                        placeholder:['物流公司','定位或多选物流公司'],data:this.logistics},
                ],[
                    {name:'record_at_end',type:'time',tip:'选择显示本地记录日期的结束时间'},
                    {name:'delayed',type:'select',placeholder: '状态',data:this.status},
                    {name:'warehouse',type:'select',placeholder: '仓库',data:this.warehouses},
                ]
            ];
            this.form=new query({
                el:"#form_div",
                condition:data
            });
            this.form.init();
            let column = [
                {name:'index',value: '序号', neglect: true},
                {name:'logistic_number',value: '快递单号', },
                {name:'logistic_id', value: '快递公司'},
                {name:'warehouse_id', value: '仓库'},
                {name:'record_at', value: '上载时间'},
                {name:'location_at', value: '本地时间'},
                {name:'delayed',value: '延时标记', neglect: true},
            ];
            new Header({
                el:"table",
                name: "record",
                column: column,
                data: this.records,
                fixedTop:($('#form_div').height())+2,
            }).init();
        },
        methods: {
            exportExcel(checkAllSign){
                let url = '{{url('rejected/record/export')}}';
                let token='{{ csrf_token() }}';
                window.excelExport(checkAllSign,checkData,url,1000,token);
            },
        }
    });
</script>
@stop