@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"
                            :class="[checkData.length>0?'btn-dark text-light':'']"
                            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 ">
                <tr class="text-nowrap" id="header"></tr>
                <tr class="text-center">
                    <th>
                        <input type="checkbox" id="all" @click="checkAll($event)">
                    </th>
                    <th>序号</th>
                    <th>问题件ID</th>
                    <th>创建时间</th>
                    <th>完结时间</th>
                    <th>创建人</th>
                    <th>结束人</th>
                    <th>客户</th>
                    <th>快递单号</th>
                    <th>处理时效</th>
                </tr>
                <tr v-for="(workLoad,index) in workLoads" class="text-center">
                    <td><input type="checkbox" v-model="checkData" :value="workLoad.id"></td>
                    <td>@{{ index+1 }}</td>
                    <td>@{{ workLoad.id }}</td>
                    <td>@{{ workLoad.created_at }}</td>
                    <td>
                        <template v-if="workLoad.endLog">@{{ workLoad.endLog.created_at }}</template>
                    </td>
                    <td>@{{ workLoad.createUser }}</td>
                    <td >@{{ workLoad.endUser }}</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>@{{ workLoad.processingTime }}</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>
    <script>
        let workLoadVue = new Vue({
            el: "#workLoad_div",
            data: {
                workLoads: {!! $workLoads->append(['createUser','endUser','processingTime',])->toJson()??[] !!},
                users:{!! $users->toJson() !!},
                owners:{!! $owners->toJson() !!},
                checkData: [],
                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();
            },
            watch: {
                checkData: {
                    handler() {
                        if (this.checkData.length === this.workLoads.length) {
                            document.querySelector('#all').checked = true;
                        } else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep: true
                }
            },
            methods: {
                checkAll(e) {
                    if (e.target.checked) {
                        this.workLoads.forEach((el, i) => {
                            if (this.checkData.indexOf(el.id) == '-1')
                                this.checkData.push(el.id);
                        });
                    } else {
                        this.checkData = [];
                    }
                },
                exportSelected() {
                    let url = '{{url('order/issue/workLoad/export')}}';
                    let token = '{{ csrf_token() }}';
                    excelExport(false, this.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