@extends('layouts.app')
@section('title')回收站-二次加工管理@endsection
@section('content')
<span id="nav2">
    @component('process.menu')@endcomponent
</span>
<div id="page" class="d-none container-fluid">
    <div class="card">
        <div class="card-header form-inline">
            <select v-model="paginate" class="form-control form-control-sm" style="max-width: 100px">
                <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>
            <button class="btn btn-sm btn-outline-danger ml-2" @click="recover()">恢复</button>
        </div>
        <div class="card-body">
            <table class="table table-hover table-striped text-nowrap table-bordered">
                <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>
                </tr>
                <tr v-for="(process,i) in processes">
                    <td v-if="process.id">
                        <input class="checkItem" type="checkbox" :value="process.id" v-model="checkData">
                    </td>
                    <td>@{{ i+1 }}</td>
                    <td>@{{ process.code }}</td>
                    <td>@{{ process.owner_name }}</td>
                    <td class="text-danger font-weight-bold">@{{ process.process_method_name }}</td>
                    <td>@{{ process.unit_price }}</td>
                    <td>@{{ process.completed_amount }}</td>
                    <td>@{{ process.remark }}</td>
                    <td class="text-danger">@{{ process.status }}</td>
                    <td>@{{ process.created_at }}</td>
                    <td>@{{ process.deleted_at }}</td>
                </tr>
            </table>
        </div>
    </div>

</div>
@stop

@section('lastScript')
    <script>
        new Vue({
            el:"#page",
            data:{
                processes:[
                    @foreach($processes as $process)
                    {!! $process !!},
                    @endforeach
                ],
                paginate:50,
                checkData:[],
            },
            mounted(){
                $("#page").removeClass('d-none');
            },
            methods:{
                //全选事件
                checkAll(e){
                    if (e.target.checked){
                        this.processes.forEach((el,i)=>{
                            if (this.checkData.indexOf(el.id) == '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                recover(){
                    tempTip.setDuration(3000);
                    if (this.checkData.length<1){
                        tempTip.showSuccess('尚未未选择需要恢复单!');
                        return;
                    }
                    let checkData=this.checkData;
                    let _this=this;
                    let delArr=[];
                    if (!confirm('确定要恢复所选内容吗？'))return;
                    axios.post('{{url('process/recover')}}',{checkData:checkData})
                        .then(function (response) {
                            if (response.data.success){
                                checkData.forEach(function (data) {
                                    _this.processes.every(function (process,i) {
                                        if (data===process.id){
                                            delArr.unshift(i);return false;
                                        }
                                        return true;
                                    });
                                });
                                delArr.forEach(function (item) {
                                    _this.$delete(_this.processes,item);
                                });
                                tempTip.showSuccess('恢复成功!');
                                return;
                            }
                            tempTip.show('恢复失败，未知错误！');
                        }).catch(function (err) {
                            tempTip.show('恢复失败,网络错误：'+err);
                        });
                }
            },
        });
    </script>
@stop