@extends('layouts.app')
@section('title')查询-临时工@endsection

@section('content')
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
    </span>
    <div class="container-fluid card" id="list">
        <div class="card-body">
            @if(Session::has('successTip'))
                <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
            @endif
            <div id="form_div"></div>
            <div class="modal fade" id="workRecord" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content" style="width: 800px">
                        <div class="modal-header">
                            <button type="button" class="close pull-right" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body m-auto">
                            <table class="table-sm table-bordered table-striped text-nowrap">
                                <thead class="thead-light">
                                <tr>
                                    <td>二次加工单号</td>
                                    <td>开始时间</td>
                                    <td>结束时间</td>
                                    <td>计件数</td>
                                    <td>计件单价</td>
                                    <td>计时数</td>
                                    <td>计时单价</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(processDailyParticipant,i) in processDailyParticipants" >
                                    <td v-if="processDailyParticipant.process_daily">@{{ processDailyParticipant.process_daily.process_code }}</td>
                                    <td>@{{ processDailyParticipant.started_at }}</td>
                                    <td>@{{ processDailyParticipant.ended_at }}</td>
                                    <td>@{{ processDailyParticipant.unit_count }}</td>
                                    <td>@{{ processDailyParticipant.unit_price }}</td>
                                    <td>@{{ processDailyParticipant.hour_count }}</td>
                                    <td>@{{ processDailyParticipant.hour_price }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            <div class="modal fade" id="clockRecord" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close pull-right" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body m-auto">
                            <table class="table-sm table-bordered table-striped text-nowrap">
                                <thead class="thead-light">
                                <tr>
                                    <td>打卡时间</td>
                                    <td>打卡类型</td>
                                    <td>记录类型</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="userDutyCheck in userDutyChecks">
                                    <td>@{{ userDutyCheck.checked_at }}</td>
                                    <td>@{{ userDutyCheck.type }}</td>
                                    <td>@{{ userDutyCheck.source }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            <table class="table table-striped table-sm" >
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>详情</th>
                    <th>操作</th>
                    <th>解除绑定设备</th>
                </tr>
                <tr v-for="(userLabor,i) in userLabors" @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                    <td>@{{ i+1 }}</td>
                    <td class="text-muted"><span v-if="userLabor.user_detail">@{{userLabor.user_detail.full_name}}</span></td>
                    <td><span v-if="userLabor.user_detail">@{{userLabor.user_detail.mobile_phone}}</span></td>
                    <td><u class="text-info" style="cursor:pointer" @click="show(userLabor.user_id)">查看详情</u></td>
                    <td>
                        @can('临时工-编辑')
                            <button class="btn btn-sm btn-outline-primary" @click="edit(userLabor.user_id)">改</button>@endcan
                        @can('临时工-删除')
                            <button class="btn btn-sm btn-outline-danger" @click="destroy(userLabor)">删</button> @endcan
                            <button class="btn btn-sm btn-outline-dark" @click="workRecord(userLabor.user_id)">劳务记录</button>
                            <button class="btn btn-sm btn-outline-dark" @click="clockRecord(userLabor.user_id)">打卡记录</button>
                    </td>
                    <td>
                        @can('临时工')
                            <span v-if="userLabor.is_relieve_facility">
                            <button class="btn btn-sm btn-outline-secondary" @click="relieve(userLabor.user_id,userLabor.user_detail.full_name)">解</button>
                            </span>
                        @endcan
                    </td>
                </tr>
            </table>
            {{$userLabors->links()}}
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script>
        new Vue({
            el:"#list",
            data:{
                userLabors:[
                    @foreach( $userLabors as $userLabor )
{{--                    {!! $userLabor !!},--}}
                    {user_id:'{{$userLabor->user_id}}',@if($userLabor->userDetail)user_detail:{!! $userLabor->userDetail !!}, @endif
                        is_relieve_facility:'{{$userLabor->is_relieve_facility}}',
                    },
                    @endforeach
                ],
                processDailyParticipants:[],
                userDutyChecks:[],
                selectTr:0
            },
            mounted(){
                let data=[
                   [
                       {name: 'user_name', type: 'input', tip: '可支持多姓名查找,模糊搜索可在左侧增加百分号(%)进行', placeholder: '姓名'},
                   ]
                ];
                this.form = new query({
                    el: "#form_div",
                    condition: data,
                });
                this.form.init();
            },
            methods:{
                show(user_id){
                    window.open("{{url('maintenance/userLabor')}}/"+user_id);
                },
                workRecord(user_id){
                    let _this=this;
                    axios.post("{{url('maintenance/userLabor/getWorkRecord')}}",{user_id:user_id})
                        .then(function (response) {
                            if (response.data.error){
                                tempTip.setDuration(3000);
                                tempTip.show(response.data.error);
                                return;
                            }
                            _this.processDailyParticipants=response.data;
                            $("#workRecord").modal('show');
                        }).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('获取劳务记录失败！网络错误：' + err);
                        });
                },
                clockRecord(user_id){
                    let _this=this;
                    axios.post("{{url('maintenance/userLabor/getClockRecord')}}",{user_id:user_id})
                        .then(function (response) {
                            if (response.data.error){
                                tempTip.setDuration(3000);
                                tempTip.show(response.data.error);
                                return;
                            }
                            _this.userDutyChecks=response.data;
                            $("#clockRecord").modal('show');
                        }).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('获取打卡记录失败！网络错误：' + err);
                    });
                },
                edit:function(id){
                    location.href = "{{url('maintenance/userLabor')}}/"+id+"/edit";
                },
                destroy:function(userLabor){
                    if(!confirm('确定要删除临时工“' + userLabor.user_detail.full_name + '”吗？')){return};
                    let _this=this;
                    let user_id=userLabor.user_id;
                    let url = "{{url('maintenance/userLabor')}}/"+user_id;
                    axios.delete(url)
                        .then(function (response) {
                            if(response.data.success){
                                _this.userLabors.every(function (userLabor,i) {
                                    if (userLabor.user_id==user_id){
                                        _this.userLabors.splice(i,1);
                                        return false;
                                    }
                                    return true;
                                });
                                tempTip.setDuration(3000);
                                tempTip.showSuccess('删除临时工成功!');
                                return;
                            }
                            tempTip.setDuration(3000);
                            tempTip.show('删除临时工失败!');
                        })
                        .catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('删除临时工失败!'+'网络错误：' + err);
                        });
                },
                relieve(user_id,full_name){
                    let _this=this;
                    axios.post('{{url('maintenance/userLabor/relieve')}}',{user_id:user_id})
                        .then((response)=>{
                            if (response.data.error){
                                tempTip.setDuration(3000);
                                tempTip.show(response.data.error);
                                return;
                            }
                            if (response.data.success){
                                _this.userLabors.every(function (userLabor) {
                                      if (userLabor.user_id==response.data.userLabor.user_id){
                                            userLabor.is_relieve_facility=response.data.userLabor.is_relieve_facility;
                                          return false;
                                      }
                                      return true;
                                });
                                tempTip.setDuration(3000);
                                tempTip.showSuccess('已解除“'+full_name+'”的绑定设备！');
                                // return;
                            }
                        }).catch((err)=>{
                            tempTip.setDuration(3000);
                            tempTip.show('解绑失败！网络错误：' + err);
                        });
                }
            }
        });
    </script>
@endsection