@extends('layouts.app')
@section('title')二次加工单统计@endsection

@section('content')
    <span id="nav2">
        @component('process.menu')@endcomponent
    </span>
    <div class="d-none container-fluid" id="statistics" style="width: 2070px">

                <form  method="GET" action="{{url('process/statistic')}}" id="optionSubmit">
                    <table class="table  table-sm table-bordered text-nowrap  mb-0">
                        <tr v-if="isBeingFilterConditions">
                            <td colspan="10"><div class="col" style="padding:0" >
                                    <a  href="{{url('process/statistic')}}"><span class="btn btn-warning text-dark">清除过滤条件</span></a>
                                </div></td>
                        </tr>
                        <tr>
                            <td >
                                <select name="paginate" v-model="filterData.paginate" class="tooltipTarget form-control form-control-sm" style="vertical-align: middle;max-width: 100px" @change="submit()">
                                    <option value="50">50行</option>
                                    <option value="100">100行</option>
                                    <option value="200">200行</option>
                                    <option value="500">500行</option>
                                    <option value="1000">1000行</option>
                                </select></td>
                        </tr>
                        <tr>
                            <td style="width: 400px">
                                <input id="started_at" name="started_at" style="max-width: 200px" v-model="filterData.started_at" type="date" class="form-control form-control-sm ">
                            </td>
                            <td style="width: 300px">
                                <div class="form-inline">
                                <input type="text" class="form-control form-control-sm tooltipTarget" placeholder="客户"
                                       style="width:70px" @input="owner_seek"
                                       title="输入关键词快速定位下拉列表，回车确定">
                                <select name="owner_id" v-model="filterData.owner_id" @change="submit" class="form-control form-control-sm tooltipTarget">
                                    <option >    </option>
                                    <option v-for="owner in owners" :value="owner.id">@{{owner.name}}</option>
                                </select></div>
                            </td>
                            <td >
                                <div class="form-inline">
                                <label>加工类型：</label>
                                <select name="processMethod_id" v-model="filterData.processMethod_id" style="width: 80px" @change="submit" class="form-control form-control-sm tooltipTarget">
                                    <option >    </option>
                                    <option v-for="processMethod in processMethods" :value="processMethod.id">@{{processMethod.name}}</option>
                                </select></div>
                            </td>
                            <td colspan="6"></td>
                        </tr>
                        <tr>
                            <td >
                                <input id="ended_at" style="max-width: 200px" name="ended_at" v-model="filterData.ended_at" type="date" class="form-control form-control-sm ">
                            </td>
                            <td >
                                <input id="code" style="max-width: 200px" placeholder="任务号" name="code" v-model="filterData.code" class="form-control form-control-sm">
                            </td>
                            <td >
                                <div class="form-inline">
                                <label for="status">&nbsp;状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态&nbsp;：</label>
                                <select id="status" name="status" style="max-width: 100px" v-model="filterData.status" @change="submit" class="form-control form-control-sm tooltipTarget">
                                    <option >    </option>
                                    <option value="待接单">待接单</option>
                                    <option value="待加工">待加工</option>
                                    <option value="已驳回">已驳回</option>
                                    <option value="加工中">加工中</option>
                                    <option value="待验收">待验收</option>
                                    <option value="已完成">已完成</option>
                                </select></div>
                            </td>
                            <td colspan="6"><input hidden type="submit"></td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <span 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="processStatisticExport(1)"  href="javascript:">导出勾选内容</a>
                                        <a class="dropdown-item" @click="processStatisticExport(2)"  href="javascript:">导出所有页</a>
                                    </div>
                                </span>
                            </td>
                        </tr>
                    </table>
                </form>
                <table class="table table-striped text-nowrap table-hover" style="background: #fff;">
                    <tr>
                        <th>
                            <label for="all">
                                <input id="all" type="checkbox" @click="checkAll($event)">全选
                            </label>
                        </th>
                        <th>序号</th>
                        <th>任务号</th>
                        <th>货主</th>
                        <th>开始日期</th>
                        <th>完成日期</th>
                        <th>单价</th>
                        <th>预期数量</th>
                        <th>完成数量</th>
                        <th>收入合计</th>
                        <th>完成时间(天)</th>
                        <th>总工时</th>
                        <th>加工类型</th>
                        <th>最高日产能</th>
                        <th>最低日产能</th>
                        <th>日均产能</th>
                        <th>合计成本</th>
                        <th>毛利润</th>
                        <th>毛利率</th>
                        <th>状态</th>
                    </tr>
                    <tr v-for="(processStatistic,i) in processStatistics" :class="processStatistic.gross_profit_rate?'text-success':''">
                        <td><input class="checkItem" type="checkbox" :value="processStatistic.process_id" v-model="checkData"></td>
                        <td>@{{ i+1 }}</td>
                        <td v-if="processStatistic.process">@{{ processStatistic.process.code }}</td>
                        <td v-if="processStatistic.process">@{{ processStatistic.process.owner_name }}</td>
                        <td>@{{ processStatistic.started_at }}</td>
                        <td>@{{ processStatistic.ended_at }}</td>
                        <td v-if="processStatistic.process">@{{ processStatistic.process.unit_price }}</td>
                        <td v-if="processStatistic.process">@{{ processStatistic.process.amount }}</td>
                        <td v-if="processStatistic.process">@{{ processStatistic.process.completed_amount }}</td>
                        <td>@{{ processStatistic.revenue }}</td>
                        <td>@{{ processStatistic.duration_days }}</td>
                        <td>@{{ processStatistic.duration_man_hours }}</td>
                        <td v-if="processStatistic.process">@{{ processStatistic.process.process_method_name }}</td>
                        <td>@{{ processStatistic.top_capacity }}</td>
                        <td>@{{ processStatistic.bottom_capacity }}</td>
                        <td>@{{ processStatistic.average_capacity }}</td>
                        <td>@{{ processStatistic.total_cost }}</td>
                        <td>@{{ processStatistic.gross_profit }}</td>
                        <td><b v-if="processStatistic.gross_profit_rate">@{{ (processStatistic.gross_profit_rate)*100 | money}}%</b></td>
                        <td v-if="processStatistic.process">@{{ processStatistic.process.status }}</td>
                    </tr>
                </table>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#statistics",
            data:{
                processStatistics:[
                    @foreach($processStatistics as $processStatistic)
                    {!! $processStatistic !!},
                    @endforeach
                ],
                owners:[
                    @foreach($owners as $owner)
                    {!! $owner !!},
                    @endforeach
                ],
                processMethods:[
                    @foreach($processMethods as $processMethod)
                    {!! $processMethod !!},
                    @endforeach
                ],
                checkData:[],
                filterData:{paginate:'50',started_at:'',ended_at:'',owner_id:'',code:'',status:''},
            },
            computed:{
                isBeingFilterConditions:function(){

                    for(let key in this.filterData){
                        if(this.filterData[key]){
                            if(key==='paginate')continue;
                            return true
                        }
                    }
                    return false;
                },

            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.processStatistics.length){
                            document.querySelector('#all').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                        }
                    },
                    deep:true
                }
            },
            mounted:function(){
                this.initInputs();
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $('#statistics').removeClass('d-none');
            },
            methods: {
                initInputs:function(){
                    let data=this;
                    let uriParts =decodeURI(location.href).split("?");
                    if(uriParts.length>1){
                        let params = uriParts[1].split('&');
                        params.forEach(function(paramPair){
                            let pair=paramPair.split('=');
                            let key = pair[0], val = pair[1];
                            $('input[name="'+key+'"]').val(val);
                            $('select[name="'+key+'"]').val(val);
                            decodeURI(data.filterData[key]=val);
                        });
                    }
                },
                checkAll(e){
                    if (e.target.checked){
                        this.processStatistics.forEach(el=>{
                            if (this.checkData.indexOf(el.process_id) == '-1'){
                                this.checkData.push(el.process_id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                //提交表单
                submit:function(){
                    let form = $("#optionSubmit");
                    form.submit();
                },
                //定位客户
                owner_seek:function (e) {
                    let _this=this;
                    let $val=e.target.value;
                    if($val==='')_this.filterData.owner_id='';
                    else
                        _this.owners.forEach(function (owner) {
                            if (owner.name.includes($val)){
                                _this.filterData.owner_id=owner.id;
                            }
                        });
                },
                //导出excel，因同步问题不使用formData
                processStatisticExport(e){
                    let val=e;
                    let data=this.filterData;
                    if (val==1){
                        if (this.checkData&&this.checkData.length<=0){
                            tempTip.setDuration(4000);
                            tempTip.showSuccess('没有勾选任何记录');
                        }else{
                            location.href="{{url('process/statistic?checkSign=')}}"+this.checkData;
                        }
                    } else {
                        location.href="{{url('process/statistic?checkSign=-1&started_at=')}}"+
                            data.started_at+"&ended_at="+data.ended_at+"&owner_id="+
                            data.owner_id+"&code="+data.code+"&status="+data.status;
                    }
                },
            },
            filters:{
                money:function(value){
                    return _.round(value,2);
                }
            }
        });
    </script>
@endsection