@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">
        <div id="form_div"></div>
        <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(false)"  href="javascript:">导出勾选内容</a>
                <a class="dropdown-item" @click="processStatisticExport(true)"  href="javascript:">导出所有页</a>
            </div>
        </span>
        <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>
                <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><span v-if="processStatistic.process">@{{ processStatistic.process.code }}</span></td>
                <td><span v-if="processStatistic.process">@{{ processStatistic.process.owner_name }}</span></td>
                <td>@{{ processStatistic.started_at }}</td>
                <td>@{{ processStatistic.ended_at }}</td>
                <td><span v-if="processStatistic.process">@{{ processStatistic.process.created_at }}</span></td>
                <td><span v-if="processStatistic.process">@{{ processStatistic.process.unit_price }}</span></td>
                <td><span v-if="processStatistic.process">@{{ processStatistic.process.amount }}</span></td>
                <td><span v-if="processStatistic.process">@{{ processStatistic.process.completed_amount }}</span></td>
                <td>@{{ processStatistic.revenue }}</td>
                <td>@{{ processStatistic.duration_days }}</td>
                <td><span v-if="processStatistic.process">@{{ processStatistic.duration_man_hours }}</span></td>
                <td><span v-if="processStatistic.process">@{{ processStatistic.process.process_method_name }}</span></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><span v-if="processStatistic.process">@{{ processStatistic.process.status }}</span></td>
                <td><span v-if="processStatistic.process">@{{ processStatistic.process.remark }}</span></td>
                <td><span v-if="processStatistic.process">@{{ processStatistic.process.balance_remark }}</span></td>
            </tr>
        </table>
        {{$processStatistics->appends($params)->links()}}
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
    <script>
        new Vue({
            el:"#statistics",
            data:{
                processStatistics:[
                    @foreach($processStatistics as $processStatistic)
                    {!! $processStatistic !!},
                    @endforeach
                ],
                owners:[
                    @foreach($owners as $owner)
                    {name:'{{ $owner->id }}',value:'{{ $owner->name }}'},
                    @endforeach
                ],
                processMethods:[
                    @foreach($processMethods as $processMethod)
                    {name:'{{ $processMethod->id }}',value:'{{ $processMethod->name }}'},
                    @endforeach
                ],
                checkData:[],
                sum:{!! $processStatistics->total() !!},
                filterData:{paginate:'50',started_at:'',ended_at:'',owner_id:'',code:'',status:''},
                status:[
                    {name:'待审核',value:'待审核'},{name:'待接单',value:'待接单'},{name:'待加工',value:'待加工'},
                    {name:'已驳回',value:'已驳回'},{name:'加工中',value:'加工中'},{name:'待验收',value:'待验收'},
                    {name:'交接完成',value:'交接完成'},
                ],
            },
            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(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $('#statistics').removeClass('d-none');
                let data=[
                    [
                        {name: 'started_at_start', type: 'dateTime', tip: '选择显示指定日期的起始时间'},
                        {
                            name: 'owner_id', type: 'select_multiple_select', tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的客户'],
                            placeholder: ['货主', '定位或多选货主'], data: this.owners
                        },
                        {name: 'process_method_id', type: 'select', placeholder: '加工类型', data: this.processMethods},
                    ],
                    [
                        {name: 'started_at_end', type: 'dateTime', tip: '选择显示指定日期的结束时间'},
                        {name: 'code', type: 'input', tip: '任务号：可在两侧增加百分号(%)进行模糊搜索', placeholder: '任务号'},
                        {name: 'status', type: 'select', placeholder: '状态', data: this.status},
                    ],
                ];
                this.form = new query({
                    el: "#form_div",
                    condition: data,
                });
                this.form.init();
            },
            methods: {
                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 = [];
                    }
                },
                //导出excel
                processStatisticExport(checkAllSign){
                    let url = '{{url('process/statistic/export')}}';
                    let token='{{ csrf_token() }}';
                    //excelExport 定义在 js/queryForm/export.js
                    excelExport(checkAllSign,this.checkData,url,this.sum,token);
                },
            },
            filters:{
                money:function(value){
                    return _.round(value,2);
                }
            }
        });
    </script>
@endsection