@extends('layouts.app')
@section('title')工作量-问题件@endsection

@section('content')
    @component("order.issue.menu")@endcomponent
    <div class="container-fluid d-none" id="workLoad_div">
        <div style="min-width: 2000px;">
            <div id="form_div" style="min-width: 1950px;" class="bg-white"></div>
            <div class="form-inline mt-1 ">
                <span class="dropdown">
                    <button type="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="exportSelected()" href="javascript:">导出勾选内容</a>
                        <a class="dropdown-item" @click="exportAll()" href="javascript:">导出所有页</a>
                    </div>
                </span>
            </div>
            <table class="table table-sm table-striped table-bordered table-hover card-body mt-2 td-min-width-80" id="table">
                <tr v-for="(workLoad,index) in workLoads" class="text-center">
                    <td><input type="checkbox" :value="workLoad.id"></td>
                    <td><span>@{{ index+1 }}</span></td>
                    <td><span>@{{ workLoad.id }}</span></td>
                    <td><span>@{{ workLoad.created_at }}</span></td>
                    <td>
                        <template v-if="workLoad.endLog">@{{ workLoad.endLog.created_at }}</template>
                    </td>
                    <td><span>@{{ workLoad.createUser }}</span></td>
                    <td><span>@{{ workLoad.endUser }}</span></td>
                    <td>
                        <template v-if="workLoad.order.owner">@{{ workLoad.order.owner.name }}</template>
                    </td>
                    <td>
                        <div>
                            <p v-for="(package,index) in workLoad.order.packages" class="p-0 m-0">
                                <span v-if="workLoad.order.packages.length <=2 ?true : (index===1 || isBtn[workLoad.id])">@{{ package.logistic_number }}</span>
                            </p>
                            <b style="cursor:pointer;text-decoration: underline;color: #4aa0e6;" @click="shrink(workLoad.id)" v-if="isBtn[workLoad.id]">点击收起</b>
                            <b style="cursor:pointer;text-decoration: underline;color: #4aa0e6;" @click="unfold(workLoad.id)" v-if="!isBtn[workLoad.id] && workLoad.order.packages.length >2">点击展开</b>
                        </div>
                    </td>
                    <td><span>@{{ workLoad.processingTime }}</span></td>
                </tr>
            </table>
            <button  class="btn btn-sm" :class="page.curPage === 1 ?'':'btn-outline-primary'"
                @click="goPage(page.curPage-1)"
                :disabled="page.curPage === 1">上一页</button>
            <button  class="btn btn-sm" :class="page.curPage === page.lastPage ?'':'btn-outline-primary'"
               @click="goPage(page.curPage+1)"
               :disabled="page.curPage === page.lastPage">下一页</button>
            <input @keyup.enter="pageTurning($event)" class="form-control-sm ml-3 tooltipTarget"
                   :placeholder="'当前页数：'+page.curPage+'/'+page.lastPage" title="去往指定页">
            <span class="text-muted m-1">共 @{{page.total}} 条 </span>
        </div>
    </div>

@endsection
@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        let workLoadVue = new Vue({
            el: "#workLoad_div",
            data: {
                workLoads: {!! $workLoads->append(['createUser','endUser','processingTime',])->toJson()??[] !!},
                users:{!! $users->toJson() !!},
                owners:{!! $owners->toJson() !!},
                query: {
                    create_user_id: '{{$options['create_user_id']}}',
                    end_user_id: '{{$options['end_user_id']}}',
                    client_no: '{{$options['client_no']}}',
                    owner_id: '{{{$options['owner_id']}}}',
                    create_start: '{{$options['create_start']}}',
                    create_end: '{{$options['create_end']}}',
                    order_issue_id: '{{$options['order_issue_id']}}',
                },
                page: {
                    lastPage: '{!! $workLoads->lastPage() !!}',
                    curPage: '{!! $workLoads->currentPage() !!}',
                    total: '{!! $workLoads->total() !!}',
                    nextPageUrl: '{!! $workLoads->nextPageUrl() !!}',
                    prevPageUrl: '{!! $workLoads->previousPageUrl() !!}',
                },
                isBtn:[],
                form:'',
            },
            mounted: function () {
                $('#workLoad_div').removeClass('d-none');
                let users = [];
                let owners = [];
                this.users.forEach(function(user,index){
                    users.push({name:user.id,value:user.name})
                })
                this.owners.forEach(function(owner,index){
                    owners.push({name:owner.id,value:owner.name})
                })
                let data = [
                    [
                        {name: 'create_start', type: 'dateTime', tip: '创建日期', placeholder: '创建日期'},
                        {name: 'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的客户'],placeholder:['',''],data:owners},
                        {name: 'create_user_id', type: 'select', tip: '创建人', placeholder: '创建人',data:users},
                        {name: 'end_user_id', type: 'select', tip: '结束人', placeholder: '结束人',data:users},
                    ], [
                        {name: 'end_date', type: 'dateTime', tip: '完结日期', placeholder: '完结日期'},
                        {name: 'logistic_number', type: 'input', tip: '快递单号', placeholder: '快递单号'},
                        {name: 'order_issue_id', type: 'input', tip: '问题件ID', placeholder: '问题件ID'},
                    ]
                ];
                this.form = new query({
                    'el':'#form_div',
                    condition:data,
                });
                this.form.init();
                let column = [
                    {name:'index',value: '序号', neglect: true},
                    {name:'id',value: '问题件ID', neglect: true},
                    {name:'created_at',value: '创建时间', neglect: true},
                    {name:'created_at',value: '完结时间', neglect: true},
                    {name:'createUser',value: '创建人', neglect: true},
                    {name:'endUser',value: '结束人', neglect: true},
                    {name:'name',value: '客户', neglect: true},
                    {name:'number',value: '快递单号', neglect: true},
                    {name:'processingTime',value: '处理时效', neglect: true},
                ];
                new Header({
                    el: "table",
                    name: "workload",
                    column: column,
                    data: this.waybills,
                    fixedTop:($('#form_div').height())+2,
                }).init();
            },
            methods: {
                exportSelected() {
                    let url = '{{url('order/issue/workLoad/export')}}';
                    let token = '{{ csrf_token() }}';
                    excelExport(false, checkData, url, this.page.total, token);
                },
                exportAll() {
                    let url = '{{url('order/issue/workLoad/export')}}';
                    let token = '{{ csrf_token() }}';
                    excelExport(true, null, url, null, token);
                },
                shrink(id){
                    this.$set(this.isBtn,id,false);
                },
                unfold(id){
                    this.$set(this.isBtn,id,true);
                    setTimeout(function () {
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },1);
                },
                pageTurning(e){
                    let page = $(e.target).val();
                    if (page > this.page.lastPage) {
                        return;
                    }
                    this.goPage(page);
                },
                goPage(page){
                    let href = window.location.href;
                    if(href.indexOf('?')==-1){
                        href+='?'
                    }
                    if(href.indexOf('page=')!==-1){
                        href = href.replace('page='+this.page.curPage,'page='+page);
                    }else{
                        href+='&page='+page;
                    }
                    window.location = href;
                }
            }
        })
    </script>
@endsection