@extends('layouts.app')
@section('title')绩效统计-问题件-订单管理@endsection

@section('content')
    <div class="container-fluid none" id="performance_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="exportAll()" href="javascript:">导出所有页</a>
                    </div>
                </span>
            </div>

            <table class="table table-sm table-striped table-bordered table-hover card-body mt-2 ">
                <tr>
                    <th>
                        <input type="checkbox" id="all" @click="checkAll($event)">
                    </th>
                    <th>序号</th>
                    <th>客服</th>
                    <th>客户</th>
                    <th>创建数</th>
                    <th>处理数</th>
                    <th>完结数</th>
                    <th>总数</th>
                </tr>
                <tr v-for="(performance,index) in performance.data">
                    <td>
                        <input type="checkbox"  v-model="checkData" :value="index+1">
                    </td>
                    <td>@{{  Number(index)+1 }}</td>
                    <td>@{{ performance.userName }}</td>
                    <td>@{{ performance.ownerName }}</td>
                    <td>@{{ performance.created }}</td>
                    <td>@{{ performance.processed }}</td>
                    <td>@{{ performance.end }}</td>
                    <td>@{{ performance.sumNumber }}</td>
                </tr>
            </table>


            <button class="btn btn-sm" :class="performance.current_page <= 1 ?'':'btn-outline-primary'"
                    @click="goPage(performance.current_page - 1)"
                    :disabled="performance.from === 1">上一页
            </button>
            <button class="btn btn-sm"
                    @click="goPage(performance.current_page + 1)"
                    :class="performance.current_page === performance.last_page ?'':'btn-outline-primary'"
                    :disabled="performance.current_page === performance.last_page">下一页
            </button>
            <input @keyup.enter="pageTurning($event)" class="form-control-sm ml-3 tooltipTarget"
                   :placeholder="'当前页数：'+performance.current_page+'/'+performance.last_page" title="去往指定页">
            <span class="text-muted m-1">共 @{{performance.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>
        let performance_vue = new Vue({
            el:'#performance_div',
            data:{
                performance:{!! $performance->toJson() !!},
                option:{
                    timeFrame:'{{$options['timeFrame']}}',
                    create_start:'{{$options['create_start']}}',
                    create_end:'{{$options['create_end']}}',
                },
                checkData:[],
            },
            mounted:function(){
                $('#performance_div').removeClass("d-none");
                console.log(this.performance);
                let data =[
                    [{name:'create_start',type:'dateTime',tip:'统计时段开始',placeholder:'统计时段开始',killings:['timeFrame']},
                    {name:'create_end',type:'dateTime',tip:'统计时段结束',placeholder:'统计时段结束',killings:['timeFrame']},
                    {name:'timeFrame',type:'select',tip:'',placeholder:'选择时段',
                        data:[{name:"day",value:'当天'},{name:'yesterday',value:'昨日'},{name:"week",value:'本周'},{name:"month",value:'本月'}],
                        killings:['create_start','create_end'],
                    }]
                ];
                let queryForm = new query({
                    el:'#form_div',
                    condition:data,
                })
                queryForm.init();
            },
            methods: {
                exportAll:function(){
                    let search = '?timeFrame='+this.option.timeFrame+'&create_start='+this.option.create_start+'&create_end='+this.option.create_end;
                    let url = '{{url('order/issue/orderIssuePerformance/export')}}'+search;
                    let token='{{ csrf_token() }}';
                    excelExport(false,'',url,null,token);
                },
                checkAll(e) {
                    if (e.target.checked) {
                        this.performance.data.forEach((el, i) => {
                            if (this.checkData.indexOf(el.id) == '-1') {
                                this.checkData.push(el.id);
                            }
                        });
                    } else {
                        this.checkData = [];
                    }
                },
                pageTurning(e){
                    let page = $(e.target).val();
                    if (page > this.performance.last_page) {
                        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.performance.current_page,'page='+page);
                    }else{
                        href+='&page='+page;
                    }
                    window.location = href;
                }
            },
        });
    </script>

@endsection