@extends('layouts.app')

@section('content')
    <div id="nav2">
        @component('process.menu')@endcomponent
        @component('process.checking-in.menuChecking-in')@endcomponent
    </div>
    <div class="container-fluid mt-3" id="list">
        <div class="card col-md-10 offset-md-1">
            <div class="card-body p-0">
                <table class="table table-striped table-bordered text-nowrap">
                    <thead class="thead-light">
                    <tr>
                        <td>序号</td>
                        <td>姓名</td>
                        <td>手机号</td>
                        <td>劳务所</td>
                        <td>打卡时间</td>
                        <td>打卡类型</td>
                        <td>操作</td>
                        <td>异常</td>
                        <td>合计工时</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(userDutyCheck,i) in userDutyChecks">
                        <td>@{{ i+1 }}</td>
                        <td ><p v-if="userDutyCheck.user_detail">@{{ userDutyCheck.user_detail.full_name }}</p></td>
                        <td ><p v-if="userDutyCheck.user_detail">@{{ userDutyCheck.user_detail.mobile_phone }}</p></td>
                        <td ><p v-if="userDutyCheck.user_detail">@{{ userDutyCheck.user_detail.user_labor_company }}</p></td>
                        <td>@{{ userDutyCheck.checked_at }}</td>
                        <td>
                            <div v-if="userDutyCheck.verify_user_id" class="text-center">@{{ userDutyCheck.type }}</div>
                            <select v-else v-model="userDutyCheck.type" @change="isException(userDutyCheck.id,userDutyCheck.user_id,userDutyCheck.checked_at,userDutyCheck.type)" class="form-control" style="width: 100px">
                                <option value="登入">登入</option>
                                <option value="登出">登出</option>
                            </select>
                        </td>
                        <td>
                            <b v-if="userDutyCheck.verify_user_id" class="text-success">已审核</b>
                            <button v-else @click="storeClockAudit(userDutyCheck.id,userDutyCheck.type)" class="btn btn-primary w-80">审核</button>
                        </td>
                        <td>@{{ userDutyCheck.exception }}</td>
                        <td>@{{ userDutyCheck.duration_man_hour }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#list",
            data:{
                userDutyChecks:[
                    @foreach($userDutyChecks as $userDutyCheck)
                    {id:'{{$userDutyCheck->id}}',user_id:'{{$userDutyCheck->user_id}}',checked_at:'{{$userDutyCheck->checked_at}}',
                    type:'{{$userDutyCheck->type}}',verify_user_id:'{{$userDutyCheck->verify_user_id}}',
                    exception:'',duration_man_hour:'',@if($userDutyCheck->userDetail)user_detail:{!! $userDutyCheck->userDetail !!} @endif },
                    @endforeach
                ],
            },
            methods:{
                storeClockAudit(id,type){
                    let _this=this;
                    axios.post('{{url("process/storeClockAudit")}}',{id:id,type:type})
                        .then(function (response) {
                            _this.userDutyChecks.every(function (userDutyCheck) {
                                if (userDutyCheck.id==id){
                                    userDutyCheck.verify_user_id=response.data;
                                    tempTip.setDuration(4000);
                                    tempTip.showSuccess('审核通过！');
                                    return false
                                }
                                return true;
                            });
                        }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('审核失败！网络错误：'+err);
                        });
                },
                isException(id,user_id,checked_at,type){
                    let _this=this;
                    axios.post('{{url("process/isException")}}',{id:id,user_id:user_id,checked_at:checked_at,type:type})
                        .then(function (response) {
                            _this.userDutyChecks.every(function (userDutyCheck) {
                                if (userDutyCheck.id==id){
                                    userDutyCheck.exception=response.data.exception;
                                    userDutyCheck.duration_man_hour=response.data.duration_man_hour;
                                    return false
                                }
                                return true;
                            });
                        }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('校验失败！网络错误：'+err);
                        });
                }
            },
        });
    </script>
@endsection