@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">
                <div class="form-group row">
                    <input v-model="full_name" class="col-6 offset-2 form-control" type="text" placeholder="按名称搜索临时工">
                    <button @click="checkUserLabors()" class="col-2 btn btn-info">搜索</button>
                </div>
                <table v-if="userLabors.length>0" class="col-10 offset-1 mt-3 table table-bordered table-hover text-nowrap">
                    <thead class="thead-light">
                    <tr>
                        <th>名称</th>
                        <th>电话</th>
                        <th>劳务所</th>
                        <th>最近打卡时间</th>
                        <th>输入补卡时间</th>
                        <th>类型</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="userLabor in userLabors">
                        <td>@{{ userLabor.full_name }}</td>
                        <td>@{{ userLabor.mobile_phone }}</td>
                        <td>@{{ userLabor.user_labor_company }}</td>
                        <td>
                            <ul class="p-0 m-0 list-unstyled list-inline">
                                <li v-for="user_duty_check in userLabor.user_duty_checks"><small>@{{ user_duty_check.checked_at }}</small></li>
                            </ul>
                        </td>
                        <td >
                            <input  v-model="userLabor.userDutyCheck_date" type="date" class="form-control-sm" style="width: 150px"><br>
                            <input  v-model="userLabor.userDutyCheck_time" @input="hourVerify($event)"  placeholder="时:分" type="text" class="form-control-sm mt-2" style="width: 150px" ><br>
                            <small v-if="errors.checked_at && errors.checked_at.length>0 " class="text-danger">@{{ errors.checked_at[0] }}</small>
                        </td>
                        <td>
                            <select :class="{ 'is-invalid' : errors.type && errors.type.length>0 }" v-model="userLabor.userDutyCheck_type" class="form-control">
                                <option value="">请选择</option>
                                <option value="登入">登入</option>
                                <option value="登出">登出</option>
                            </select>
                        </td>
                        <td><button @click="storeReplenishClock(userLabor)" class="btn btn-info w-100">提交补卡</button></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        new Vue({
            el:"#list",
            data:{
                full_name:'',
                userLabors:[],
                errors:{'checked_at':[],'type':[],},
            },
            methods:{
                checkUserLabors(){
                    let full_name=this.full_name;
                    let _this=this;
                    if (!full_name){
                        tempTip.setDuration(3000);
                        tempTip.show('请输入临时工全名进行搜索!');
                        return;
                    }
                    axios.post("{{url('process/checkUserLabors')}}",{full_name:full_name})
                        .then(function (response) {
                            if (response.data.success){
                                if (response.data.data.length<1){
                                    tempTip.setDuration(3000);
                                    tempTip.show('暂无此人打卡信息!');
                                    return;
                                }
                                response.data.data.every(function (userLabor) {
                                    userLabor['userDutyCheck_type']='';
                                    userLabor['userDutyCheck_date']='';
                                    userLabor['userDutyCheck_time']='';
                                    return true;
                                });
                                _this.userLabors=response.data.data;
                            }
                        }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('搜索临时工打卡记录失败！网络错误：'+err);
                        });
                },
                storeReplenishClock(userLabor){
                    let checked_at=userLabor.userDutyCheck_date+" "+userLabor.userDutyCheck_time;
                    if(!confirm('确定要提交'+userLabor.full_name+"在“"+userLabor.userDutyCheck_date+'”的补卡吗？')){return};
                    let user_id=userLabor.user_id;
                    let type=userLabor.userDutyCheck_type;
                    let _this=this;
                    axios.post("{{url('process/storeReplenishClock')}}",{user_id:user_id,checked_at:checked_at,type:type})
                        .then(function (response) {
                            if (response.data.success=="true"){
                                _this.userLabors.every(function (userLabor) {
                                    if (userLabor.user_id==userLabor.user_id) {
                                        userLabor.user_duty_checks.splice((userLabor.user_duty_checks.length)-1,1);
                                        userLabor.user_duty_checks.unshift(response.data.data);
                                        return false;
                                    }
                                    return  true;
                                });
                                tempTip.setDuration(3000);
                                tempTip.showSuccess(userLabor.full_name+'的补卡成功！');
                                _this.errors={'checked_at':[],'type':[],};
                                return;
                            }
                            _this.errors=response.data.data;
                        }).catch(function (err) {
                            tempTip.setDuration(4000);
                            tempTip.show('录入补卡失败！网络错误：'+err);
                        });
                },
                hourVerify:function(e){
                    datetimeRelating.verifyTime(e);
                },
            },
        });
    </script>
@endsection