<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body >
<div style="text-align: center" id="page">
    <h4 style="margin-bottom: 0">宝时物流 欢迎你</h4><br/>
    <h5 style="margin-top: 0;color:#B8860B ">
        @if($type=='登入')
            <b style="color: #2a9055">进场打卡</b>
        @endif
        @if($type=='登出')
            <b style="color: #2a9055">出场打卡</b>
        @endif
    </h5><br/>
    <h3 style="margin-bottom: 0">姓名：@if($full_name)<b style="color: #2a9055">{{$full_name}}</b>@endif&nbsp;&nbsp;&nbsp;&nbsp;进场时间：@if($checked_at)<b style="color: #2a9055">{{$checked_at}}</b> @endif</h3><br/>
    @if($type=='登入')
        <div v-if="userDutyCheck.verify_user_id"><h5 style="color: #2a9055" >门卫审核完成，请到工作组入组打卡审核</h5></div>
        <h5 v-else style="margin-top: 0;color: red">等待门卫审核，请勿关闭:<span id="_lefttime" ></span></h5>
    @endif

    @if($type=='登出')
        <h5 style="margin-top: 0;color: red">下班登出成功</h5>
    @endif
</div>
<script src="{{ asset('js/app.js') }}"></script>
<script>
    new Vue({
        el:'#page',
        data:{
          userDutyCheck:{
              verify_user_id:''
          },
        },
        mounted(){
            initEcho();
            let _this=this;
            Echo.channel('{{$laravelEchoPrefix}}userDutyCheck').listen('GuardAuditEvent',(e)=>{
                let userDutyCheck=e.userDutyCheck;
                _this.userDutyCheck.verify_user_id=userDutyCheck.verify_user_id;
            });
        },
    });
    let secondsInit = 0;
    function _fresh()
    {
        secondsInit ++;
        let seconds = secondsInit;
        let result = '';
        if (seconds >= 3600)
        {
            let h = Math.floor(seconds / 3600);
            result += h + "小时";
            seconds -= 3600 * h;
        }
        if (seconds >= 60)
        {
            let m = Math.floor(seconds / 60);
            result += m + "分";
            seconds -= 60 * m;
        }
        result += seconds + "秒";
        document.getElementById('_lefttime').innerHTML = result;
    }
    _fresh();
    setInterval(_fresh,1000);
</script>
</body>
</html>
